1.数组的解构赋值

基本用法

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
例如：

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

这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

  1. let [foo,[[bar],baz]] = [1,[[2],3]];
  2. foo //1
  3. bar //2
  4. baz //3.
  6. let [ , , third] = ["foo","bar","baz"];
  7. third //"baz"
  9. let [head, ...tail] = [1,2,3,4];
  10. head //1
  11. tail //[2,3,4]

对于Set结构，也可以使用数组的解构赋值

  1. let [x,y,z] = new Set(['a','b','c']);
  2. x //"a"

只要某种数据结构具有Iterator借口，都可以采用数组形式的解构赋值。

默认值

解析赋值允许指定默认值。

  1. let [foo = true] = [];
  2. foo //true
  • 如果一个数组成员是null，默认值就不会生效，因为null不严格 等于undefined。
  • 如果默认值是一个表达式，它是惰性求值的，用到的时候才会求值。
  • 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

    2.对象的解构赋值

    对象的解构是按照变量与属性同名的才能取到正确的值，而数组是按次序排列。
  1. let {bar,foo} = {foo:'aaa','bar' : 'bbb'};
  2. foo //"aaa"
  3. bar //"bbb"
  5. let {baz} = { foo:'aaa',bar:'bbb'};
  6. baz //undefined

如果变量名与属性名不一致，必须写成下面这样。

  1. let {foo : "baz"} = {foo:'aaa',bar:'bbb'};
  2. baz //"aaa"

默认值

对象的解构也可以指定默认值。
默认值生效的条件是对象的属性值严格等于undefined。

3. 字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

  1. const [a,b,c,d,e] = 'hello';
  2. a //"h"
  3. b // "e"
  4. c // "l"
  5. d // "l"
  6. e // "o"

4.数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

5.函数参数的解构赋值

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

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

6.用途

  1. 交换变量的值
  1. [x.y] = [y,x];
  1. 从函数返回多个值
  1. //返回一个数组
  3. function example(){
  4.   return [1,2,3];
  5. }
  6. let [a,b,c] = example();
  8. //返回一个对象
  10. function example(){
  11.   return {
  12.     foo:1,
  13.     bar:2
  14.   };
  15. }
  16. let {foo,bar}=example();

  1. 函数参数的定义

    1. 函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
  1. //返回一个数组
  3. function example(){
  4.   return [1,2,3];
  5. }
  6. let [a,b,c] = example();
  8. //返回一个对象
  10. function example(){
  11.   return {
  12.     foo:1,
  13.     bar:2
  14.   };
  15. }
  16. let {foo,bar} = example();
  1. 提取JSON数据

解构赋值对提取JSON对象中的数据尤其有用。

  1. let jsonData = {
  2.   id:42,
  3.   status:"OK"M
  4.   data:[567,5309]
  5. };
  7. let {id,status,data:number}=jsonData;
  8. console.log(id,status,number);
  9. //42,"OK",[867,5309]
  1. 函数参数的默认值
  2. 加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
  1. const { SourceMapConsumer, SourceNode } = require("source-map");