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)
相关文章
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-函数的返回值
关于JavaScript函数返回值的基础知识。
20 9
JavaScript基础知识-函数的返回值
|
2天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
16 4
JavaScript基础知识-函数的参数
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-立即执行函数
关于JavaScript基础知识中立即执行函数的介绍。
16 2
JavaScript基础知识-立即执行函数
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
24 1
JavaScript基础知识-枚举对象中的属性
|
8天前
|
JavaScript 前端开发
JavaScript Boolean(布尔) 对象
Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false)。
26 8
|
15天前
|
JavaScript 前端开发
JavaScript 函数
JavaScript 函数
21 9
|
16天前
|
JavaScript 前端开发
前端JS函数
【9月更文挑战第4天】前端JS函数
21 6
|
12天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
9 1
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-对象的基本操作
关于JavaScript对象基本操作的基础知识文章。
27 2