JavaScript解构赋值的方法有哪些
导读:本文共2892字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:1. 提取数据先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始。constproduct={id:1,title:"NikeAirZoomPegasus38",product_image:"/resources/products/01.jpeg",shown:"White/PurePlatinum/Midn... ...
目录
(为您整理了一些要点),点击可以直达。先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始。
这样,就可以通过以下方式访问相应的属性:
解构,能够让代码更加清晰简洁。如果需要解构一个更复杂的对象呢?即对象中的对象。
现在假设需要从商品列表数据中获取其中一个商品的属性,如下:
在这里,产品列表嵌套了几层,需要访问商品的信息,可以解构尽可能多的级别以获取商品对象的属性。
上面的代码仅用于展示其用法,项目开发中不建议再数组中这样获取对象信息。
通常,数据列表不一定非要数组,从获取效率来说,map 对象的访问比数组效率要高。可以将上面的数据改为 map 对象,如下:
在 JavaScript 中,数据可以是变量和方法,因此解构赋值也适合用在函数参数的定义,如下:
在使用 React 或 Vue 等框架时,有很多解构赋值的地方,如方法的引入等等。
如果想创建与属性名称不同的变量,那么可以使用对象解构的别名功能。
identifier 是要访问的属性的名称,aliasIdentifier 是变量名称。具体用法如下:
console.log(productPrice);//275
3. 动态属性
可以使用动态名称提取到变量属性(属性名称在运行时已知):
propName 表达式应计算为属性名称(通常是字符串),标识符应指示解构后创建的变量名称,用法如下:
上面代码中,可以通过更新 productKey 的值进而使得 product 的值也跟随变化。
将 rest 语法添加到解构中,Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键。
解构后,变量标识符包含属性值。 rest 变量是一个具有其余属性的普通对象。
对于数组,可以通过 Rest 的实现首尾值的获取:
正如前面介绍的那样可以在解构数组时为其分配默认值:
这样,可以将确保在 B、A 未定义的情况下有一个默认值。
JavaScript解构赋值的方法有哪些的详细内容,希望对您有所帮助,信息来源于网络。