ES 6解体拡張演算子(...)rest演算子(...)配列脱重(new Set([]))

7629 ワード
ES 6
かいそう
解构の原理は,賦値の両侧に同じ构造を持つことで,配列やオブジェクト内の要素や属性値を正确に取り出すことができ,下记を用いて个々賦値する面倒を省くことである.
  • 配列の解構賦値(左右両側構造が同じでよい)
    let [a, b, c] = [1, 2, 3];  //          ，      ，     。
let [foo, [[bar], baz]] = [1, [[2], 3]];
let [head, ...tail] = [1, 2, 3, 4];     // head   1 , tail  [2, 3, 4]
let [x = 1, y = x] = [1, 2];     // x  1 ,y  2  ,
  • オブジェクトの解体賦値let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }オブジェクトの解構賦値の内部メカニズムは、同名の属性を見つけてから対応する変数に付与することです.本当に与えられたのは後者で、前者ではありません.
    let { bar, foo } = { foo: "aaa", bar: "bbb" };     // foo= "aaa", bar ="bbb"
let { baz } = { foo: "aaa", bar: "bbb" };    // baz  = undefined            ，  undefined
let { foo: f } = { foo: 'aaa', bar: 'bbb' };    ///  f = "aaa" ,     
let { message: msg = 'Something went wrong' } = { };  // msg = "Something went wrong"

    オブジェクトの解构と配列の解构、1つの重要な违いは:配列要素は顺番に并んで、変数の取値はその位置によって决します;オブジェクトのプロパティには順序がありません.変数名はプロパティと同じ名前で、正しい値を取得できます.変数名に対応する属性名がない場合、値が取れず、最後にundefinedに等しい.
    ネストオブジェクト解体
    var obj = {
    name: 'chris',
    sex: 'male',
    age: 26,
    son: {
        sonname: '  ',
        sonsex: 'male',
        sonage: 1
    }
};
var {name, sex, age, son: {sonname, sonsex, sonage}} = obj;
console.log(sonname + ' ' + sonsex + ' ' + sonage);
//   male 1
  • 文字列の解構賦値文字列は、賦値を解構することもできる.これは、文字列が類似配列のオブジェクトに変換されるためです.
    const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
  • 関数パラメータの解構賦値
    //  
function add([x, y]){
   return x + y;
}
add([1, 2]); // 3
 
[[1, 2], [3, 4]].map(([a, b]) => a + b);    // [ 3, 7 ]

