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

Dear 丶 2022-10-01 05:58 124阅读 0赞

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

ES6重点复习资料: [juejin.im/post/5c02b1…][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

[juejin.im_post_5c02b1]: https://juejin.im/post/5c02b106f265da61764aa0c1