庞凤仪四个例子助你理解扩展运算符-好程序员
庞凤仪四个例子助你理解扩展运算符-好程序员
庞凤仪
通过四个例子我们来理解扩展运算符.
如何理解它? 它就像鸟儿伸展他的翅膀..( 图片来自 unsplash)
它看起来像什么 三个点: ...
它能做什么? 它允许一个表达式拓展成多个标记/变量/参数。
废话少说，让我们通过一些例子来理解到底什么是扩展运算符。
创建一个数组middle
再创建一个数组把middle包含进去
打印出结果
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数组中。
扫码关注我们，有课有资料