扩展运算符的 5 种用途

复制数组

连接数组

将参数作为数组传递

复制对象

合并对象

奖金——一个错误！

就是这样！

扩展运算符是 JavaScript 开发者的最爱。它是一种功能强大的语法，有着广泛的应用。

事实上，扩展运算符的种类繁多，以至于很难全部记住。在本文中，我们将回顾扩展运算符最常见的 5 种用法。

复制数组

这是扩展运算符最常见的用法之一。获取一个数组的内容并将其“展开”以填充另一个数组。

let arr = [1,2,3,4]
let copy = [...arr]
// copy is [ 1, 2, 3, 4 ]

从不同的角度来看，扩展运算符选择arr数组内的每个单独元素，并将每个元素放置在一个新的数组结构中。

请注意，这与将一个数组放入另一个数组中不同。

let arr = [1,2,3,4]
let copy = [arr]
// copy is [ [1, 2, 3, 4] ]

该选项为您提供了一个多维数组。

连接数组

基于前面的示例，我们可以将多个数组分散到一个新的数组中，一个接一个。

let arr1 = [1,2,3,4]
let arr2 = [5,6,7,8]
let concat = [...arr1, ...arr2]
// concat is [ 1, 2, 3, 4, 5, 6, 7, 8 ]

如果我们像前面的例子那样将其分解，扩展运算符将提取初始数组中的每个元素并将其放置在新数组中。

将参数作为数组传递

这就是展开运算符开始展现其多功能性的地方。在这个例子中，我们将三个参数传递给一个函数。展开运算符用在一个包含三个元素的数组前面。

function dev(x, y, z) { }

var args = [0, 1, 2]

dev(...args) // call function

理解这一点的一个好方法是回顾我们之前的例子。如果我们对一个数组使用展开运算符，并且没有将它放入一个新数组中，会发生什么？

数组中的每个元素都将独立存在。这就是中间转换。每个元素都是独立的，并且尚未被放入新的数据结构中。因此，所有三个元素都可以作为参数分别传递给函数。

复制对象

扩展运算符不仅可以用于数组，还可以用于对象。就像之前复制数组一样，我们也可以复制对象。

let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// copy is {a: 1, b: 2, c: 3}

在此示例中，扩展运算符从中提取每个键值对obj并将它们放置在一个新对象中copy。

就像数组示例一样，值得注意的是，这与将一个对象放入另一个对象中不同。

let obj = {a: 1, b: 2, c: 3}
let copy = {obj}
// copy is { {a: 1, b: 2, c: 3} }

合并对象

我们还可以使用扩展运算符将两个对象合并在一起。

let obj1 = {a: 1, b: 2, c: 3}
let obj2 = {d: 4, e: 5, f: 6}

let merge = {...obj1, ...obj2}
// merge is {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

再次，我们从初始对象中提取所有键值对并将它们放置在新的对象数据结构中。

奖金——一个错误！

尽管扩展运算符适用于数组和对象，但不能混合搭配这些数据类型。

let obj = {a:1, b:2, c:3}
let copy = [...obj] // this won't work!

如果我们仔细想想，这是有道理的，因为当处理数组时，扩展运算符处理的是元素，而对于对象来说，它是键值对。

就是这样！

扩展运算符的用法非常丰富，但这还不是全部。如果您需要完整的用法，请查看Mozilla 文档。

如果您对其他可以帮助您编写干净代码的 JavaScript 语法感兴趣，请查看这些文章！

解构赋值的 3 个有力示例

劳里·19年6月11日

#javascript #webdev #生产力 #beginners

出口、进口和违约，天哪！

劳里·19年4月29日

#javascript #react #webdev #beginners

Object.fromEntries 介绍

劳里·19年7月2日

#javascript #webdev #学习 #生产力