ES6语法: 解构赋值

作用: ES6允许按照一定方式从数组和对象中提取值, 并对变量进行赋值, 这被称为解构赋值.

数组解构:

let [a, b, c] = [1, 2, 3]; 
console.log(a) 
console.log(b) 
console.log(c)

如果解构不成功，变量的值为undefined。

let [foo] = []; //Cannot redeclare block-scoped variable 'foo'
let [bar, foo] = [1];  //Cannot redeclare block-scoped variable 'foo'.

补充:

// 定向取法
let arr1 = [1, 2, 3];
let [,,d] = arr1;
console.log(d); //3

// 嵌套写法
let arr = [1, [2, 3], 4];
let [a, [b, ], c] = arr;
console.log(b); //2

---

对象解构:

let person = { name: 'zhangsan', age: 20 };  
let { name, age } = person; 
console.log(name); // 'zhangsan'  
console.log(age); // 20

let person = { name: 'zhangsan', age: 20 };  
let {name: myName, age: myAge} = person; // myName myAge 属于别名 
console.log(myName); // 'zhangsan'  
console.log(myAge); // 20

补充:

let code = "AAAA"
let res = {
  code: 200,
  data: {
    list: ["aaa", "bbb", "ccc"]
  }
}

// 重命名写法
let {code:co} = res;
console.log(co); // 200

// 数组嵌套写法
let {data:{list:[x, y, z]}} = res;
console.log(x, y, z); // aaa bbb ccc

实际应用:

对返回参数进行解构

function getData() {
  let res = {
    code: 200,
    data: {
      list: ["aaa", "bbb", "ccc"]
    }
  }
  test(res)
}

function test({code, data:{list}}) {
  console.log(code, list);
}

getData(); // 200 ['aaa', 'bbb', 'ccc']

注意：在解构语法中，冒号左边的用于匹配值，冒号右边的是真正的变量