JS中三个点(...)用法

三个点(...)真名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;还可以在构造字面量对象时将对象表达式按照key-value的方式展开。

字面量一般指[1,2,3]{data:'monkey'}这种简洁的构造方式,多层嵌套的数组和对象三个点就无能为力了。

1
2
var a = [1,2,3];
...a; // 1 2 3

常见使用场景

替代apply方法

返回数据中所有元素之和,ES5用法:

1
2
3
4
5
6
7
function addFun(x, y, z) {
return x + y + z;
}

var args = [1, 2, 3];
// apply方法直接传递数组
addFun.apply(null, args);

ES6使用扩展运算符:

1
2
3
4
5
6
function addFun(x, y, z) {
return x + y + z;
}

var args = [1, 2, 3];
addFun(...args);

函数形参的剩余参数(rest运算符)

扩展运算符是把数组或对象进行展开,而剩余运算符是把多个元素合并起来。主要用于不定参数,可以理解为arguments的替代品,因此ES6开始不再使用arguments对象。

1
2
3
4
5
6
7
8
let demoFun = function(argA, ...args) {
console.log(argA);
console.log(args)
}

demoFun(1, 2, 3);
// 1
// [2, 3]
1
2
3
4
5
var [a, ...rest] = [1, 2, 3, 4];

// 这里把...rest整体看成一个元素
console.log(a) // 1
console.log(...rest) // [2, 3, 4]

数组连接

1
2
3
4
5
6
7
8
9
10
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

// ES5处理方式
Array.prototype.push.apply(arr1, arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]

// ES6处理方式
arr1.push(...arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]

数组合并

1
2
3
4
5
6
7
8
9
10
var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

// ES5 合并
var es5Arr = arr1.concat(arr2);
console.log(es5Arr) // ['a', 'b', 'c', 'd', 'e', 'f']

// ES6 合并
var es6Arr = [...arr1, ...arr2];
console.log(es6Arr) // ['a', 'b', 'c', 'd', 'e', 'f']

数组/对象的拷贝

扩展运算符拷贝是浅拷贝,只对数组或对象的第一层结构起作用。

数组拷贝:

1
2
3
4
5
6
7
8
9
var arr1 = [1, 2, 3];
var arr2 = [...arr1];

console.log(arr1 === arr2) // false

arr2.push(4); // 修改arr2,不会影响arr1的值

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

对象拷贝:

1
2
3
4
5
6
7
8
9
10
11
12
var obj1 = {
a: 1,
b: 2
};

var obj2 = {...obj1};

console.log(obj1 === obj2); // false

obj2.c = 3; // 修改obj2不会影响obj1
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: 2, c: 3}

字符串转数组

1
2
3
4
5
6
7
8
9
var str = 'hello';

// ES5 处理方式
var es5Arr = str.split('');
console.log(es5Arr) // ["h", "e", "l", "l", "o"]

// ES6 处理方式
var es6Arr = [...str];
console.log(es6Arr) // ["h", "e", "l", "l", "o"]

总结

  • 三点放在形参或者等号左边为rest运算符、放在实参或者等号右边为spread运算符。
  • 三点放在被赋值一方为rest运算符,放在赋值一方为扩展运算符。

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道