数组的解构赋值

解构赋值是什么

  1.       // 1.认识解构赋值
  2.       // const arr = [1, 2, 3];
  3.       // const a = arr[0];
  4.       // const b = arr[1];
  5.       // const c = arr[2];
  6.       // console.log(a, b, c);
  8.       // const [a, b, c] = [1, 2, 3];
  9.       // console.log(a, b, c);
  11.       // 2.什么是解构赋值
  12.       // 解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量

数组解构赋值的原理

  1.         // 1.模式（结构）匹配
  2.         // [] = [1, 2, 3];
  4.         // 2.索引值相同的完成赋值
  5.         // const [a, b, c] = [1, 2, 3];
  6.         // console.log(a, b, c);
  8.         // 不取的，可以直接用逗号跳过
  9.         const [a, [, , b], c] = [1, [2, 4, 5], 3];
  10.         console.log(a, b, c);

数组解构赋值的默认值

  1.         // 1.默认值的基本用法
  2.         // const [a, b] = [];
  3.         // const [a, b] = [undefined, undefined];
  5.         // const [a = 1, b = 2] = [];
  6.         // console.log(a, b);
  8.         // 2.默认值的生效条件
  9.         // 只有当一个数组成员严格等于（===）undefined 时，对应的默认值才会生效
  10.         // const [a = 1, b = 2] = [3, 0];
  11.         // const [a = 1, b = 2] = [3, null];
  12.         // const [a = 1, b = 2] = [3];
  13.         // console.log(a, b);
  15.         // 3.默认值表达式
  16.         // 如果默认值是表达式，默认值表达式是惰性求值的
  17.         const func = () => {
  18.             console.log('我被执行了a');
  19.             return 1;
  20.         };
  21.         // const [x = func()] = [1];
  22.         const [x = func()] = [];
  23.         console.log(x);

数组解构赋值的应用

  1.         // 1.常见的类数组的解构赋值
  2.         // arguments
  3.         // function func() {
  4.         //   // console.log(arguments);
  5.         //   // console.log(arguments.push);
  6.         //   const [a, b] = arguments;
  7.         //   console.log(a, b);
  8.         // }
  9.         // // func();
  10.         // func(1, 2);
  12.         // NodeList
  13.         // console.log(document.querySelectorAll('p'));
  14.         // const [p1, p2, p3] = document.querySelectorAll('p');
  15.         // console.log(p1, p2, p3);
  17.         // 2.函数参数的解构赋值
  18.         // const array = [1, 1];
  19.         // // const add = arr => arr[0] + arr[1];
  20.         // const add = ([x = 0, y = 0]) => x + y;
  21.         // // console.log(add(array));
  22.         // console.log(add([]));
  24.         // [x,y]=[1,1]
  26.         // 3.交换变量的值
  27.         // let x = 1;
  28.         // let y = 2;
  30.         // let tmp = x;
  31.         // x = y;
  32.         // y = tmp;
  33.         // console.log(x, y);
  35.         // [x, y] = [y, x];
  36.         // [x, y] = [2, 1];
  37.         // console.log(x, y);

对象的解构赋值

对象解构赋值的原理

  1.         // 1.模式（结构）匹配
  2.         // {}={}
  4.         // 2.属性名相同的完成赋值
  5.         // const { age, username } = { username: 'Alex', age: 18 };
  6.         // const { age: age, username: username } = { username: 'Alex', age: 18 };
  7.         // console.log(age, username);
  9.         // 取别名
  10.         const { age: age, username: uname } = { username: 'Alex', age: 18 };
  11.         console.log(age, uname);

对象解构赋值的注意事项

  1.       // 1.默认值的生效条件
  2.       // 对象的属性值严格等于 undefined 时，对应的默认值才会生效
  3.       const { username = 'ZhangSan', age = 0 } = { username: 'alex' };
  4.       console.log(username, age);
  6.       // 2.默认值表达式
  7.       // 如果默认值是表达式，默认值表达式是惰性求值的
  9.       // 3.将一个已经声明的变量用于解构赋值
  10.       // 如果将一个已经声明的变量用于对象的解构赋值，整个赋值需在圆括号中进行
  11.       // let { x } = { x: 1 };
  12.       // console.log(x);
  14.       // let x = 2;
  15.       // // ({ x } = { x: 1 });
  16.       // [x] = [1];
  17.       // console.log(x);
  19.       // 4.可以取到继承的属性
  20.       // const { a = 1} = {};
  22.     //   const { toString } = {};
  23.     //   // console.log(toString);
  24.     //   // Object.prototype
  25.     //   // console.log(Object.prototype);
  26.     //   console.log({});

对象解构赋值的应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>对象解构赋值的应用</title>
  6.   </head>
  7.   <body>
  8.     <script>
  9.       // 1.函数参数的解构赋值
  10.       // const logPersonInfo = user => console.log(user.username, user.age);
  11.       // const logPersonInfo = ({ age = 0, username = 'ZhangSan' }) =>
  12.       //   console.log(username, age);
  13.       // // logPersonInfo({ username: 'alex', age: 18 });
  14.       // logPersonInfo({});
  15.       // // { age, username:username }={ username: 'alex', age: 18 }
  17.       // 2.复杂的嵌套
  18.       const obj = {
  19.         x: 1,
  20.         y: [2, 3, 4],
  21.         z: {
  22.           a: 5,
  23.           b: 6
  24.         }
  25.       };
  26.       // const { x, y, z } = obj;
  27.       // console.log(x, y, z);
  28.       const {
  29.         y,
  30.         y: [, yy],
  31.         z,
  32.         z: { b }
  33.       } = obj;
  34.       console.log(yy, y, z, b);
  35.       // [, yy] = [2, 3, 4]
  36.     </script>
  37.   </body>
  38. </html>

其它数据类型的解构赋值

字符串的解构赋值

  1.       // ''='hello' ×
  2.       // 数组形式的解构赋值
  3.       // const [a, b, , , c] = 'hello';
  4.       // console.log(a, b, c);
  6.       // 对象形式的解构赋值
  7.       // const { 0: a, 1: b, length } = 'hello';
  8.       // console.log(a, b, length);
  9.       // console.log('hello'.length);
  11.       // 字符串既可以按数组形式来解构赋值，也可以按对象形式来解构赋值

数值和布尔值的解构赋值

  1.       // 先将等号右边的值转为对象
  2.       // console.log(new Number(123));
  3.       // const { a = 1, toString } = 123;
  4.       // console.log(a, toString);
  6.       // const { b = 2, toString } = true;
  7.       // console.log(b, toString);

undefined和null的解构赋值

  1.       // 由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错
  2.       // const { toString } = undefined;
  3.       const { toString } = null;