ES6 _ 解构赋值

1、什么是解构运算符

① 解构运算符是对赋值运算符的扩展。

② 解构赋值允许你使用类似数组或对象字面量的语法将数组的对象和属性赋值给各种变量。

③ 这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。

④ 解构会仅提取一个大对象的部分成员来单独使用

如下是传统赋值写法：

var a=data[0]
var b=data[1]
var c=data[2]

但是在ES6中可以简写为：

var [a,b,c]=date;

2、数组模型的解构（Array）

基本

let [a, b, c] = [1, 2, 3];

    console.log(a); // 1

    console.log(b); // 2

    console.log(c); // 3

可嵌套

let [a, [[b], c]] = [1, [[2], 3]];

  console.log(a);   // 1

  console.log(b);   // 2

  console.log(c);   // 3

可忽略

let [a, , b] = [1, , 3];

  console.log(a);   // 1

  console.log(b);   // 3

不完全解构

let [a = 1, b] = [];

console.log(a);   // 1

console.log(b);   // undefined

剩余运算符

let [a, ...b] = [1, 2, 3];

console.log(a);   // 1

console.log(b);   // 2 3

3、对象模型的解构（Object）

基本

let { one, two} = { one: 'ccc', two: 'ddd' };

console.log(one);    // ccc

console.log(two);    // ddd

可嵌套

let oj = {a：[ "maomao" , {b："ent" }  ]  };

let { a : [x , { b } ]}  = oj;

console.log(x);    // maomao

console.log(b);    // ent

不完全解构

let oj2 = {i: [ {q："mao"} ]  }；

let  {i：[{ q }, x]  } = obj;

console.log(x);    // undefined

console.log(q);    //mao

剩余运算符

let { a = 1 , b = 2 } = { a : 3 }；

console.log(a);    // 3

console.log(b);    // 2

let { a：aa = 4 , b：bb = 5} = {a：6}

console.log(a);    // 6

console.log(b);    // 5

4、解构赋值的用途

① 交换变量的值

② 从函数返回多个值

③ 函数参数的定义

④ 提取json数据

⑤ 函数参数的默认值

⑥ 遍历Map结构

⑦ 输入模块制定的方法