一文彻底搞懂JS高级之解构赋值(javascript面向对象系列)

1.数组的解构赋值

解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或者常量

原理：模式(结构匹配), 索引值相同的完成赋值

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

1.1默认值的用法

 const [c, d] = []
 console.log(c, d); //undefined unfined
 const [e = 1, f = 1] = [];
 console.log(e, f); //1,1

默认值的生效条件：只有当一个数组成员严格等于(===)undefined时，对应的默认值才会生效

默认值表达式：惰性求值

 const func = () => {
   console.log('我被执行了');
   return 2;
 }
 const [x = func()] = [1];
 console.log(x);  //1 没有打印出我被执行了，这里的函数没有执行，如果默认值是表达式，就惰性求值
 const [x= func()] = [];为空，则可以求值。//2，我被执行了

2.对象的解构赋值

原理：原理：模式(结构匹配), 属性名相同的完成赋值 {}={}

const {
      'username':username,
      'age':age  //属性名和属性值一样的话可以简写为一个
 } = {
     username: 'Alex',
     age: 18
    };
console.log(username, age);  //Alex 18

2.1对象解构赋值的默认值

const {
 username2 = "zhangsna", age2 = 0
   } = {
    username2: 'alex'
  };
 console.log(username2, age2); //alex,0

默认值表达式：惰性求值

2.2对象结构赋值的应用

 const userINfo = user => {
   console.log(user.username, user.age); //alex2 19
    }
   userINfo({
     username: 'alex2',
     age: 19
   });
   //改进
   const userINfo3 = ({
     username3,
     age3
   }) => {
   console.log(username3, age3);  //alex3 13
   }
   userINfo3({
    username3: 'alex3',
    age3: 13
  });

3.其他类型的解构赋值

字符串可以以数组的形式的解构赋值
    const [w, g] = 'hello';
    console.log(w, g);
字符串可以以对象的形式的解构赋值
    const {
       0: w,
       2: g
     } = 'hello';
    console.log(w, g);
数组和布尔值的解构赋值(必须用底线给的形式)
先将等号右边的转换为对象
    console.log(new Number(123));
     const {
        a = 1, toString
     } = 123;
    console.log(a, toString); //继承
     const {
        b = 2, toString
     } = true;
   console.log(b, toString); //继承
undefined和null解构赋值，和字符串或者布尔一样转换的话，会报错