ES 6—拡張演算子とrest演算子(6)

1、拡張演算子の概要
拡張演算子は3つの点(…)であり、1つの配列をコンマで区切られたパラメータ系列に変換できます.
分かりやすく話して、骨の綿の掌に似ています.大きな元素を一つずつばらばらにしてください.
基本的な使い方:文字列と配列を分解する

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

2、拡張演算子の適用
2.1いくつかのシーンは、appyの代わりになります.
Math.max()を使用して配列の最大値を求める時、ES 5はappyを通じて(友好的ではなく、煩雑な方法で)やり遂げることができます.

// ES5 apply   
var array = [1,2,3,4,3];
var max1 = Math.max.apply(null,array);
console.log(max1);//4

幸いなことに、JavaScriptの世界は絶えず変化しています.拡張演算子は配列の解析に用いられ、優雅にこの問題を解決しました.

// ES6         
var array = [1,2,3,4,3];
var max2 = Math.max(...array);  
console.log(max2);//4

まずアラーを1、2、4、3に散らせて、中で一番大きいのを探すと分かります.
2.2配列の代わりにPush、concatなどの方法
arr 2をarr 1にセットすることを実現します.

// ES5 apply   
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
//arr1     [0, 1, 2, 3, 4, 5]

拡張演算子はまた骨の大法を発揮します.

// ES6         
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
//arr1     [0, 1, 2, 3, 4, 5]

分かりやすい説明では、まずarr 2を3、5に崩してからarr 1にプッシュすると楽です.
同じ理屈で押してもいいです.concatが配列を合併する時:

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES5     
arr1.concat(arr2, arr3)  // [ 'a', 'b', 'c', 'd', 'e' ]

// ES6     
[...arr1, ...arr2, ...arr3]  // [ 'a', 'b', 'c', 'd', 'e' ]

ES 5の統合配列の書き方は、arr 1がarr 2、arr 3を吸収したようです.
ES 6の統合配列の書き方は、まずarr 1、arr 2、arr 3を分解して、その後、新しい配列に詰め込むことです.
2.3コピー配列またはオブジェクト

//    
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

//    
var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {…}}

クローン配列のようなものでも対象のものでも、まず骨绵の手のひらを広げて演算子をばらばらにしてから组み合わせて使えばいいです.
2.4疑似配列を行列に変換する

//        
var nodeList = document.querySelectorAll('div');
console.log([...nodeList]);  // [div, div, div ... ]

上記のコードの中で、querySelectorAll方法はnodeListオブジェクトを返します.配列ではなく、配列のようなオブジェクトです.このとき、拡張演算子は、NodeListオブジェクトがIteratorを実現することによって、真の配列に変換することができる.
注意:拡張演算子を使用して、疑似配列を行列に変換するのは限界があります.このクラスの配列はデフォルトのローズマリーと疑似エルゴードが必要です.
3、rest演算子の概要
残りの演算子は、オペレータを展開するときと同じように見えるが、配列とオブジェクトを分解するために使用されます.ある程度、残りの要素は展開要素とは反対に、展開要素は「展開」配列が複数の要素になり、残りの要素は複数の要素と「圧縮」を一つの要素に集めます.
簡単な話ですが、吸星大法のように、複数の元素を集めて、単一の元素に圧縮します.
restパラメータは関数の余分なパラメータを取得するために使用されます.これでアーグメンツオブジェクトを使用する必要がなくなります.restパラメータの組み合わせの変数は、行列に余分なパラメータを入れた配列です.
例えば、入力された全てのパラメータを計算し、argmentsパラメータを使用することができる.

function sumArgu () {
     var result = 0;
     for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result
}
console.log(sumArgu(1,2,3));//6

レストパラメータを使う:

function sumRest (...m) {
    var total = 0; 
    for(var i of m){
        total += i;
    }
    return total;
}
console.log(sumRest(1,2,3));//6

上記のコードは、restパラメータを利用して、関数に任意の数のパラメータを導入することができる.sumRest関数に伝達されるパラメータ値のセットは、配列mに統合される.
吸星大法のように、分散した元素を集めます.
したがって、いくつかのシーンでは、argmentsを本物の配列に変える必要がなく、直接にrestパラメータを使用して置き換えることができます.
4、rest演算子の適用
4.1レスポンスパラメータがargments変数に代わる

// arguments     
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest     
const sortNumbers = (...numbers) => numbers.sort();

上記の2つの書き方は、比較して、restパラメータの書き方がより自然で簡潔であることが分かります.
ただし、restパラメータとargmentsオブジェクトには一定の違いがあります.
4.2分配値と組み合わせて使用する

var array = [1,2,3,4,5,6];
var [a,b,...c] = array;
console.log(a);//1
console.log(b);//2
console.log(c);//[3, 4, 5, 6]

備考:restパラメータは残りのパラメータとして理解できますので、最後のビットで定義する必要があります.定義が中間であればエラーが発生します.

var array = [1,2,3,4,5,6];
var [a,b,...c,d,e] = array;
//  Uncaught SyntaxError: Rest element must be last element

5、まとめ
5.1拡張演算子とレスポンス演算子は逆演算です.
拡張演算子:行列=>分割シーケンス
rest演算子:分割シーケンス=>配列
5.2拡張演算子の適用シーン
その煩雑な文法のために、apply方法はあまり使いやすくないです.行列の要素を関数として呼び出すパラメータが必要な場合、拡張演算子は良い選択です.
拡張演算子はまた、配列の字面量を改善しています.配列を初期化、接続、コピーするのに便利です.
インデックス値を使って配列の一部を抽出できます.ローズマリーとの組み合わせで、より柔軟な表現ができます.
5.3 rest演算子の適用シーン
rest演算子は主として不定数パラメータを扱うが、restパラメータは収集パラメータを非常に簡単にする.これはクラスの配列オブジェクトであるargmentsの合理的な代替品です.
また、resttパラメータは、構造形成値と組み合わせて使用することもできる.
実際のプロジェクトでは、拡張演算子、rest演算子を活用して、より簡潔で読みやすいコードを作成できます.