JavaScript扩展（三点）运算符

JavaScript es6中推出了扩展运算符（spread），表现形式是3个点：… ，那么它有什么作用呢？

1. 在函数声明中，表示不定参数。

参考如下代码：

function foo(...nums) {
	console.log(nums);
}
foo(1, 2); // [1, 2]
foo(1, 2, 3); // [1, 2, 3]

其中，nums就是表示传入的参数，然后包装成数组。

当然也可以有固定参数，然后不定参数可以这么写：

function foo(num, ...nums) {
	console.log(num);
	console.log(nums);
}
// 1 对应到 num，2 对应到 nums
foo(1, 2); 
// 1
// [2]

// 1 对应到 num，2,3 对应到 nums
foo(1, 2, 3); 
// 1
// [2, 3]

2. 转换数组为独立元素

请看下面代码：

// 这个输出是数组
console.log([1, 2, 3]); // [1, 2, 3]

// 这个输出是数组内的元素
console.log(...[1, 2, 3]); // 1 2 3

根据这个特性，可以很方便的合并数组：

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

使用push的方式会改变arr1本身，可以使用如下方式，就不会改变了。

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

let arr3 = [...arr1, ...arr2]; // 新数组
console.log(arr3); // [1, 2, 3, 4, 5]

获取数组最大值：

let arr = [3, 5, 1];
console.log(Math.max(arr)); // NaN
console.log(Math.max(...arr)); // 5

3. 将字符串装换为数组

let str = "hello";
console.log([...str]); // ["h", "e", "l", "l", "o"]

4. 对象合并

let object1 = {
	id: 1,
	name: "happy"
}
let object2 = {
	...object1, // object1的属性赋值给object2
	age: 18
}
console.log(object2); // {id: 1, name: 'happy', age: 18}

转载请注明：快乐编程 » JavaScript扩展（三点）运算符