es6: 数组与对象解构赋值

问题: 从数组或对象中提取信息
传统方法:

        let obj = {
     name: 'enoch',
     age: 10
     }
 let name = obj.name;
 let age = obj.age;

      

数组解构赋值:

[varible1, varible2, ..., varibleN] = array;

        let arr = [1, 2, 3];
        // let a = arr[0];             // 传统方法
        // let b = arr[1];
        // let c = arr[2];
        let [a, b, c] = arr;           // 解构赋值
        console.log(a, b, c);          // 返回1 2 3

      

使用:

01. 必须要进行初始化

        let arr = [1, 2, 3]; 
let [a, b, c] ;        // 报错
let [a, b, c] = arr;   // 正确

      

02. 可以在解构中忽略一些项: 可以省略变量名，但是要使用英文逗号分隔

        let arr = [1, 2, 3]; 
let [,,a] = arr;
console.log(a);       // 返回3

      

03. 互换两个变量的值

        let x = 1;
let y = 2;
let temp;           // 传统方法要新增一个变量
temp = x;
x = y;
y = temp;
console.log(x, y);  // 返回2, 1
 
[x, y] = [y, x]     // 解构赋值
console.log(x, y)   // 返回2, 1

      

04. 空数组默认值

        // let[x, y] = [undefined, undefined];
// console.log(x, y)          // 返回undefined undefined
let [x = 10, y = 20] = [, 2]; // 严格等于===undefined会得到默认值  null不严格等于undefined
console.log(x, y) // 返回10 2

      

对象解构赋值:

        let name = 'enoch';
let obj = {
    // name: name    // 值是变量
    name,            // 若属性名和值相同可简写
    age: 10
        }
console.log(obj.name)

      

01. 基本语法: 字面量对象 = 字面量对象

        let {name: name1, age: age1, sex} = {name: 'enoch', age: 10, sex: "male"}
// 左边的属性名匹配右边的属性名，右边的值赋值给左边的变量 属性名和相同可简写
console.log(name1, age1, sex); // 返回 enoch 10 male

      

02. 注意：
必须要进行初始化 等号的左边和右边都必须有值 let{} = {}
在赋值的时候使用解构赋值

        let name1, age1, sex;
 // {name: name1, age: age1, sex} = {name: 'enoch', age: 10, sex: "male"}
 // 这样会报错,浏览器会识别成代码块,我们应该加上()告诉浏览器这是表达式 对象
({name: name1, age: age1, sex} = {name: 'enoch', age: 10, sex: "male"})
console.log(name1, age1, sex);
console.log(({name: name1, age: age1, sex} = {name: 'enoch', age: 10, sex: "male"}))
// 返回对象 整个表达式的值等于右边的值

      

03. 减少代码获得变量名的写法:

         function fn(value){
 // let name = value.name;              // 省去
 // let age = value.age;
     console.log(name, age)
     console.log(value)
}
 let obj = {
     name: 'enoch',
     age: 10
}
 // fn(obj)         // 传对象 返回对象
 // fn({}=obj)      // 传解构赋值表达式 返回对象
 // fn({name:name, age:age}=obj)      // 传解构赋值表达式 返回对象
fn({name, age}=obj)                   // 传值时把变量一并传入

      

04. 空对象默认值

        let obj = {

}
console.log(obj.a);         // 返回undefined
 let {name = 'enoch', age = '10'} = {name: 'zhuli', age: 18}   // 严格等于才能得到默认值
console.log(name, age)      // 返回值或默认值

      

混合解构: 对象和数组结合使用

数组模式匹配

        let [a, b, c] = [1, 2, 3];          // 正常
let [a, b, [c, d]] = [1, 2, 3];     // 报错
let [a, b, [c, d]] = [1, 2, []];    // 不报错
 // 等于
[c, d] = []

      

对象模式匹配

        let {age: [a, b, c]} = {age: [1, 2, 3]}
console.log(a, b, c)