前言

解构赋值语法是一种 JavaScript 表达式，通过解构赋值, 可以将属性/值从对象/数组中取出，赋值给其他变量。这种语法是 ECMAscript 6 规范引入了一种新语法，可以更轻松地从数组和对象中获取值。这一章主要跟大家聊一聊js解构赋值的常见场景和实例。

提取变量

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

const product = {    id: 1,    title: "Nike Air Zoom Pegasus 38",    product_image: "/resources/products/01.jpeg",    shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",    price: 120,};const { id, price, title } = product;console.log(id); // 1console.log(price); // 120console.log(title); // Nike Air Zoom Pegasus 38

通过这样的方式就可以访问到相应的属性值。

复杂对象结构

解构能够让代码更加清晰简洁。如果需要解构一个更复杂的对象又该如何做呢？也就是取出对象中对象的属性值。

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

const products = [    {        id: 1,        title: "Nike Air Zoom Pegasus 38",        price: 120,    },    {        id: 2,        title: "Nike Air Zoom Alphafly NEXT%",        price: 275,    },    {        id: 3,        title: "Nike Zoom Fly 4",        price: 89.0,    },];

在这个数组对象中，产品列表嵌套了几层，需要访问商品的信息，可以解构尽可能多的级别以获取商品对象的属性。但是在实际项目开发中不建议在数组中这样获取对象信息，这样代码可读性非常差。

const [tmp, { id, title, price }] = products;console.log(id); // 2console.log(title); // Nike Air Zoom Alphafly NEXT%console.log(price); // 275

在实际项目开发中，数据列表不一定非要是数组结构，从查找效率上来说，map 对象的访问比数组效率要高。可以将上面的数据改为 map 对象，如下：

const products = {    1: {        title: "Nike Air Zoom Pegasus 38",        price: 120,    },    2: {        title: "Nike Air Zoom Alphafly NEXT%",        price: 275,    },    3: {        title: "Nike Zoom Fly 4",        price: 89.0,    },};const {    2: { id, title, price },} = products;console.log(id); // 2console.log(title); // Nike Air Zoom Alphafly NEXT%console.log(price); // 275

这样我们就可以通过 const {第一层对象key:{第二次对象的key}} = products 的方式获取到内层对象的属性值了。

方法形参解构

结构的数据可以是变量也可以是方法，解构赋值也适合用在函数参数的定义。

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

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

const { identifier: aliasIdentifier } = expression;

identifier 是要访问的属性的名称，aliasIdentifier 是变量名称。

const products = {    1: {        title: "Nike Air Zoom Pegasus 38",        price: 120,    },    2: {        title: "Nike Air Zoom Alphafly NEXT%",        price: 275,    },    3: {        title: "Nike Zoom Fly 4",        price: 89.0,    },};const {    2: { price: productPrice },} = products;console.log(productPrice); // 275

当结构的的对象key是一个变量时，可以使用动态名称提取到变量属性。

const { [propName]: identifier } = expression;

propName 表达式应计算为属性名称，标识符应指示解构后创建的变量名称。

const products = {    1: {        title: "Nike Air Zoom Pegasus 38",        price: 120,    },    2: {        title: "Nike Air Zoom Alphafly NEXT%",        price: 275,    },    3: {        title: "Nike Zoom Fly 4",        price: 89.0,    },};const productKey = "1";const { [productKey]: product } = products;console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }

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

剩余参数Rest

Rest 属性可以收集那些尚未被解构模式的剩余可枚举属性键。

const { identifier, ...rest } = expression;

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

const product = {    title: "Nike Air Zoom Pegasus 38",    price: 120,    quantity: 5,    category_id: 1,    reviews: 9830,    total: 45,};const { title, ...others } = product;console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }

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

const numbers = [1, 2, 3];const [head, ...tail] = numbers;console.log(head); // 1console.log(tail); // [ 2, 3 ]

我们还可以在解构数组时为其分配默认值，这样，可以将确保在空值的情况下有一个默认值。

const RGBA = [255, 34];const [R, G, B = 0, A = 1] = RGBA;console.log(R); // 255console.log(G); // 34console.log(B); // 0console.log(A); // 1