解构赋值:解析数据源 然后按照数据模型进行取值 再赋值给模型变量
两种模型
1.对象模型
let obj = { a: 100, b: 200, c: 300 };
let { a, b, c } = obj;
console.log(a);
console.log(b);
console.log(c);
2.数组模型
let [a, b, c] = arr;
//浏览器执行的隐式操作
let a=arr[0]
let b=arr[1]
let c=arr[2]
举个例子
let arr = [{ age: 20 }, { name: "张三" }];
let [{ age, name }] = arr;
//let name=arr[0].name
console.log(age, name); //20 undefined
解构赋值允许指定默认值(当结构赋值找到的结果全等于undefined时 变量会取默认值 有值就会优先取找到的值 特别注意 null也不全等于undefined 也会取到值)
let arr = [undefined, , null];
let [a = 20, b = 10, c = 30] = arr;
console.log(a, b, c); //20 10 null
来个复杂一点的 写出变量赋值情况
let [{age,its:[a,{b}]}]=data
// let age=data[0].age
// let a=data[0].its[0]
// let b=data[0].its[1].b
最后需要注意的是解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错
// let { toString: s } = 123;
// console.log(s === Number.prototype.toString); // true
let { toString: s } = true;
console.log(s === Boolean.prototype.toString); // true
let { prop: x } = undefined; // 报错
console.log(x);
let { prop: y } = null; // 报错
console.log(y);