ES6 展开运算符 Spread operator

时间：2022-11-21 17:48:17

展开运算符

展开运算符（spread）是三个点（…）,可以将数组转为用逗号分隔的参数序列。如同rest参数的逆运算。

语法

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

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

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>...]

用于数组字面量：

[...iterableObj, 4, 5, 6]

用于函数调用：

myFunction(...iterableObj);

展开运算符主要用于函数调用，如下：

function func(x, y, z, a, b) {
    console.log(x, y, z, a, b);
}

var args = [1, 2];
func(0, ...args, 3, ...[4]);
// 0 1 2 3 4

注意：任何实现了Iterator接口的对象，都可以用展开运算符转为真正的数组。

用法

  1. 替换apply方法

展开运算符可以展开数组，因此可以替换apply方法，将数组转为函数的参数。

function func(x, y, z) { }
var args = [0, 1, 2];

// ES5写法
func.apply(null, args);

// ES6写法
func(...args);
  1. 更强大的数组字面量操作

如果由一个已知数组创建一个新数组，数组字面量语法则不足以达到目的，必须结合push, splice, concat等方法。而展开运算符可以轻松实现这个目标：

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

展开运算符可以用于任何数组字面量，并可以多次使用。

  1. 适用new

JS的函数只能返回一个值，如果返回多个值就需要用到数组或对象。展开运算符提供了一种处理这种返回值的有效方法

  1. 替换push方法

push方法常用于将一个数组加入到另一个数组的结尾。在ES5中是这样做的：

var arr1 = [0, 1, 2], arr2 = [3, 4, 5];
// Append all items in arr2 onto arr1
Array.prototype.push.apply(arr1, arr2);

push方法的参数不能是数组，所以只好通过apply方法变通使用push方法。有了展开运算符，就可以像下面直接将数组传入push方法。

var arr1 = [0, 1, 2], arr2 = [3, 4, 5];
arr1.push(...arr2);
arr1 // [0, 1, 2, 3, 4, 5]

上面可以将返回的数组使用展开运算直接传入构造函数。

  1. 只用于可迭代的变量

下面的用法就会报错：

var obj = {key1: 'value1'};
var args = [...obj]; // 报错

function func(x) {
    console.log(x);
}
func(...obj); // 报错
标签：

相关文章