JavaScript 解构赋值 | 微信小程序函数参数传对象解构

简介: 解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。这种语法是 ECMAscript 6 规范引入了一种新语法,可以更轻松地从数组和对象中获取值。提取数据先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始。const product = { id: 1, title: "Nike Air Zoom Pegasus 38", product_image: "/resources/products/01.jpeg", shown: "White/Pure Pla

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

  1. 提取数据

先来看看如何在 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 等框架时,有很多解构赋值的地方,如方法的引入等等。

  1. 别名取值

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

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
  1. 动态属性

可以使用动态名称提取到变量属性(属性名称在运行时已知):

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 的值也跟随变化。

  1. 对象解构中的 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 ]
  1. 默认值

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

• 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)
• }

微信小程序官方文档dataset用法

函数参数对象解构

• <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)
相关文章
|
1月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
43 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
44 7
|
1月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
48 4
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
22 2
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
30 5
|
2月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
26 3
|
2月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
22 3