【JavaScript】什么是扩展运算符？

缪宇
829 阅读3分钟

通过四个例子我们来理解扩展运算符.

如何理解它? 它就像鸟儿伸展他的翅膀..（ 图片来自 unsplash）

它看起来像什么？ 三个点: ...

它能做什么? 它允许一个表达式拓展成多个标记/变量/参数。

废话少说，让我们通过一些例子来理解到底什么是扩展运算符。

  1. 创建一个数组 middle

  2. 再创建一个数组把middle包含进去

  3. 打印出结果

var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];
console.log(arr);
// [1, 2, [3, 4], 5, 6]

上面的代码，我们没有使用扩展运算符。展示了，一个数组包含另一个数组。

上面代码没有问题，但是我们只想要一个数组呢？

那我们就可以使用扩展运算符了，再提一句，扩展运算符允许数组中的元素分解出来。来看看下面的代码，除了我们使用了扩展运算符，和上面的代码几乎一样。

var middle = [3, 4];
var arr = [1, 2, ...middle, 5, 6];
console.log(arr);
// [1, 2, 3, 4, 5, 6]

上面的代码展示了扩展运算符使用的关键，正如你所看到的，当我们创造了arr数组，对middle数据使用了扩展运算符， middle数组被分解了，里面的每一个元素都插入到了arr数组中。这意味它不再是嵌套数组，而是变成了包含1到6的普通数组。

复制数组

slice()是JS数组的一个方法，它可以复制数组，类似的方法，我们可以使用扩展运算符来复制数组：

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
// ['a', 'b', 'c']

arr数组被分解成单个字母，然后被分配给arr2数组。现在我们对arr2数组做任何改变都不会影响arr源数组。

具体原因是我们让arr2的值等于arr,而不是等于arr本身。为了让这个说法更有说服力，我们试试不用扩展运算符。

如果我们仅仅是创建一个数组然后让另外一个数组等于它，那么代码看起来是这样的：

var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
// ['a', 'b', 'c']

现在，你可能会说，它看起来和上面的效果一样！

它们看起来一样，但是本质是不一样的。arr直接赋值给arr2，这意味着，对arr2的任何操作将影响arr源数组。

arr2.push('d');
console.log(arr2);
// ['a', 'b', 'c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd']

正如你所看到的，即使我们没有明确的将新的值加入到源arr中，我们的新值d仍然加入到了arr数组中。

连接数组

我们可以使用扩展运算符替代concat()来连接数组。首先，我们来看看concat()方法是如何实现的。

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

**arr1 = arr.concat(arr2);**
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

使用扩展运算符：

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
**arr = [...arr, ...arr2];**
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

完全相同的结果！每一个数组被分解然后加入到一个新的arr数组。

Math

我们也可以在使用math函数时结合扩展运算符。我们来举个例子。

Math.max()会返回一堆数字中最大的数。

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

如果不使用扩展运算符，最简单的方式是使用.apply()，将一个数组作为参数传入Math.max()

var arr = [2, 4, 8, 6, 0];
function max(arr) {
  return Math.max.apply(null, arr);
}
console.log(max(arr));
// 8

这样做很麻烦。

现在来看一下我们如何使用扩展运算符来得到相同的结果的。我们只需要两行代码：

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
// 8

字符串转换数组

使用扩展运算符将字符串转换成数组。

var str = "hello";
var chars = [...str];
console.log(chars); 
// ['h', 'e',' l',' l', 'o']

很酷吧！扩展运算符遍历str字符串中的每个字符，然后分配到新的chars数组中。

感谢阅读！

原文：codeburst.io/javascript-…

avatar
文章
阅读
粉丝