数组

机制

  • 对数组进行“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

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

  • 解构不成功时，会赋值 undefined

    1. let [a] = []
    2. console.log(a)  // undefined

    默认值

  • 当对应值 === undefind 时，会选择默认值

    1. let [a = 1, b = 1] = [];
    2. console.log(a,b)  // 1 1
    1. let [a = 1, b = 1] = [null];
    2. console.log(a,b)  // null 1
    1. let [a = 1, b = 1] = [2,2];
    2. console.log(a,b)  // 2 2

  • 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

    1. let [x = 1, y = x] = [];      // x=1; y=1
    2. let [x = 1, y = x] = [2];     // x=2; y=2
    3. let [x = 1, y = x] = [1, 2];  // x=1; y=2
    4. let [x = y, y = 1] = [];      // ReferenceError: y is not defined

    对象

    机制

  • 先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

    1. let { a: foo, b: bar } = { a: 'aaa', b: 'bbb' };
    2. // foo、bar 才是赋值的对象

  • 不按数据顺序进行复制，变量名需相同

    1. let { b, a } = { a: 'aaa', b: 'bbb' };
    2. console.log(a) // "aaa"
    3. console.log(b) // "bbb"

  • 多次解构 ```javascript const node = { loc: { start: {

    1. line: 1,
    2. column: 5

    } } };

let { loc, loc: { start }, loc: { start: { line }} } = node; console.log(line) // 1 console.log(loc) // Object {start: Object} console.log(start) // Object {line: 1, column: 5}

  2. -  重复赋值：
  3.    - 对象解构形式允许多次列出同一个源属性（持有值类型任意）。
  4.    - 这也意味着可以解构子对象 / 数组属性，同时捕获子对象 / 类的值本身。
  5. ```javascript
  6. var { a: { x: X, x: Y }, a } = { a: { x: 1 } };
  7. X; // 1
  8. Y; // 1 
  9. a; // { x: 1 } 
  11. ( { a: X, a: Y, a: [ Z ] } = { a: [ 1 ] } ); X.push( 2 ); Y[0] = 10; 
  12. X; // [10,2] 
  13. Y; // [10,2] 
  14. Z; // 1

默认值

  • 当对应值 === undefind 时，会选择默认值 ```javascript var {x = 3} = {}; x // 3

var {x: y = 3} = {}; y // 3

var {x: y = 3} = {x: 5}; y // 5

var { message: msg = ‘Something went wrong’ } = {}; msg // “Something went wrong”

  1. <a name="o6Rrv"></a>
  2. ### 数组解构为对象
  4. - 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
  5. ```javascript
  6. let arr = [1, 2, 3];
  7. let {0 : a, 1 : b, [arr.length - 1] : c} = arr;
  8. console.log(a)  // 1
  9. console.log(b)  // 2
  10. console.log(c)  // 3

字符串

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

    1. const [a, b, c, d, e] = 'hello';
    2. console.log(a,b,c,d,e)  // h e l l o

  • 类似数组的对象都有一个 length 属性，因此还可以对这个属性解构赋值。

    1. let {length : len} = 'hello';
    2. consloe.log(len)  // 5

    函数参数

    1. const fn = ({a = 1,b = 2} = {}) => {
    2. return [a,b]
    3. }
    4. fn({})  // [1,2]
    5. fn({a:x,b:y})  // [x,y]
    6. fn() // [1, 2]

    下面的写法会得到不一样的结果。

    1. function move({a, b} = { a: 0, b: 0 }) {
    2. return [a, b];
    3. }
    4. move({a: 3, b: 8}); // [3, 8]
    5. move({a: 3}); // [3, undefined]
    6. move({}); // [undefined, undefined]
    7. move(); // [0, 0]

    交换变量

    1. let x = 1;
    2. let y = 2;
    3. [x, y] = [y, x];

    导入模块

    1. const { SourceMapConsumer, SourceNode } = require("source-map");