对象展开运算符在 JavaScript 中的 5 大应用

Image Created with ❤️️ By Mehdi Aoussiad.

简介

对象展开运算符是最近 JavaScript 添加的一个很重要也颇有用的新功能。对象展开运算符可以将一个可迭代的 JavaScript 的对象的值进行展开与扩展,它也能够在须要多重参数的时候让咱们可以把数组和其余的表达式进行扩展。在多种状况下,对象展开运算符对于以简单的方式编写更好且干净的JavaScript代码很是有用。javascript

在这篇简短的文章中,咱们将探讨JavaScript中对象展开运算符 {…} 的一些用例。前端

1. 合并两个对象

咱们能够在 JavaScript 中使用对象展开运算符来合并两个对象,看一看下面这个例子:java

let employee = { name:'Jhon',lastname:'Doe'};
const salary = { grade: 'A', basic: '$3000' };
const summary = {...employee, ...salary};
console.log(summary);
// Prints: {name: "Jhon", lastname: "Doe", grade: "A", basic: "$3000"}
复制代码

这里的 employeesalary 对象被合并成了一个,并生成了一个包含了原来两个对象的键值对的新对象。android

2. 合并数组

对象展开运算符的另外一个优势是能够合并数组,或在一个数组的任意索引处插入另外一个数组的全部元素。ios

对象展开的语法使得下面的操做变得异常的简单:git

let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];

let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];
// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']
复制代码

经过使用对象展开运算符 {…} ,咱们就能很容易的获得想要的数组。若是使用传统的方法,那么步骤将会变得更加的冗长与复杂。github

3. 使用对象展开运算符复制数组

咱们也可使用对象展开运算符在 JavaScript 中将一个数组的内容复制到另一个数组中。看一看下面的这个例子:后端

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;
arr2 = [...arr1];
console.log(arr2); // Prints:[ 'JAN', 'FEB', 'MAR', 'APR', 'MAY' ]
复制代码

如你所见,咱们使用对象展开运算符将 arr1 的所有元素都复制到了另外的一个数组 arr2 中。数组

4. 计算数组中的最大值

下面的一段 ES5 代码使用 apply() 来计算获得了数组中的最大值:markdown

var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr); // returns 89
复制代码

使用对象展开运算符让这一段代码更易读且更容易维护。看一下下面这个例子:

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // returns 89
复制代码

...arr 返回了一个数组元素的集合,也就是说它展开了这个数组。

5. 将字符串转换成数组

咱们可使用对象展开运算符在 JavScript 中将一个英文单词(字符串)分割成数组,下面的例子展现了它是如何将一个英文单词转化成字母组成的数组的:

const string = 'word';
const arr = [...string];
console.log(arr); // Prints: ["w", "o", "r", "d"]
复制代码

有不少方法来实现这个功能,可是使用对象展开运算符,更容易写出干净的 JavaScript 代码。

结论

对象展开运算符是 JavaScript 中一种颇有用的功能。它使用起来很方便,而且可以保持代码的整洁度,便于维护。

感谢阅读这篇文章,但愿对您有所帮助。

若是发现译文存在错误或其余须要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

相关文章
相关标签/搜索