es6扩展运算符三个点（...）的多种常用使用途径

小咪咪 2023-03-03 11:11 18阅读 0赞

**目录**

函数调用中替代数组的 apply 方法

代替数组方法的复用

1.代替Arrary.push()【数组末尾追加】

2.代替Array.unshift 【数组头新增元素】

3.代替Arrary.concat()【合并数组】

4.代替Arrary.split()【字符串转数组】

浅拷贝

实现了 Iterator 接口的对象【将类数组转换成数组】

--------------------

## 函数调用中替代数组的 apply 方法 ##

//es6
    function add(x, y) {  
        return x + y;  
    }  
    var args = [1, 2];  
    add(...args) // 3  
    
    //es5
    function f(x, y) {  
         return x + y;  
    }  
    var args = [0, 1, 2];  
    f.apply(null, args);// 3

扩展运算符将一个数组，变为参数序列，一一传入函数中。

## 代替[数组方法的][Link 1]复用 ##

### **1.代替Arrary.push**()【数组末尾追加】 ###

//注意Arrary.push()返回的新数组的长度
    var arr1 = [0, 1, 2];  
    //console.log(arr1.push(3));// 4
    
    arr1.push(3)
    console.log(arr1);//(4) [0, 1, 2, 3]
    
    var arr1 = [0, 1, 2];  
    var arr2 = [3, 4, 5];  
    //console.log(arr1.push(arr2));// 4
    
    arr1.push(arr2);
    console.log(arr1);//(4) [0, 1, 2, Array(3)]
    
    //...扩展运算符
    var arr1 = [0, 1];  
    var arr2 = [2, 3];  
    //console.log(arr1.push(...arr2));// 4
    
    arr1.push(...arr2); 
    console.log(arr1);//(4) [0, 1, 2, 3]

### 2.代替Array.unshift 【数组头新增元素】 ###

既然在尾部能追加，换个位置在头部自然也可以。

//...扩展运算符
    var arr1 = [1,2];
    var arr2 = [3,4];
    arr1 = [...arr2,...arr1];
    console.log(arr1);//  (4)[3, 4, 1, 2]
    //es5
    var arr1 = [1,2];
    var arr2 = [3,4];
    arr1.unshift(arr2）;
    console.log(arr1);// (4) [Array(2), 1, 2]

### 3.代替Arrary.concat()【合并数组】 ###

var arr1 = ['1', '2'];  
    var arr2 = ['3'];  
    var arr3 = ['4', '5'];  
    // ES5 的合并数组  
    arr1.concat(arr2, arr3);  // [ '1', '2', '3', '4', '5' ]  
    // ES6 的合并数组  
    [...arr1, ...arr2, ...arr3]  // [ '1', '2', '3', '4', '5' ]

### 4.代替Arrary.split()【字符串转数组】 ###

var str= "hello";
    console.log(str.split(''));//(5) ["h", "e", "l", "l", "o"]
    console.log([...str]);//(5) ["h", "e", "l", "l", "o"]

## 浅拷贝 ##

//数组
    var arr1 = [1,2];
    var arr2 = [...arr1];
    arr2.push(3);
    console.log(arr1 === arr2);  // false
    console.log(arr1); // [1,2]
    console.log(arr2);// [1,2,3]
    
    //对象
    var obj1 = {
      a:1,
      b:2
    };
    var obj2 = {...obj1};
    console.log(obj1 === obj2);// false
    console.log(obj2); //{ a:1, b:2}

## 实现了 Iterator 接口的对象【将类数组转换成数组】 ##

var nodeList = document.querySelectorAll('div');  
    var array = [...nodeList];

上面代码中，querySelectorAll方法返回的是一个nodeList对象。它不是数组，而是一个**类似数组的对象**。这时，扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了 Iterator 接口。

对于那些没有部署 Iterator 接口的类似数组的对象，扩展运算符就无法将其转为真正的数组。

let arrayLike = {  
    '0': 'a',  
    '1': 'b',  
    '2': 'c',  
    length: 3  
    };   
    let arr = [...arrayLike];  // TypeError: Cannot spread non-iterable object.

类数组对象可通过ES6的[Array.form()][Array.form]将其先转换成数组。

扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

let map = new Map([
        [1, 'one'],
        [2, 'two'],
        [3, 'three'],
    ]);
    console.log([...map.keys()])  // [1, 2, 3]
    
    
    var go = function*(){
        yield 1;
        yield 2;
        yield 3;
    };
    [...go()] // [1, 2, 3]

如果对没有iterator接口的对象，使用扩展运算符，将会报错。

var obj = {a: 1, b: 2};
    let arr = [...obj]; // TypeError: Cannot spread non-iterable object

[Link 1]: https://blog.csdn.net/YouZi_X/article/details/106928078
[Array.form]: https://blog.csdn.net/YouZi_X/article/details/106002128