一、对象的解构赋值有顺序吗
对象的解构赋值是按照属性名来解构的，属性名相同的情况下，后面的解构会覆盖掉前面的解构。
let obj = {a: 1, b: 2, c: 3};
let {a, b, c} = obj;
console.log(b); // 2
let {a: A, b: B, c: C, d: D} = obj;
console.log(B, D); // 2 undefined
在上面的例子中，代码中首先定义了一个对象obj，这个对象有三个属性：a、b和c。接着通过解构赋值将对象的属性分别赋值给了变量a、b和c。然后再次进行解构，将属性名a赋给了变量A，将属性名b赋给了变量B，将属性名c赋给了变量C，属性名d没有对应的值，所以变量D的值为undefined。
二、什么是解构赋值
解构赋值是从数组或对象中提取数据并赋值给变量的一种方式。
通过解构赋值，可以快速的获取数组或对象中需要的部分数据，而不用进行复杂的遍历操作。在ES6中，提供了数组和对象的解构赋值语法，方便了开发者的编码工作。
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(b); // 2
let obj = {name: 'Jack', age: 18};
let {name, age} = obj;
console.log(name); // Jack
在上面的例子中，对数组和对象进行了解构赋值。数组的解构赋值通过中括号来表示，对象的解构赋值通过花括号来表示。
三、对象的解构赋值是浅拷贝吗
对象的解构赋值并不是浅拷贝，而是将原对象中引用类型的属性进行浅拷贝后，将新对象的引用赋给解构赋值语句左侧的相应变量。
let obj = {a: {b: 1}};
let {a} = obj;
a.b = 2;
console.log(obj.a.b); // 2
在上面的例子中，原对象obj中的属性a是一个对象，通过解构赋值将属性a赋值给了变量a。之后，对变量a的属性进行了修改，发现原对象obj中的属性a的值也被修改了。
四、对象的解构赋值会有什么弊端
对象的解构赋值中，如果解构的属性不存在，那么对应的变量将会被赋值为undefined。如果后面的代码使用了这些未定义的变量，那么就会抛出错误。在实际的开发中应该注意解构的属性是否存在。
let obj = {a: 1, b: 2};
let {a, c} = obj;
console.log(c); // undefined
在上面的例子中，代码中尝试解构对象obj的属性a和c。由于属性c在对象中不存在，所以变量c被赋值为undefined。
五、对象结构赋值
对象的结构赋值可以有多层嵌套，也可以使用默认值来避免不存在的属性报错。
let obj = {
name: 'Alice',
age: 18,
scores: {
math: 80,
english: 90
}
};
let {name, age, scores: {math, chinese = 70}} = obj;
console.log(name, age, math, chinese); // Alice 18 80 70
在上面的例子中，对象中的属性score是一个对象，通过使用scores: {math, chinese = 70}的写法，将score中的属性math赋值给了变量math，而chinese设置了默认值70，如果对象中不存在属性chinese，那么变量chinese的值将被赋值为70。
六、对象解构赋值默认值
解构赋值中可以设置变量的默认值，如果解构的属性的值为undefined，那么将使用默认值。
let obj = {a: 1, c: 3};
let {a, b = 2, c} = obj;
console.log(a, b, c); // 1 2 3
在上面的例子中，对象中的属性b是不存在的，通过设置b的默认值为2，如果对象中不存在属性b，那么变量b的值将被赋值为2。
七、解构赋值避免了临时变量或对象选取
解构赋值可以很方便地获取数组和对象中需要的部分数据，避免了使用临时变量或对象属性选取的操作。
let arr = [1, 2, 3];
let [,,c] = arr;
console.log(c); // 3
let obj = {name: 'Jack', age: 18};
let {name} = obj;
console.log(name); // Jack
在上面的例子中，数组中通过解构赋值获取了变量c的值，对象中通过解构赋值获取了变量name的值。
原创文章，作者：GCXX，如若转载，请注明出处：https://www.506064.com/n/138410.html
微信扫一扫 
支付宝扫一扫 