JavaScript 解构赋值 5 个常见场景和实例

解构赋值语法是一种 JavaScript 表达式，通过解构赋值, 可以将属性/值从对象/数组中取出，赋值给其他变量。这种语法是 ECMAscript 6 规范引入了一种新语法，可以更轻松地从数组和对象中获取值。

1. 提取数据

先来看看如何在 JavaScript 中解构对象，可以从这个商品对象的简单示例开始。

constproduct={id:1,title:"NikeAirZoomPegasus38",product_image:"/resources/products/01.jpeg",shown:"White/PurePlatinum/MidnightNavy/WolfGrey",price:120,};const{id,price,title}=product;

这样，就可以通过以下方式访问相应的属性：

console.log(id);//1console.log(price);//120console.log(title);//NikeAirZoomPegasus38

解构，能够让代码更加清晰简洁。如果需要解构一个更复杂的对象呢？即对象中的对象。

现在假设需要从商品列表数据中获取其中一个商品的属性，如下：

constproducts=[{id:1,title:"NikeAirZoomPegasus38",price:120,},{id:2,title:"NikeAirZoomAlphaflyNEXT%",price:275,},{id:3,title:"NikeZoomFly4",price:89.0,},];

在这里，产品列表嵌套了几层，需要访问商品的信息，可以解构尽可能多的级别以获取商品对象的属性。

const[tmp,{id,title,price}]=products;console.log(id);//2console.log(title);//NikeAirZoomAlphaflyNEXT%console.log(price);//275

上面的代码仅用于展示其用法，项目开发中不建议再数组中这样获取对象信息。

通常，数据列表不一定非要数组，从获取效率来说，map 对象的访问比数组效率要高。可以将上面的数据改为 map 对象，如下：

constproducts={1:{title:"NikeAirZoomPegasus38",price:120,},2:{title:"NikeAirZoomAlphaflyNEXT%",price:275,},3:{title:"NikeZoomFly4",price:89.0,},};const{2:{id,title,price},}=products;console.log(id);//2console.log(title);//NikeAirZoomAlphaflyNEXT%console.log(price);//275

在 JavaScript 中，数据可以是变量和方法，因此解构赋值也适合用在函数参数的定义，如下：

constprintArticle=({title,remark})=>{console.log(title);console.log(remark);};printArticle({title:"JavaScript解构赋值",remark:"解构赋值的实用场景介绍",});

在使用 React 或 Vue 等框架时，有很多解构赋值的地方，如方法的引入等等。

2. 别名取值

如果想创建与属性名称不同的变量，那么可以使用对象解构的别名功能。

const{identifier:aliasIdentifier}=expression;

identifier 是要访问的属性的名称，aliasIdentifier 是变量名称。具体用法如下：

constproducts={1:{title:"NikeAirZoomPegasus38",price:120,},2:{title:"NikeAirZoomAlphaflyNEXT%",price:275,},3:{title:"NikeZoomFly4",price:89.0,},};const{2:{price:productPrice},}=products;console.log(productPrice);//275

3. 动态属性

可以使用动态名称提取到变量属性（属性名称在运行时已知）：

const{[propName]:identifier}=expression;

propName 表达式应计算为属性名称（通常是字符串），标识符应指示解构后创建的变量名称，用法如下：

constproducts={1:{title:"NikeAirZoomPegasus38",price:120,},2:{title:"NikeAirZoomAlphaflyNEXT%",price:275,},3:{title:"NikeZoomFly4",price:89.0,},};constproductKey="1";const{[productKey]:product}=products;console.log(product);//{title:'NikeAirZoomPegasus38',price:120}

上面代码中，可以通过更新 productKey 的值进而使得 product 的值也跟随变化。

4. 对象解构中的 Rest

将 rest 语法添加到解构中，Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键。

console.log(id);//1console.log(price);//120console.log(title);//NikeAirZoomPegasus380

解构后，变量标识符包含属性值。 rest 变量是一个具有其余属性的普通对象。

console.log(id);//1console.log(price);//120console.log(title);//NikeAirZoomPegasus381

对于数组，可以通过 Rest 的实现首尾值的获取：

console.log(id);//1console.log(price);//120console.log(title);//NikeAirZoomPegasus382

5. 默认值

正如前面介绍的那样可以在解构数组时为其分配默认值：

console.log(id);//1console.log(price);//120console.log(title);//NikeAirZoomPegasus383

这样，可以将确保在 B、A 未定义的情况下有一个默认值。

总结

解构是一个非常实用的特性，它被添加到了 JavaScript 的 ES6 版本中了。通过解构，可以快速方便地从对象和数组中提取属性或数据到单独的变量中。它适用于嵌套对象，可以使用... 运算符为数组分配赋值。