数组解构赋值的原理

1. 模式结构匹配

   [] = [1,2,3]

2. 索引值相同的完成赋值

const [a,b,c] = [1,2,3]

3. 不取值直接用逗号隔开

const [a,[,,b],c] = [1,[2,3,4],5]

数组解构赋值的应用

1. 常见的类数组的解构赋值

         function fn() {
            const [x, y] = arguments
             return x + y
         };

2. NodeList 获取标签赋值

        const p = document.querySelectorAll("p")
        const [p1, p2, p3] = p
        console.log(p1, p2, p3)

3. 函数参数的解构赋值

      const add = ([x, y]) => x + y
      console.log(add([1, 2]))

4. 变换变量的值

      var x = 1;
      var y = 2;
      var tym = y;
      y = x
      x = tym;
      [x, y] = [y, x]
      console.log(y, x)

数组解构赋值的默认值

1. 默认值生效条件

// 只有当一个数组成员严格等于(===) undefined时 对应得默认值才会生效
      const [a = 1, b = 2] = [3, null]
      console.log(a, b)

2. 默认表达式

    // 如果默认值是表达式，默认值表达式是随性求值得
      const fn = () => {
          console.log("被执行le");
          return 2
      };
      const [x = fn()] = []
      console.log(x)

对象的解构赋值

1. 模式(解构)匹配

{}={}

2. 属性名相同的完成赋值

      const { name: name, age: age } = { name: "显春", age: 18 };
      console.log(name, age)
      const { name, age } = { name: "显春", age: 18 };
      console.log(name, age)

对象的解构赋值

1. 函数参数的解构赋值

      const add = ({ name, age }) => console.log(name, age);

      add({ name: "Ajax", age: 98 });

2. 复杂嵌套

        x: 1,
        y: [2, 3, 4],
        z: {
          a: 5,
          b: 6,
        },
      };
      var { x: x } = obj;
      var {
        y: [, yy],
      } = obj;
      var {
        z: { a },
      } = obj;
      console.log(a);
      console.log(x);
      console.log(yy);s
      const obj = {
        x: 1,
        y: [2, 3, 4],
        z: {
          a: 5,
          b: 6,
        },
      };
      var { x: x } = obj;
      var {
        y: [, yy],
      } = obj;
      var {
        z: { a },
      } = obj;
      console.log(a);
      console.log(x);
      console.log(yy);

对象赋值的注意事项

1. 默认值的生效条件

      // 对象的属性值严格等于 undefined时,对应的默认值才会生效
        const { unde = "Ajax" } = { unde: "Boa" };
        console.log(unde);
      //  默认值表达式
      // 如果默认值是表达式，默认值表达式是惰性求值的整个赋值过程都在圆括号中进行

2. 将一个已经声明的变量由于解构赋值

      let a = { a: 1 };
      console.log(a);
      let x = 2;
      console.log(x);

3. 可以取到继承属性

        const {a=1} = {}
        const { toString } = {};

方括号语法

1. 方括号语法

const prop = "age";
 // 方括号语法可以写在对象字面量中
const data = {
      [prop]: 18,
    };
 console.log(data);

2. 方括号中可以放什么

      //值或者通过计算可以得到的值(表达式)
 const prop = "age";
 const fn = () => "age2";
 const data = {
     [prop]: 18,
     [fn()]: 19,
     ["sex"]: 20,
     ["s" + "ex1"]: 30,
     ;
 console.log(data);

3. 方括号语法加点语法的区别

      //点语法是方括号语法的特殊形式
       const data = {};
       data.age等价于data["age"]

      // 属性名数字，字母，下划线以及$构成,并且数字还不能打头
      // 时候可以使用点语法

其他数据类型的解构赋值

1. 字符数组串解构赋值

         const [a, b, , , c] = "xianchun"
         console.log(a, b, c)

2. 字符串对象赋值

        const { 0: a, 5: b } = "xianchun"
        console.log(a, b) 
        
 // 字符串既可以按数组形式来解构赋值，也可以按对象形式来解构赋值

3. 数值和布尔值得解构赋值

        // 现将等号右边的值转为对象
         const {b=2,toSring}=true
         console.log(b,toSring)

3. undefined null 解构赋值

        // 由于undefined和null无法转换为对象所以对他们进行解构赋值都会报错
         const { toString } = undefined
         const { toString } = null

属性方法的简洁表达方法

1. 实例化构造函数生成对象

         const person = new Object();
         person.age = 18;
         person.speack = function () {};

      //对象字面量
         const person = {
          age: 18,
          spack: function () {},
         };

2. 属性的简洁表示法

      // 建名和变量或常量一样的时候，可以只写一个
         const age = 18;
         const parc = {
           age,
         };
         console.log(parc.age);

3. 方法的简洁表示法

      // 方法可以省略冒号和function关键字
         const parc = {
           scoe() {
             console.log(1);
           },
         };
         parc.scoe();