前言

解构赋值语法是一种 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 等框架时,有很多解构赋值的地方,如方法的引入等等。

2. 别名取值

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

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

3. 动态属性

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

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

4. 对象解构中的 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 ]

5. 默认值

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

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 版本中了。通过解构,可以快速方便地从对象和数组中提取属性或数据到单独的变量中。它适用于嵌套对象,可以使用 ... 运算符为数组分配赋值。

到此这篇关于JavaScript解构赋值的5个常见场景与实例的文章就介绍到这了,更多相关JS解构赋值实例内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

JavaScript解构赋值的5个常见场景与实例教程的更多相关文章

  1. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. iOS >>块>>更改块外部的变量值

    我不是在处理一个Object并改变它,就像我的mString一样.我希望’center’属性的行为类似于myInt,因为它是直接访问的C结构,而不是指向对象的指针.我希望’backgroundColor’的行为类似于我的imstring,因为它是一个指向一个新对象的对象的指针,不是吗?

  4. 寒城攻略:Listo 教你 25 天学会 Swift 语言 - 05 Strings and Characters

    Swift所代表的字符串是字符串类型,进而代表字符类型的值的集合//Swift的String和Character类型提供了一个快速的,兼容Unicode的方式来处理代码中的文本信息。每一个字符值代表一个Unicode字符,我们可以利用for-in循环来遍历字符串中的每一个字符println}//定义一个字符常量letyenSign:Character="$"printlncharacters")//使用"countElements()"函数来获取字符串的长度//8.ConcatenatingStrings

  5. swift 部分运算符

    下面的语句是无效的:ifx=y{println("这一特征可以防止使用相等的运算符(==)时,不小心使用赋值运算符(=)。通过使ifx=y无效,Swift可以帮助你避免代码中出现这些类型的错误")}2.swift中字符串的追加可以使用加法运算leth="hello,"letw="world"println(h+w)//输出hello,world3.范围运算符:闭区间运算符:表示[a,b]例如:forindexin1...5{println//输出1,2,3,4,5}半开区间运算符:表示[a,b)例如for

  6. 二 Swift学习之基本运算符

    二Swift学习之基本运算符————–借鉴老码团队翻译组-Tyrion1.1术语运算符有一元、二元和三元运算符。三元运算符操作三个操作对象,和C语言一样,Swift只有一个三元运算符,就是三目运算符(a?这不同于上面提到的自增和自减运算符。无疑空合运算符(??由于userDefinedColorName是一个可选类型,我们可以使用空合运算符去判断其值。

  7. Swift算术运算符

    ==,返回值为true和false逻辑运算符:!,&,&&,|,||(短路或)位运算符:~,^,>>,

  8. Swift语法基础:11 - Swift的运算术语, 赋值运算, 数值运算, 复合赋值

    在Swift当中当然是有与或非这三个逻辑运算符,并且兼容大部分C类运算符,比如“”,“=”,“==”,“=”,“+”,“-“,“*”,“/”,这些等等都支持,但这里有一点要注意一下,赋值符号“=”不返回值,以防止把“==”写成“=”导致程序出错.区别于C,Swfit还提供对浮点数类型进行取余预算“%”,还提供了C没有提供的区间,“0..

  9. Swift可选类型和可选链

    ),允许接受nil控制则是正常类型强制拆封如果我们能确定可选类型一定有值,那么在读取它的时候,可以在可选类型的后面加一个感叹号(!)println对result1中的语句进行了强制拆封前问号,后感叹号,强制拆封隐式拆封为了能够方便的访问可选类型,可以将可选类型后面的问号改成感叹号(!问号表示引用的时候,如果某个环节为nil,她不会出现错误,而是把nil返回给引用者,这种使用问号引用可选类型的方式叫做可选链三、使用问号?

  10. swift开发基础之变量和常量

    swift开发基础之变量和常量今天学习了一下swift语言感觉IOS又迈出了自己的一步代码上面简化了很多,并可以使用playground一个实时预览的效果注意:常量直接用let就行了如果对上面的常量重新赋值会出现错误不需要制定类型变量直接用var就行了可以多次赋值可以制定类型也可以不制定类型感觉很智能化可以多次重新赋值最后是一个变量叠加的问题只需要加一个\然后将数字括起来就行了playground

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部