miaoyu

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

miaoyu · 2017-05-31翻译 · 596阅读 原文链接

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

如何理解它? 它就像鸟儿伸展他的翅膀..( 图片来自 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数组中。

相关文章