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

目录

 

函数调用中替代数组的 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  

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

代替数组方法的复用

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()将其先转换成数组。

扩展运算符内部调用的是数据结构的 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