一对象的解构赋值的原理

1.模式(结构)匹配

{}={}

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

const {age,username}={username:"张三",age:23};
const {'age':age,'username':username}={username:"张三",age:23};
console.log(age,username);

     // 取别名
        const {age:age,username:uname}={
            username:'Alex',age:18
        }
        console.log(age,uname);

二对象解构赋值的注意事项

1.默认值的生效条件

对象的属性值严格等于undefined时,对应的默认值才会生效 const {username='张三',age=0}={username:'alex'} console.log(username,age);

2.默认值表达式

如果默认值是表达式,默认值表达式是惰性求值的

3.将一个已经声明变量用于解构赋值

如果将一个已经声明的变量用于对象的解构赋值,整个赋值需在圆括号中进行

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

4.可以取到继承的属性

const {a=1}={}
const {toString}={}
console.log(toString);
Object.prototype
console.log(Object.prototype);
console.log({});

三对象解构赋值的应用

1.函数参数的解构赋值

const logPersonInfo=user=>console.log(user.username,user.age);
const logPersonInfo = ({ age, username }) => console.log(username, age);
logPersonInfo({ username: "alex", age: 18 });

2.复杂的嵌套

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

四其他类型的解构赋值

1.字符串的解构赋值

数组形式的解构赋值

const [a,b,,,c]='hello';
console.log(a,b,c);

对象形式的解构赋值

  const { 0: a, 1: b, length } = "hello";
  console.log(a, b, length);
  console.log((a,b));
  console.log("hello".length);

字符串既可以按照数组的形式来解构赋值,也可以按对象形式来解构赋值

2.数值和布尔值的解构赋值

先将等号右边的值转为对象

console.log(new Number(123));
const {a=1,toString}=123
console.log(a,toString);
const{b=1,toString}=true
console.log(b,toString);

3.undefined和null的解构赋值

由于undefined和null无法转为对象,所以对它们进行解构赋值都会报错

undefined和null没有对应的包装对象,所以无法通过它们转换成相应的对象

const [toString]=undefined
const [toString]=null

Es6-对象的解构赋值

一 对象的解构赋值的原理