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 (中国标准时间)