JS对象解构详解

一、基本语法

JS对象解构是指通过解构语法将一个对象中的属性赋值到一个或多个变量中，其基本语法如下：


let { prop1, prop2 } = object;

其中的{}表示解构语法，prop1和prop2为目标变量，object为源对象。该语句可将object中的prop1和prop2属性的值分别赋值给prop1和prop2变量。

若想显式定义目标变量，可使用如下语法：


let { prop1: var1, prop2: var2 } = object;

其中prop1和prop2为源对象中的属性，var1和var2为目标变量。该语句将object.prop1的值赋值给var1变量，将object.prop2的值赋值给var2变量。

二、默认值

当源对象中不存在某个属性时，解构语句的执行结果会是undefined。可以使用默认值来为变量设置默认值。


let { prop1 = value1 } = object;

上述语句中，若源对象object中不存在prop1属性，则变量prop1会被赋值为value1。

三、嵌套解构

JS对象解构支持嵌套解构，即通过一个解构语句依次访问并解构源对象中的嵌套属性。


let { prop1: { nestedProp1, nestedProp2 } } = object;

该语句将源对象中prop1属性的值解构，并将其嵌套属性nestedProp1和nestedProp2的值分别赋值给目标变量nestedProp1和nestedProp2。

四、解构数组中的对象

JS数组中也可以存放对象，当需要访问数组中的对象属性时，可以使用解构语法。


let [{ prop1 }, { prop2 }] = array;

该语句将数组array中的第一个元素的prop1属性的值赋值给目标变量prop1，将数组中的第二个元素的prop2属性的值赋值给目标变量prop2。若源数组的元素不是对象，或对象中不存在对应的属性，则变量值会是undefined。

五、避免出现崩溃

在一些情况下，源对象可能不存在或未被定义，此时尝试对其进行解构操作会产生异常。为了避免出现程序崩溃，可以使用安全操作符?，及默认值。


let { prop1: { nestedProp1 = defaultValue } } = object?.prop1 || {};

该语句尝试访问源对象中的prop1属性，若源对象不存在或未定义，则采用空对象{}进行解构操作，并将nestedProp1的默认值设置为defaultValue。

六、应用场景

JS对象解构经常用于函数的参数解构、快捷变量赋值、读取JSON数据等场景中。


// 函数参数解构
function set({ prop1, prop2 }) {
   // ...
}
set({ prop1: value1, prop2: value2 });

// 快捷变量赋值
let { length, [length - 1]: last } = array;
console.log(`数组长度：${length}，最后一个元素：${last}`);

// 读取JSON数据
let jsonData = '{"name": "Tom", "age": 18}';
let { name, age } = JSON.parse(jsonData);
console.log(`名字：${name}，年龄：${age}`);

除此之外，JS对象解构还可以用于将一组属性集合复制到另一个对象中，或对源对象进行逐层赋值。