//    
//move1          ，
//move             。         ，     
function move1({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
function move({x=0, y=0}={}) {     
  return [x, y];
}
move({x:3,y:8});// [3, 8]
move({x:3});// [3, 0]
move({});// [0, 0]
move();// [0, 0]
    • よく使うシーン
    1、for循環解構二次元データ
    ```
var arr = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr) {
    console.log(a);
    console.log(b);
}
//11 、12、21、22、31、32
```

    2、循環解体対象型配列
    ```
var arr = [{name: 'chris', age: 26}, {name: 'jack',    age: 27}, {name: 'peter',age: 28}];

for (let {age, name} of arr) {
    console.log(name + ' ' + age);
}
//chris 26
//jack 27
//peter 28

```

    3、配列中のセットオブジェクト結合の解体
    var arr = [
  1,
   {
   	 name:'xx',
   	 score:[1,2]
   }
]
var [name,{name:rename,score}] = arr;
console.log(name,rename);
console.log(score);

    4、jsonオブジェクトにおけるセット配列結合の解体
    var obj = {
    name: 'chris',
    sex: 'male',
    age: [1, 2, 3]
}

var {name, sex, age:[a, b, c]} = obj;
console.log(name,sex);
console.log(a,b,c);
//console.log(age)         //  ，      ，  age

    5、関数の戻り値がオブジェクトまたは配列の解体
    //      
function example() {
    return [1, 2, 3];
}
let [a, b, c] = example();
a;//1
b;//2
c;//3
 
//      
function example(){
    return {
        foo: 1,
        bar: 2
    }
}
let {foo, bar} = example();
foo;//1
bar;//2

    6、遍歴Map解体
    const map = new Map();
map.set('first','hello');
map.set('second','world');
for (let [key, value] of map) {
    console.log(key + ' is ' + value );
}
//first is hello
//second is world

//     
for (let [key] of map) {}
 
//     
for (let [,value] of map) {}

    spread演算子
    拡張演算子は3つのポイントで表され、配列またはクラス配列オブジェクトをカンマで区切られた一連の値に展開する機能があります.
    var foo = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var arr = [1, 2, 3];

//    
foo(arr[0], arr[1], arr[2]);

//       
foo(...arr);
//1
//2
//3

    //     
var arr2 = arr;
var arr3 = [...arr];             //        
console.log(arr===arr2); //true,   arr arr2       
console.log(arr===arr3); //false,   arr3 arr      

//               
var arr4 = [...arr, 4, 5, 6];
console.log(arr4);//[1, 2, 3, 4, 5, 6]

//      
var str = 'love';
var arr5 = [...str];
console.log(arr5);//[ 'l', 'o', 'v', 'e' ]

    rest演算子
    rest演算子も3つのポイントですが、拡張演算子とは正反対にカンマで区切られた値シーケンスを1つの配列に組み合わせる機能があります
    //        ，  ES6        arguments  
var bar = function(...args) {
    for (let el of args) {
        console.log(el);
    }
}

bar(1, 2, 3, 4);
//1
//2
//3
//4

var test = function(a, ...args) {
    console.log(a);
    console.log(args);
}

test(1, 2, 3, 4);
//1
//[ 2, 3, 4 ]

    rest演算子を組み合わせて解釈して使用する
    var [a, ...rest] = [1, 2, 3, 4];
console.log(a);//1
console.log(rest);//[2, 3, 4]

    3つの点について、3点をパラメータまたは等号の左側に置くのがrest演算子です.実パラメータまたは等号の右にspread演算子
    経験:1、等号付与またはforループで、配列またはオブジェクトから値を取る必要がある場合は、できるだけ解体を使用します.2,自分で関数を定義する場合,呼び出し者が配列やオブジェクトを伝達した場合,パラメータはできるだけ解構方式を用い,オブジェクト解構を優先し,次いで配列解構である.コードの可読性がよくなります.3サードパーティ製関数を呼び出すときに、複数のパラメータを受け入れ、入力するパラメータが配列である場合は、拡張演算子を使用します.パラメータは、下付き文字で入力されないようにします.多くの人がapply法を用いて配列に伝達する習慣を避けることもできる.4,rest演算子はシーンを少し少なくするべきで、主に不定数のパラメータを処理して、argumentsオブジェクトの使用を避けることができます.
    new Set([])配列デマルチプレクシング
    new Setを使用して配列の重み付けを実現し、クラス配列を返します.したがって,ループを必要とする場合はfor ofを結合しなければならず,setはクラス配列でインデックスがないためforループを使用すると実現できない.
    var arr = new Set([1, 2, 1, 1, 2, 3, 3, 4, 4]);
for (var el of arr) {
    console.log(el)
}

    もちろんクラス配列を再解釈して新しい配列を構成し、for...inを使用することもできます.
    var arr = new Set([1, 2, 1, 1, 2, 3, 3, 4, 4]);
var arry = [...arr]
for (var i = 0; i < arry.length; i++) {
    console.log(arry[i])
}

    関数のデフォルトパラメータ
    一般的な使い方
    function log(x, y = 'World') {
  console.log(x, y);
}
log('Hello') // Hello World

    オブジェクトと配列の解体を組み合わせて、二重のデフォルトパラメータを設定します.
    //  ，          ；  ，            
function foo({x, y = 5} = {}) {
  console.log(x, y);
}
foo()    // undefined  5

    テンプレート文字列
    テンプレート文字列は拡張版の文字列で、逆引用符(`)で識別されます.
    1、基本的な使い方
    let greeting = `\`Yo\` World!`;        // `Yo` World --           

let moreStr = `
    today is ${month},
    The weather is nice ! 
`

    Tips:a.テンプレート文字列で反引用符を使用する必要がある場合は、前に反スラッシュ変換を使用する必要があります.b.テンプレート文字列を使用して複数行の文字列を表す場合、すべてのスペースとインデントは出力に保持されます.
    2、テンプレート文字列に変数を使う
    (1)テンプレート文字列に変数を埋め込み,変数名を${}に書き込む必要がある.(2)括弧の内部に任意のJavaScript式を入れることができ,演算や参照オブジェクト属性を行うことができる.(3)テンプレート文字列では関数を呼び出すこともできる.(4)カッコの値が文字列でない場合は、一般的なルールに従って文字列に変換されます.たとえば、カッコ内がオブジェクトの場合、オブジェクトのtoStringメソッドがデフォルトで呼び出されます.(5)テンプレート文字列の変数が宣言されていない場合はエラーが報告されます.(6)括弧の内部に文字列がある場合はそのまま出力します.
    //     
`In JavaScript '
    ' is a line-feed.`;
 `Hello ${'World'}`; // "Hello World"

//        
let name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`); //  Hello Bob, how are you today?

//       JavaScript    ,     
`${x} + ${y} = ${x + y}`;// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`;// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`;  // "3"

//         
function fn(){
    return "hello world"
}
`foo ${fn()} bar`;// "foo hello world bar"

//         
`${obj}`;// "[object Object]"

//             
 `Hello, ${place}`;// ReferenceError: place is not defined

    リファレンスリンクhttp://www.cnblogs.com/chrischjh/p/4848934.html
    1つのプログラムを編纂して、チェーンチームの各種の基本演算を実現します
    【Java】ArrayListまとめ