解构赋值语法是一种 JavaScript 表达式，通过解构赋值, 可以将属性/值从对象/数组中取出，赋值给其他变量。这种语法是 ECMAscript 6 规范引入了一种新语法，可以更轻松地从数组和对象中获取值。
- 提取数据
先来看看如何在 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); // 1 • console.log(price); // 120 • console.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); // 2 • console.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); // 2 • console.log(title); // Nike Air Zoom Alphafly NEXT% • console.log(price); // 275
在 JavaScript 中，数据可以是变量和方法，因此解构赋值也适合用在函数参数的定义，如下：
• const printArticle = ({ title, remark }) => { • console.log(title); • console.log(remark); • }; • printArticle({ • title: "JavaScript 解构赋值", • remark: "解构赋值的实用场景介绍", • });
在使用 React 或 Vue 等框架时，有很多解构赋值的地方，如方法的引入等等。
- 别名取值
如果想创建与属性名称不同的变量，那么可以使用对象解构的别名功能。
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
- 动态属性
可以使用动态名称提取到变量属性（属性名称在运行时已知）：
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 语法添加到解构中，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); // 1 • console.log(tail); // [ 2, 3 ]
- 默认值
正如前面介绍的那样可以在解构数组时为其分配默认值：
• const RGBA = [255, 34]; • const [R, G, B = 0, A = 1] = RGBA; • console.log(R); // 255 • console.log(G); // 34 • console.log(B); // 0 • console.log(A); // 1
这样，可以将确保在 B、A 未定义的情况下有一个默认值。
总结 解构是一个非常实用的特性，前端培训它被添加到了 JavaScript 的 ES6 版本中了。通过解构，可以快速方便地从对象和数组中提取属性或数据到单独的变量中。它适用于嵌套对象，可以使用 ... 运算符为数组分配赋值。
作者：尚硅谷
链接：https://juejin.cn/post/7037314654065917983
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
微信小程序实参传对象解构
传统方式使用dataset
• <button bind:tap="sayHello" data-content="My name is SayHello">button</button> • • sayHello(e){ • let content = e.target.dataset.content; • console.log(content) • }
函数参数对象解构
• <button bind:tap="sayHello" data-content="My name is SayHello">button</button> • • sayHello({ currentTarget: { dataset: { content } } }){ • console.log(content) • }
还没看懂的话 就这样看
• let myObj = { • currentTarget: { • dataset: { • content: "My name is SayHello" • } • } • } • const { currentTarget: { dataset: { content } } } = myObj • console.log(content)
