ES6中的变量的解构赋值2

ES6中的变量的解构赋值2

函数参数的解构赋值

函数的参数也可以使用解构赋值。

function add([x, y]){
return x + y;
}
add([1, 2]); // 3

同时函数参数的解构也可以使用默认值

但是注意写的位置一定要写正确，下面第一种写法是为变量为指定默认值，而第二种写法是为函数的参数指定默认值，这两种写法得到的结果不相同！

function move1({x = 0, y = 0} = {}) {
return [x, y];
}

function move2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move1({x: 3}); // [3, 0]
move2({x: 3}); // [3, undefined]

move1({}); // [0, 0]
move1(); // [0, 0]

move2({}); // [undefined, undefined]
move2(); // [0, 0]

圆括号的问题

圆括号的使用一定要规范，尽量不要多使用圆括号，如果会导致解构中的歧义，则不要使用圆括号。

不得使用圆括号的情况

1. 变量声明语句

   变量声明语句，模式不得使用圆括号。以下语句全部都会报错。

   // 全部报错
   let [(a)] = [1];
   let {x: (c)} = {};
   let ({x: c}) = {};
   let {(x: c)} = {};
   let {(x): c} = {};
   let { o: ({ p: p }) } = { o: { p: 2 } };
   

2. 函数参数

   因为函数参数也属于变量声明，因此不能带有圆括号。以下情况也都会报错

   // 报错
   function f([(z)]) { return z; }
   // 报错
   function f([z,(x)]) { return x; }
   

3. 赋值语句的模式

   代码的整个模式或者部分模式放在圆括号中，都会导致报错

   // 全部报错
   
   ({ p: a }) = { p: 42 };
   [({ p: a }), { x: c }] = [{}, {}];
   

可以使用圆括号的情况

可以使用圆括号的情况就只有一种：赋值语句的非模式部分，可以使用圆括号。

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

解构复制的用途

1. 交换变量的值

   [x,y]=[y,x]
   

2. 从函数返回多个值

3. 函数参数的定义

4. 提取JSON数据

   let jsonData = {
   id: 42,
   status: "OK",
   data: [867, 5309]
   };
   let { id, status, data: number } = jsonData;
   

5. 函数参数默认值

6. 遍历Map结构

   任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

   const map = new Map();
   map.set('first', 'hello');
   map.set('second', 'world');
   
   for (let [key, value] of map) {
     console.log(key + " is " + value);
   }
   // first is hello
   // second is world
   

7. 输入模块的指定方法

如需详细学习，请继续查看官方文档

本文仅为个人学习总结，如有错误，欢迎指出。