解构赋值

解构赋值（Destructuring assignment）

1. 解构赋值是指按照一定模式，从数组和对象中提取值，对变量进行赋值，或函数传参
2. 等号的右边需要写数组或者对象（可以是任何形式，变量、直接量、表达式）
   等号的左边要求将变量名写在数组结构中或者对象结构中，并不是真正的数组或对象。

数组的解构赋值

数组解构赋值根据索引进行匹配：位置一一对应。
可以解构纯数组，也可以解构伪数组（arguments、string、arguments、NodeList 等）

// 1. 声明多个变量并赋值
const num = Math.random();
let [v1,v2,v3,v4,v5] = [100,200,{name:'小乐',age:100},function(){alert('ok');}, num];

// 2. 同时修改多个变量的值
const data = ['司马姥姥', '欧阳姥姥', '东方姥姥', '西门姥姥'];
[v1,v2,v3,v4] = data;

// 3. 使用解构赋值 交换两个变量的值
[v1,v2] = [v2,v1]; //v2和v1同时对前边的进行赋值

// 4. 解构赋值用于函数传参  所谓传参就是实参赋值给形参
function func([name1,name2,name3]) {
    console.log(name1 + '和' + name2 + '以及' + name3 + '是好朋友！');
}
func(['小明', '小刚', '小红']);
func(data);


// 5. 两边的数组结构不完全一致
let [a1,a2,a3] = [100,200,300,400,500];
[a1,a2,a3] = ['刘姥姥', '马姥姥'];  // 重新赋值，按照数组索引进行匹配。
console.log(a1);   // 刘姥姥
console.log(a2);   // 马姥姥
console.log(a3);   // undefiend


// 6. 解构赋值 左侧的变量可以指定默认值
// const [c1,c2,c3=250] = [100,200,300];
// const [c1,c2,c3=250] = [100,200];
const [c1,c2,c3=250] = [100]; //按照顺序进行赋值，从左往右，默认值放在最后



// 7. 解构格式复杂的数组；
// 同一个数组可以进行多种形式的解构
var arr = [
    100,
    ['高小乐', 199],
    [
        100,
        [10, 20]
    ]
];
const [a, [b, c], [d, [e, f]]] = arr; //按照数组结构，归根结底都是按照索引进行解构。
const [d1,d2,d3] = arr;


// 8. 伪数组也可以被解构
const msg = 'Hello 高小乐';
const btns = document.querySelectorAll('.btns button');
const [s1,s2,s3,s4] = msg;
const [btn1,btn2,btn3] = btns;

归根结底都是按照索引进行解构(暂时)。

对象的解构赋值

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

对象解构赋值根据属性名进行匹配
一切皆对象，所有类型的数据都可以进行对象结构

// 1. 对象的解构赋值 按照属性名进行匹配
let {name: username, address, num: age} = {name:'高小乐', address:[10,20,30,40], num:{name:'老乐',age:20}};

const user = {name:'Jack',address:'上海',length:1000};
const {name: u, address: a, num: b} = user;


// 2. 对象的结构赋值简写 左边： 属性名与变量名一致
// {num01:num01, num02:num02, num03:num03} = {num01:1000, num02:2000, num03:3000};
const {num01, num02, num03} = {num01:1000, num02:2000, num03:3000};


// 3. 对象的解构赋值 用于函数传参
function func({content,length,delay}) {
    console.log(content, length, delay);
}
const options = {content:'box', delay:2000, duration:3000};
func(options);


// 4. 对象解构赋值，可以设置默认值 
const {n1:n1, n2:n2=250, n3=350, n4} = {n1:100, n3:300};


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


// 6. 一切皆对象 对象的解构赋值可以解构函数的内置属性
const {length, push, map} = [10,20,30,40,50];
const {length:len, indexOf, forEach} = 'Hello 小乐';
const {PI} = Math;

// 7 结构赋值，对于复杂一些对象 进行解构
const {data:{films,total}} = {data:{data:{films:Array(3),total:14}},config:{...},}

// 8 结构赋值，对于已经定义的变量进行结构
let a;
let obj = {
    a:1,
    b:2,
    c:3
}
// 把obj中的a进行解构赋值,加括号
({a} = obj);