解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

1 数组的解构赋值

1. 数组的解构赋值根据索引进行匹配
2. 可以解构纯数组，也可以解构伪数组（字符串、arguments、nodeList...）
3. 等号的左边要求将变量写在数组结构中，并不是真正的数组类型数据，只是一种结构。

// 1. 同时给多个变量声明并赋值
const age = 1000;
let [v1, v2, v3] = ['hello,', ['a','b','c','d'], age];


// 2. 同时修改多个变量的值
/*
    等号右边： 负责提供数据，形式可以是数组直接量，也可以是变量（变量的值是数组）
    等号左边： 将变量放入数组结构
*/
const data = ['刘姥姥', '马姥姥', '司马姥姥', '欧阳姥姥'];
[v1, v2, v3] = data;


// 3. 使用解构赋值 交换两个变量的值
[v1, v2] = [v2, v1];


// 4. 解构赋值不但可以用于给变量赋值， 还可以用于函数传参（函数传参本质上就是实参赋值给形参）
function fn([age, name, address]) {
    console.log(name, age, address);
}
fn([19, '高小乐', '上海']);
fn(data);


// 5. 两边的数组结构不完全一致
const [name1, name2, name3] = ['小乐', '大乐'];
console.log(name1);        
console.log(name2);        
console.log(name3);     // 自动得到 undefined


// 6. 解构赋值 左侧的变量可以指定默认值
let [num1, num2, num3=250] = [10,20];
console.log(num1);
console.log(num2);
console.log(num3);  // 使用默认值


// 7. 解构格式复杂的数组；
//    同一个数组可以进行多种形式的解构
var arr = [
    100,
    ['高小乐', 199],
    [
        100,
        [10, 20]
    ]
];
const [n1, [n2, n3], [n4, [n5, n6]]] = arr;
const [a1, a2, a3] = arr;


// 8. 不但可以解构纯数组，伪数组也可以被解构
// 伪数组： arguments、nodeList、HTMLCollection、String 等
const msg = 'Hello,高小乐';
const [s1, s2, s3, s4, s5, s6, s7] = msg;

var btnItems = document.querySelectorAll('.btns button');
const [e1, e2, e3] = btnItems;

2 对象的解构赋值

1. 对象的解构负值根据属性名进行匹配
2. 对象的结构赋值可以解构所有类型的数据，因为一切皆对象
3. 等号的左边要求将变量写在对象结构中，并不是真正的对象类型数据，只是一种结构。

// 1. 对象的解构负值 按照属性名进行匹配
const data = {name:'高小乐', age: 123, address:'上海', job:'法师'};
const {name: n1, age:n2, address: n3} = data;


// 2. 对象的结构赋值,可以简写 左边： 属性名与变量名一致
// const {name:usernamename, age:age,address:address,job:job} = data;
const {name:username, age, address, job} = data;
console.log(username, age, address, job);


// 3. 对象的解构赋值 用于函数传参
function fn({name, age, address}) {
    console.log(name, age, address);
}
fn(data);
fn({
    name: '安妮',
    age: 17,
    address: '上海'
});


// 4. 对象解构赋值，可以设置默认值 没有顺序要求
const {name:v1='曹操', age:v2, grade:v3='110', address:v4, job:v5} = data;


// 5. 对于复杂一些对象 进行解构 （按照属性名进行解构， 变量位于属性值的位置，属性名是判断条件）
const obj = {
    email: 'xiaole@qq.com',
    nums: [100, 200],
    prop: {
        content: 'Hello ES6'
    }
};

const {email, nums:[num1, num2], prop: {content}} = obj;
const {email: e, nums:n, prop: p} = obj;


// 6. 一切皆对象 对象的解构赋值可以解构一切数据
const {length:len} = 'hello world';  // 字符串中有属性 length
console.log(len);

const {length, push, pop, age: a10} = [100,200,300,400];
console.log(length, push, pop, a10);  // a10 的值是undefined，数组中没有 age 属性