JavaScript 扩展运算符

扩展运算符格式
扩展运算符格式很简单，就是三个点(...)

扩展运算符做用？？？
扩展运算符容许一个表达式在指望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展。

下面开始经过四个例子来深入理解扩展运算符

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]复制代码

在上例中，没有使用扩展运算符。middle做为数组放入另外一个数组中。

可是若是想让输出结果只有一个数组？？？

这时候就用到扩展运算符，看下面例子，除了使用扩展运算符其余都与上面例子相同。

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

当建立数组arr和使用在middle数组上使用扩展运算符时，不是将middle数组直接插入到arr中，而是将middle数组扩展，而后将元素插入到arr中。

复制数组

slice()是JavaScript数组的方法，做用是复制数组。咱们一样可使用扩展运算符复制数组。

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

arr数组中的元素扩展成为单独元素被分配到arr2中。如今能够随意改变arr2数组，且都不会对源数组arr产生影响。

这是由于，arr数组值被扩展后添加到arr2数组中，咱们设置arr2等于arr的值，而不是其自己。咱们能够关注没有扩展运算符时发生事情，就能理解了。

若是建立数组而后设置另外一个数组等于其自己，以下：

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

如今咱们将arr2数组赋值给arr数组，这意味着只要改变arr2，arr数组就会发生变化。

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

拼接数组

使用扩展运算符能够代替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']复制代码

Math

也可使用math函数连同扩展运算符。如这个例子中，将使用Math.max()

Math.max()将返回一组数最大值。

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100复制代码

在没有扩展运算符，在数组上使用Math.max()最容易方法就是使用.apply()。

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']复制代码

参考

原文连接

---

欢迎订阅掘金专栏和知乎专栏