ES6新特性 解构赋值

ES6新特性 解构赋值

intro

解构赋值是对赋值运算符=的扩展。
是针对数组或对象进行模式匹配，然后对其中的变量进行赋值。
有点：代码书写简洁，方便对复杂对象中数据的获取。

• 解构模型

  • 解构源: 解构赋值表达式的右边部分。
  • 解构目标: 解构赋值表达式的左边部分。

• 解构方式
  解构时，解构源和解构目标的层级/位置一定要对应。

  • 基本
  • 可嵌套
  • 可忽略
  • rest运算符
  • 不完全解构
  • 默认值

数组模型的解构

// 基本
var [a, b, c] = [1, 2, 3]
console.log(`a=${a}  b=${b}  c=${c}`);  // a=1  b=2  c=3

// 可嵌套
var [a, [b, c]] = [4, [5, 6]]
console.log(`a=${a}  b=${b}  c=${c}`);  // a=4  b=5  c=6

// 可忽略
var [a, b, c] = ["a", , "c"];   // 解构源可忽略元素
console.log(`a=${a}  b=${b}  c=${c}`);  // a=a  b=undefined  c=c
var [a, , b] = [7, 8, 9]        // 解构目标可忽略元素
console.log(`a=${a}  b=${b}`);  // a=7  b=9

// rest运算符。
var [a, ...b] = [10, 11, 12];   // b会赋值为array [11, 12]
console.log(`a=${a}  b=${b}`);  // a=10  b=11,12

// 不完全解构
var [a, b] = [213]
console.log(`a=${a}  b=${b}`)   // a=213  b=undefined

// 默认值
var [a=1, b=2] = [];
console.log(`a=${a}  b=${b}`);  // a=1  b=2
var [a=1, b=2] = ["aaa", "bbb"];
console.log(`a=${a}  b=${b}`);  //  a=aaa  b=bbb

在数组的的结构中，解构源若为可遍历对象，皆可进行解构赋值。
可遍历对象即：实现了Iterator接口的数据(如字符串)。

// 字符串解构到数组
var [a, b, c] = "WYJ";
console.log(`a=${a}  b=${b} c=${c}`); // a=W  b=Y c=J

对象模型的解构

// 基本
var {name, age} = {name:"JT", age:22}; 
console.log(`name=${name}  age=${age}`);  // name=JT  age=22

// 可嵌套
var {p: [x, {y}]} = {p: ["hello", {y: "world"}]};
console.log(`x=${x}  y=${y}`);  // x=hello  y=world

// 可忽略(对象的层级结构一定要对应)
var {p: [x, { }]} = {p: ["hello", {y: "world"}]};
console.log(`x=${x}`);          // x=hello
var {p: [x, {y}]} = {p: ["hello", {}]};
console.log(`x=${x}  y=${y}`);  // x=hello  y=undefined

// ...rest运算符
var {a, b, ...c} = {name:"JT", a:"aa", b:"bb", age:22};
console.log(`a=${a}  b=${b}  c=${JSON.stringify(c)}`);  // a=aa  b=bb  c={"name":"JT","age":22}

// 不完全解构
var {p: [{y}, x]} = {p:[{y:"world"}]};
console.log(`x=${x}  y=${y}`);  // x=undefined  y=world

// 未指定声明的变量要赋值的属性名称
var {variable} = {prop1:"111", prop2:"222"};
console.log(`variable=${variable}`);  // variable=undefined
// 指明对应(查找|赋值)关系
var {prop2: variable} = {prop1:"111", prop2:"222"};
console.log(`variable=${variable}`);  // variable=222

// 默认值
var {name: username} = {msg:"JT"};    // 无匹配 && 无默认值
console.log(`username=${username}`);  // username=undefined
var {name: username="张三"} = {msg:"JT"}; // 无匹配，但有默认值。
console.log(`username=${username}`);  // username=张三

对象解构中要注意：
{要查找的属性名: 声明的变量=默认值} = {...}