JS解构赋值

  • 从ES6最先,JavaScript引入了解构赋值,能够同时对一组变量举行赋值。

1. 基础范例

let [lString, lBoolean, lNumber] = ['ES6', true, 20181227];
// 效果:lString = ES6, lBoolean = true, lNumber = 20181227

/**
 * 注重,对数组元素举行解构赋值时,多个变量要用[...]括起来。
 * 假如数组自身另有嵌套,也能够经由过程下面的情势举行解构赋值,注重嵌套条理和位置要保持一致:
 */
let [lString, lBoolean, lNumber] = ['ES6', [true, 20181227]];
// 效果:lString = ES6, lBoolean = true,20181227, lNumber = undefined
// 准确的做法
let [lString, [lBoolean, lNumber]] = ['ES6', [true, 20181227]];
// 效果:lString = ES6, lBoolean = true, lNumber = 20181227

// 解构赋值还能够疏忽某些元素:
let [, , lNumber] = ['ES6', [true, 20181227]];
// 效果:lNumber = 20181227

2. 数组范例

let [clubs, players] = [
    ['Lakers', 'Magic'], 
    ['Lonzo Ball', 'Anthony Davis', 'Kawhi Leonard', 'Donovan Mitchell', '达龙 福克斯']
];
// 效果:clubs = [ 'Lakers', 'Magic' ]
// 效果:players = [ 'Lonzo Ball', 'Anthony Davis', 'Kawhi Leonard', 'Donovan Mitchell', '达龙 福克斯' ]

3. 对象范例

let person = {
    name: '达龙 福克斯',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'Kentucky',
    address: {
        city: '重庆',
        street: '龙湖时期天街',
        zipcode: '400002'
    }
};
let { name, address: { city, zip } } = person;
/**
 * name = '达龙 福克斯'
 * city = '重庆'
 * zip  = undefined #由于属性名是zipcode而不是zip
 * 注重: address不是变量,而是为了让city和zip取得嵌套的address对象的属性:
 * address; #ReferenceError: address is not defined
 */
 
/**
 * >> 运用解构赋值对对象属性举行赋值时,假如对应的属性不存在,变量将被赋值为undefined,
 *    这和援用一个不存在的属性取得undefined是一致的。
 * >> 假如要运用的变量名和属性名不一致,能够用下面的语法猎取:
 */
let { name, address: { city, zipcode:code } } = person;
// code = '400002'

// 解构赋值还能够运用默认值,如许就避免了不存在的属性返回undefined的题目:
let { name, address: { city, zipcode:code }, club='kings' } = person;
// club = 'kings'

4. 运用场景

// 疾速猎取当前页面的域名和途径:
let {hostname:domain, pathname:path} = location;

/**
 * 假如一个函数吸收一个对象作为参数,那末,能够运用解构直接把对象的属性绑定到变量中。
 * 比方,下面的函数能够疾速建立一个Date对象:
 */
function buildDate({year, month, day, hour=0, minute=0, second=0}) {
    return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
}
buildDate({ year: 2018, month: 12, day: 27 });
// Thu Dec 27 2018 00:00:00 GMT+0800 (中国标准时间)
// 传入hour、minute和second属性:
buildDate({ year: 2018, month: 12, day: 27, hour: 20, minute: 15 });
// Thu Dec 27 2018 20:15:00 GMT+0800 (中国标准时间)
    原文作者:jrue
    原文地址: https://segmentfault.com/a/1190000017536895
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