本文是将ES6中关于( ... ) 运算符小结,参考下面文章。
ES6重点复习资料: juejin.cn/post/684490…
ES6中提供的这个运算符可以简便的进行数据的合并和拆解。其实,不能称为 三点运算符.
1. 使用方法一:在函数的传参数过程。作用将剩余的参数放入一个数组中。合并rest
参数形式为(...变量名
),其值为一个数组,用于获取函数多余参数。
function f(a,...arr){
console.log(arr);
}
f(1,2,3,4,4); //[2,3,4,5]
rest
参数只能放在最后一个,否则报错:
function f(a, ...b, c){...}; // 报错
2.使用方法二:数组中的拓展运算 拆解
拓展运算符使用(...
),类似rest
参数的逆运算,将数组转为用(,
)分隔的参数序列。
console.log(...[1, 2, 3]); // 1 2 3
console.log(1, ...[2,3], 4); // 1 2 3 4
拓展运算符主要使用在函数调用。
function f (a, b){
console.log(a, b);
}
f(...[1, 2]); // 1 2
function g (a, b, c, d, e){
console.log(a, b, c, d, e);
}
g(0, ...[1, 2], 3, ...[4]); // 0 1 2 3 4
若拓展运算符后面是个空数组,则不产生效果。
[...[], 1]; // [1]
替代apply方法
// ES6之前
function f(a, b, c){...};
var a = [1, 2, 3];
f.apply(null, a);
// ES6之后
function f(a, b, c){...};
let a = [1, 2, 3];
f(...a);
// ES6之前
Math.max.apply(null, [3,2,6]);
// ES6之后
Math.max(...[3,2,6]);
拓展运算符的运用
- (1)复制数组:
通常我们直接复制数组时,只是浅拷贝,如果要实现深拷贝,可以使用拓展运算符。
// 通常情况 浅拷贝
let a1 = [1, 2];
let a2 = a1;
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]
// 拓展运算符 深拷贝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 作用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]
- (2)合并数组:
注意,这里合并数组,只是浅拷贝。
let a1 = [1,2];
let a2 = [3];
let a3 = [4,5];
// ES5
let a4 = a1.concat(a2, a3);
// ES6
let a5 = [...a1, ...a2, ...a3];
a4[0] === a1[0]; // true
a5[0] === a1[0]; // true
- (3)与解构赋值结合:
与解构赋值结合生成数组,但是使用拓展运算符需要放到参数最后一个,否则报错。
let [a, ...b] = [1, 2, 3, 4];
// a => 1 b => [2,3,4]
let [a, ...b] = [];
// a => undefined b => []
let [a, ...b] = ["abc"];
// a => "abc" b => []