ES6 - Spread运算符

扩展(Spread)运算符是 JavaScript ES6 版本中新增函数的新增函数。

Spread运算符 ... 用于扩展或扩展可迭代或数组。例如，

const arrValue = ['My', 'name', 'is', 'Jack'];

console.log(arrValue);  //["My", "name", "is", "Jack"]
console.log(...arrValue);//My name is Jack

在这种情况下，代码:

console.log(...arrValue)

等效于:

console.log('My', 'name', 'is', 'Jack');

复制数组

您还可以使用Spread语法 ... 将项目复制到单个数组中。例如，

const arr1 = ['one', 'two'];
const arr2 = [...arr1, 'three', 'four', 'five'];

console.log(arr2); 
//  Output:
//  ["one", "two", "three", "four", "five"]

克隆数组

在JavaScript中，对象是通过引用而不是值来分配的。例如，

无涯教程网

let arr1 = [ 1, 2, 3];
let arr2 = arr1;

console.log(arr1);//[1, 2, 3]
console.log(arr2);//[1, 2, 3]

// 将一个元素附加到数组
arr1.push(4);

console.log(arr1);//[1, 2, 3, 4]
console.log(arr2);//[1, 2, 3, 4]

在这里，两个变量 arr1 和 arr2 都指向同一数组。因此，一个变量的变化导致两个变量的变化。

但是，如果要复制数组以使它们不引用同一数组，则可以使用spread运算符。这样，一个数组中的更改不会反映在另一个数组中。例如，

let arr1 = [ 1, 2, 3];

// 使用spread语法复制
let arr2 = [...arr1];

console.log(arr1);//[1, 2, 3]
console.log(arr2);//[1, 2, 3]

// 将一个元素附加到数组
arr1.push(4);

console.log(arr1);//[1, 2, 3, 4]
console.log(arr2);//[1, 2, 3]

扩展对象

您还可以将扩展运算符与对象文字一起使用。例如，

const obj1 = { x : 1, y : 2 };
const obj2 = { z : 3 };

// add members obj1 and obj2  to obj3
const obj3 = {...obj1, ...obj2};

console.log(obj3);//{x: 1, y: 2, z: 3}

在这里，使用扩展运算符将obj1和obj2属性都添加到obj3中。

Rest参数

当将扩展运算符用作参数时，它称为rest参数。

您还可以使用rest参数在函数调用中接受多个参数。例如，

let func = function(...args) {
    console.log(args);
}

func(3);//[3]
func(4, 5, 6);//[4, 5, 6]

这里，

• 将单个参数传递给func()函数时，rest参数仅采用一个参数。
• 传递了三个参数后，rest参数将使用所有三个参数。

注意:使用rest参数会将参数作为数组元素传递。

您还可以使用传播运算符将多个参数传递给函数。例如，

function sum(x, y ,z) {
    console.log(x + y + z);
}

const num1 = [1, 3, 4, 5];

sum(...num1);//8

如果使用传播运算符传递多个参数，则该函数将使用必需的参数，而忽略其余参数。