• 数组的解构赋值
  • 对象的解构赋值
  • 字符串的解构赋值
  • 数值和布尔值的解构赋值
  • 函数参数的解构赋值

数组的解构赋值

  1. // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
  2. {
  3.     // es5
  4.     let a = 1;
  5.     let b = 2;
  6.     let c = 3;
  7.     console.log(a, b, c); // 1 2 3
  8. }
  9. {
  10.     // es6
  11.     let [a, b, c] = [1, 2, 3];
  12.     console.log(a, b, c); // 1 2 3
  13. }
  14. // 可以从数组中提取值，按照对应位置，对变量赋值。
  15. // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值
  16. {
  17.     let [a, [[b], c]] = [1, [[2], 3]];
  18.     console.log(a, b, c); // 1 2 3
  19. }
  20. {
  21.     let [, , c] = [1, 2, 3];
  22.     console.log(c); // 3
  23. }
  24. {
  25.     let [a, , c] = [1, 2, 3];
  26.     console.log(a, c); // 1 3
  27. }
  28. {
  29.     let [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
  30.     console.log(a, b, rest); // 1 2 [3, 4, 5, 6]
  31. }
  32. {
  33.     // 如果解构不成功，变量的值就等于undefined
  34.     let [a, b, ...c] = ["Di-got"];
  35.     console.log(a, b, c); // Di-got undefined []
  37.     // 另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。
  38.     let [d, e] = [1, 2, 3];
  39.     console.log(d, e); // 1 2
  41.     let [f, [g], h] = [1, [2, 3], 4];
  42.     console.log(f, g, h); // 1 2 4
  43. }
  44. {
  45.     // 默认值
  46.     let [x = 1, y = x] = []; // x=1; y=1
  47.     let [x = 1, y = x] = [2]; // x=2; y=2
  48.     let [x = 1, y = x] = [1, 2]; // x=1; y=2
  49.     let [x = y, y = 1] = []; // ReferenceError: y is not defined
  50.     // x用y做默认值时，y还没有声明。
  51. }

对象的解构赋值

  1.     // 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
  3.     // 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
  4.     {
  5.         let { a, b } = { a: 1, b: 2 };
  6.         console.log(a, b);    // 1 2
  7.     }
  8.     {
  9.         // 变量没有对应的同名属性，导致取不到值，最后等于undefined(解构失败，变量的值等于undefined。)
  10.         let { a } = { b: 2 };
  11.         console.log(a); // undefined
  12.     }
  13.     {
  14.         // 默认值
  15.         let { x = 3 } = {};
  16.         console.log(x); // 3
  18.         let { x, y = 5 } = { x: 1 };
  19.         console.log(x, y) // 1 5
  21.         let { x: y = 3 } = {};
  22.         console.log(y); // 3
  24.         let { x: y = 3 } = { x: 5 };
  25.         console.log(y) // 5
  27.         let { message: msg = 'Something went wrong' } = {};
  28.         console.log(msg); // "Something went wrong"
  29.     }
  30.     {
  31.         // 已经声明的变量用于解构赋值
  32.         // 错误写法
  33.         let x;
  34.         {x} = {x: 1}; // SyntaxError: syntax error
  35.         // JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。
  37.         // 正确的写法 (将整个解构赋值语句，放在一个圆括号里面，就可以正确执行)
  38.         let x;
  39.         ({x} = {x: 1});
  41.         // 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
  42.         let arr = [1, 2, 3];
  43.         let { 0: first, [arr.length - 1]: last } = arr;
  44.         console.log(first, last); // 1 3
  45.     }
  46.     {
  47.         let metaData = {
  48.             title: 'wcd',
  49.             test: [{
  50.                 title: 'test',
  51.                 desc: 'description'
  52.             }]
  53.         }
  54.         let { title: esTitle, test: [{ title: cnTitle }] } = metaData;
  55.         console.log(esTitle, cnTitle);    // wcd test
  56.     }

字符串的解构赋值

  1. // 字符串也可以解构赋值
  2. // 字符串被转化成了一个类似数组的对象
  3. {
  4.     const [a, b, c, d, e] = "hello";
  5.     console.log(a, b, c, d, e); // h e l l o
  6. }
  7. {
  8.     // 类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
  9.     let { length: len } = "hello";
  10.     console.log(len); // 5
  11. }

数值和布尔值的解构赋值

  1. // 解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
  2. // 注意：解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
  3. {
  4.     let { toString: s } = 123;
  5.     console.log(s === Number.prototype.toString); // true
  6. }
  7. {
  8.     let { toString: s } = true;
  9.     console.log(s === Boolean.prototype.toString); // true
  10. }

函数参数的解构赋值

  1. // 函数的参数也可以使用解构赋值
  2. {
  3.     [[1, 2], [3, 4]].map(([a, b]) => a + b); // [3, 7]
  4. }
  5. // 函数参数的解构也可以使用默认值
  6. // 函数moveOne的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。
  7. {
  8.     function moveOne({ x = 0, y = 0 } = {}) {
  9.         return [x, y];
  10.     }
  12.     moveOne({ x: 3, y: 8 }); // [3, 8]
  13.     moveOne({ x: 3 }); // [3, 0]
  14.     moveOne({}); // [0, 0]
  15.     moveOne(); // [0, 0]
  16. }
  17. // 函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。
  18. {
  19.     function moveTwo({ x, y } = { x: 0, y: 0 }) {
  20.         return [x, y];
  21.     }
  23.     moveTwo({ x: 3, y: 8 }); // [3, 8]
  24.     moveTwo({ x: 3 }); // [3, undefined]
  25.     moveTwo({}); // [undefined, undefined]
  26.     moveTwo(); // [0, 0]
  27. }
  28. // undefined就会触发函数参数的默认值。
  29. {
  30.     [1, undefined, 3].map((x = "yes") => x); // [ 1, 'yes', 3 ]
  31. }