es6中的扩展运算符

发表于 | 更新于 | 评论数： | 阅读次数：

对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

1.使用方法一：在函数的传参数过程。作用将剩余的参数放入一个数组中。合并
rest参数形式为（…变量名），其值为一个数组，用于获取函数多余参数。

1
2
3
4
5
6
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参数的逆运算，将数组转为用(,)分隔的参数序列。

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

拓展运算符主要使用在函数调用。

1
2
3
4
5
6
7
8
9
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]; // [1]

替代apply方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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)复制数组：
通常我们直接复制数组时，只是浅拷贝，如果要实现深拷贝，可以使用拓展运算符。

1
2
3
4
5
6
7
8
9
10
11
12
// 通常情况 浅拷贝
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)合并数组： 注意，这里合并数组，只是浅拷贝。

1
2
3
4
5
6
7
8
9
10
11
12
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)与解构赋值结合：
与解构赋值结合生成数组，但是使用拓展运算符需要放到参数最后一个，否则报错。

1
2
3
4
5
6
7
8
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 => []

扩展运算符可以将字符串转为真正的数组

1
[...'hello']   // [ "h", "e", "l", "l", "o" ]

将数据结构转为数组

1
2
3
4
// arguments对象
function foo() {
  const args = [...arguments];
}

用于替换es5中的Array.prototype.slice.call(arguments)写法