ES6中的三点运算符(...)方法

本文是将ES6中关于（ ... ) 运算符小结，参考下面文章。

ES6重点复习资料: juejin.im/post/5c02b1…

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 => []复制代码

转载于:https://juejin.im/post/5cb976df51882532a3768b35