先端——JavaScript進数25--ES 6の…演算子を展開する(残りの演算子)

1692 ワード

…演算子を展開する
行列またはオブジェクトには、演算子を展開します. 配列またはオブジェクトを展開する補間  一つは、配列またはオブジェクトの局所的な割り当てです.
  • 連結配列
  • let arr01 = [1,2,3];
    let arr02 = [4,5,6];
    let arr = [...arr01,...arr02];
    console.log(arr); //[ 1, 2, 3, 4, 5, 6 ]
  • 配列またはオブジェクト 他の配列またはオブジェクトの位置を指定します.
  • let  arr03=[1,2,3];
    let arr04=['1','b','c'];
    let obj={a:2,b:2};
    let obj1={c:3,d:4};
    obj1={c:3,...obj,d:4};//{ c: 3, a: 2, b: 2, d: 4 }
    console.log(obj1);
    
    //  arr   arr2       。
    arr04=['1',...arr03,'b','c'];
    console.log(arr04); //[ '1', 1, 2, 3, 'b', 'c' ]
  • 他の構成を解除する過程で、残りの値を変数に割り当てます.
  • let [a,b,...c]=[1,3,4,5,6];
    let {a1,b1,...c1}={b1:3,a1:2,f:3,d:5};
    let [ , , ...arrS] = ['  ','  ','2022','   ']
    console.log(c); // [ 4, 5, 6 ]
    console.log(c1); // { f: 3, d: 5 }
    console.log(arrS); //[ '2022', '   ' ]
  • オブジェクトも同じです.
    let obj01 = {a:1};
    let obj02 = {b:2};
    let obj = {...obj01,...obj02};
    console.log(obj);//{ a: 1, b: 2 }
    
    let obj03 = {a:1};
    let obj04 = {b:[10,20]};
    let obj5 = {...obj03,...obj04};
    console.log(obj5);//{ a: 1, b: [ 10, 20 ] }
    浅いコピー:
        配列、オブジェクトはすべて参照タイプで、参照はメモリアドレスです.
        割り当て時 転送されるのはメモリアドレスです.変数の一つを変更すると別の変数が変わります.これはよく言う浅いコピーです.    
    演算子を展開するとこの問題はなく、直接に値を展開して新しい変数を付与します.
    let oj01 = {a:1};
    let oj02 = {b:[10,20]};
    let newOj = {...oj01,...oj02};
    newOj.a = 40; 
    newOj.b = 60; 
    console.log(oj01);  //{ a: 1 }
    console.log(oj02); //{ b: [ 10, 20 ] }
    console.log(newOj); //{ a: 40, b: 60 }
     
    私の文章は全部学習中の総括です.もし間違いを見つけたら、メッセージを歓迎します.