TIL [Spread Operator]

MDNから抽出されたSpread演算子

展開構文では、配列や文字列などの繰り返し可能な文字をゼロまたは複数の引数(関数呼び出し)または要素(配列テキスト)に展開し、オブジェクトをゼロまたは複数のキー値ペアに展開できます.
これだけではわからない😥

Spread演算子構文

1.関数の呼び出し:

myFunction(...iterableObj);

2.配列文字と文字列:

[...iterableObj, '4', 'five', 6];

3.対象テキスト：

let objClone = { ...obj };

このように、元の配列やオブジェクトを最大限に保護し、他の場所にコピーする役割を果たしています.じゃ、また見てみます.

関数呼び出しは、配列内の要素を関数として使用するためのパラメータです。

function myFunction(x, y, z) { }
var arr = [0, 1, 2];
myFunction(...arr); 

このようにargs[0]、args[1]、args[2]は、x、y、zという関数パラメータに順次割り当てられる.では、配列のパラメータ数と関数のパラメータ数は同じでなければなりません.

function myFunction(v, w, x) { // 함수의 인자는 3개
 console.log(v); // 0
 console.log(w); // 1
 console.log(x); // undefined
} 
var arr = [0, 1]; // 배열의 엘리먼트는 2개
myFunction(...arr);

関数が割り当てられていないパラメータはundefinedを返します.

タイルテキストで展開

元の参照タイプデータ(配列、オブジェクト、関数など)は、変数に値を割り当てるのではなく、変数に値を持つアドレスを割り当てます.

let arr = [0, 1, 2];
arr = newArr;
newArr[0] = 10;
arr; // [10, 1, 2] newArr를 바꿨는데 arr도 똑같이 바뀜

このようにarrをnewArrにコピーすると、対応するアドレスが割り当てられるので、newArrを変更すると、アドレスに格納されている値が変更され、arrもアドレスを参照し続けるため、newArrと同じになります.

1-1. しかし,spread演算子を用いると,このような事態を防止することができる.

let arr = [1, 2, 3];
let newArr = [...arr]; // arr.slice() 와 유사
newArr.push(4); // [1, 2, 3, 4]
arr; // [1, 2, 3];

1-2. コプリット[配列#7]

getAllLettersという関数に文字列を入れ、各文字を配列の要素にする必要があります.split関数は使用できますが、問題でsplitを使用しないでください.そこで調べてみると,拡散関数を用いて簡単に解くことができる.

function getAllLetters(str) {
  return [...str]; 
}
console.log(getAllLetters('Radagast')); // ['R', 'a', 'd', 'a', 'g', 'a', 's', 't']

文字列を配列に配置しspread関数を使用すると、配列内の各文字を要素にすることができます.

3.オブジェクトテキストの展開

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 }; // { foo: "bar", x: 42 }
let mergedObj = { ...obj1, ...obj2 }; // { foo: 'baz', x: 42, y: 13 }
clonedObj.foo = 'lol';
console.log(clonedObj); // { foo: 'lol', x: 42}
console.log(obj1); // { foo: 'bar', x: 42 }

clonedObj.fooの値は変更されましたがobj 1です.fooの値は相変わらずであることがわかります.

4.オブジェクトまたは配列にネストされたデータがある場合?

let c = [1, 2, [3, [4, 5]]];
let d = [...c];

オブジェクトまたは配列の元のデータはdeepcopy(ソースとコピーされたデータは互いにxに影響を及ぼす)であり、オブジェクトまたは配列の参照データは浅いcopy(ソースとコピーされたデータは互いに同じアドレスを指すため、相互にoに影響を及ぼす)であると考えられる.

5.オブジェクトまたは配列からネストされたデータにコピーしたい場合は、deep copyを実行しますか?

let object = { 
  	       foo: 'bar', 
               value: 1, 
               profile: {
                          name: 'gildong', 
                          city: 'LA', 
                          age: 32
                         }
              };
let newObj = {
              ...obj, 
              profile: {
                         ...obj.profile, 
                         city: 'Seoul'
                       }
              };
console.log(object.profile.city) // LA
console.log(newObj.profile.city) // Seoul

ネストされたデータを拡張演算子(deepcopy)newObjectにコピーします.profile.city＝「ソウル」に変更されたが、対象は変わっていない.
ソース:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax