解构赋值是对赋值运算符的扩展。
通过解构，可以更加简单的获取复杂对象的属性
解构模型
解构的源，解构赋值表达式的右边部分
解构的目标，解构赋值表达式的左边部分
对象属性解构
当变量名称与对象中的属性名称一致时，可简写
const PI = Math.PI;
const E = Math.E;
//等价于
const { PI, E } = Math;
函数参数解构
//解构
// const PI = Math.PI;
// const E = Math.E;
const { PI, E } = Math;
const circle = {
label: "circleX",
radius: 2
};
//设置参数默认值 {precision=2}，={}表示参数可选,设置其他参数值 {precision:4}
const circleArea = ({ radius }, { precision = 2 } = {}) => (PI * radius * radius).toFixed(precision);
console.log(circleArea(circle, { precision: 4 }));
{attr}使用解构方式获取对象参数中的对应属性,这样在函数内部就可以直接使用该属性变量 attr，而不是通过对象再去获取对应的属性 obj.attr 的方式去使用该属性值
{attr=value}使用该方式设置解构参数的默认值
{radius}对 circle 对象进行解构，获取当前函数所需属性
字符串的解构
let [a, b, c, d, e] = "hello";
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
数组解构
如果不需要当前位置解构，对应的位置置空，但是必须用逗号隔开
const [one, two, , , five] = [1, 2, 3, 4, 5];
console.log(one); //1
console.log(two); //2
console.log(five); //5
REST 运算符参与的解构–…
数组解构
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); //1
console.log(rest); //[2,3,4,5]
构建新的数组
const array1 = [...rest];
console.log(array1); //[2,3,4,5]
array1 是 rest 副本，浅拷贝
属性解构
解构
const { temp0, temp1, ...person } = obj;
console.log(temp0);
console.log(person);
构建新的对象键值对
const newObj = {
...person
};
newObj 是 person 副本，浅拷贝
解构的赋值
解构的过程中：
如果左边的变量在右边存在匹配值，则解构后值为匹配值；
let [a] = [3]; // a = 3
如果左边的变量设置了默认值，并且在右边存在匹配值，则解构后值为匹配值；
let [a = 2] = [3]; // a = 3
如果左边的变量在右边不存在匹配值，则解构后值为 undefined；
let [a] = []; //a=undefined
let [a] = [undefined]; //a=undefined
如果左边的变量设置了默认值，并且在右边不存在匹配值，则解构后值为默认值；
let [a = 2] = []; // a = 2
let [a = 2] = [undefined]; // a = 2
如果右边对应匹配值为 undefined，也即没有匹配值文章来源：https://www.toymoban.com/news/detail-421199.html
示例：文章来源地址https://www.toymoban.com/news/detail-421199.html
let [a = 3, b = a] = []; // a = 3, b = 3
let [a = 3, b = a] = [1]; // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
到了这里，关于[ES6]解构与赋值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
