s 6拡張演算子の3つの点(…)のいくつかの一般的な使用方法

目次
 
関数コールにおける代替配列のappy方法
配列方法の代わりに多重化
1.arrary.pushの代わりに【配列の最後に追加】
2.Aray.unshiftの代わりに【配列ヘッドの追加要素】
3.arrary.co ncat()の代わりに【統合配列】
4.arrary.split()【文字列回転配列】の代わりに
浅いコピー
Iteratorインターフェースのオブジェクトを実現しました.
関数コールにおける代替配列のappy方法

//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.Aray.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.co ncat()の代わりに【統合配列】

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. 

クラスの配列オブジェクトは、ES 6のAray.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