分散演算子と構造分解配分

今回の報告では,ES6に新たに追加された拡散演算子と構造分解割当てについて説明する.
構造分解割当ては分解割当てまたは非構造化割当てとも呼ばれますが、ここではMDN Web Docsで翻訳された構造分解割当ての式を使用します.😉
そんなに難しい内容ではなく、強力な機能なので、どんな機能なのか見てみましょう.
拡散演算子
拡散演算子は、識別子の前に配列や文字列などiterable個のオブジェクト要素を展開できる演算子です.
言葉だけでどう使われているのか、何の音なのかもよくわかりませんが・・・コードを見て理解してください.

const arr = [1, 2, 3, 4, 5];
const str = 'Hello World!';

console.log(...arr); // 1 2 3 4 5
console.log(...str); // H e l l o   W o r l d !

これにより、配列または文字列の識別子の前に拡散演算子を使用して各要素がconsoleに出力されることがわかる.😲
また、配列を簡単にコピーしてマージすることもできます.次のコードを見てみましょう.

const arr1 = [1, 2, 3, 4, 5];
let arr2 = arr1;

const sArr1 = [1, 2, 3, 4, 5];
let sArr2 = [...sArr1];

arr2[0] = 0;
sArr2[0] = 0;

console.log(...arr1); // 0 2 3 4 5
console.log(...arr2); // 0 2 3 4 5
console.log(...sArr1); // 1 2 3 4 5
console.log(...sArr2); // 0 2 3 4 5

これは、拡散演算子を使用するか使用しないかの違いを表すコードです.
配列は基本的に参照型であるため、単純にその配列を指して複製すると、浅い複製が行われ、元の配列が操作される可能性がある.
ただし、拡散演算子を使用して深度コピーを行うと、元のアレイが破損していないことがわかります.
もちろん、1 Dアレイにのみ適用されますが、多次元アレイでは深度レプリケーションは保証されません.
今回は、アレイをコピーする要素を見て、新しいアレイを作成しましょう.😆

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let arr3 = [...arr1, ...arr2];
arr1 = [...arr2, ...arr1];

console.log(...arr3); // 1 2 3 4 5 6
console.log(...arr1); // 4 5 6 1 2 3

この拡散演算子を使用する場合、Array.prototypeのsplice()またはconcat()メソッドを使用する必要がなく、アレイに新しい要素を追加できます.
Restパラメータiterableオブジェクトに加えて、拡散演算子は関数のパラメータにも使用できます.
関数の最後のパラメータに拡散演算子を使用すると、指定されていないパラメータを複数処理できます.
これが何を意味するかを次のコードで確認しましょう.

const func = function(one, two, ...more){
    console.log(one); // One
    console.log(two); // Two
    console.log(more); // ['Three', 'Four', 'Five']
};

func('One', 'Two', 'Three', 'Four', 'Five');

拡散演算子を用いて,oneとtwoの後に残りの伝達因子が配列形式で遷移したことを決定できた.😮
また、restパラメータは、上図に示すように常にパラメータの最後にある必要があります.エラーが発生します.
また、restパラメータは配列形式であることを覚えておいて、次の他の使用例を見てください.

const print = (...parameters) => {
    parameters.forEach(function(person) {
        console.log(person); // Jake Thomas Joseph
    });
};

print('Jake', 'Thomas', 'Joseph');

以前はES 6の関数と矢印関数では、矢印関数はArguments 객체を使用できませんでした.
しかし、上記のコードから見ると、Arguments 객체を使用するように操作してもよいし、Array.prototypeで定義されたforEach()メソッドを使用してもよい!😨
restパラメータは、Arguments 객체に類似する類似の配列オブジェクトではなく、Arrayの例、すなわち配列オブジェクトであるため、可能である.
したがって,ES6では,煩雑なArguments 객체ではなくRestパラメータを積極的に利用すべきである.
ぶんぱいこうぞうぶんかい
構造分解割当てとは、オブジェクトのプロシージャまたは配列の要素を分解して変数に代入することです.
配列分解とオブジェクト分解は少し違いますが、それぞれ説明します!😊
ぶんかいアレイこうぞう

const arr = ['one', 'two', 'three', 'four', 'five'];
let first, second;

[first, second] = arr; // or let [first, second] = arr

console.log(first); // one
console.log(second); // two

コードから分かるように、arr配列の第1および第2の要素は、firstおよびsecondに分解され、出力される.
分解配列構造は、最初の要素から分解されます.
それ以外にも、いろいろな特徴がありますので、見てみましょう!😀
デフォルト
構造を分解するときに割り当てられていない値については、以下のようにデフォルト値を設定できます.

const arr = [1];
let [first, second = 2] = arr;

console.log(first); // 1
console.log(second); // 2

変数値の交換
構造分解配分により,一時変数を必要とせずに値を交換できる.

const arr = [1, 2];
let [first, second] = arr;
[first, second] = [second, first];

console.log(first); // 2
console.log(second); // 1

値を無視
構造分解配分では、不要な値は無視できます.

const arr = [1, 2, 3];
let [first, , third] = arr;

console.log(first); // 1
console.log(third); // 3

Restパラメータ
上記の拡散演算子を構造分解配分に使用することもできます.
しかし、restパラメータと同じように、いつも最後に使うことを忘れないでください.😠

const arr = [1, 2, 3, 4, 5];
let [first, ...more] = arr;

console.log(first); // 1
console.log(more); // [2, 3, 4, 5]

次に、配列構造の分解を完了し、オブジェクト構造の分解を開始します.
オブジェクト構造の分解
配列構造分解とあまり変わらない.
配列分解が最初の要素から1つずつ分解されるとすると,オブジェクト分解はPropertyのkeyを基準として分解される.
やっぱり目で見るのが一番早い以下のコードを参考にしてください!🙂

const obj = {
    num : 1,
    str : 'Hello'
};

let {n, num, s, str} = obj;
console.log(n); // undefined
console.log(num); // 1
console.log(s); // undefined
console.log(str); // str

前述したようにpropertyのkeyを基準として分解が行われているので,順序が変わっても分解は影響を受けないことが分かる.
しかし,配列構造分解とは異なり,注意が必要である.

const obj = {
    num : 1,
    str : 'Hello'
};

let num, str;

{num, str} = obj; // Syntax Error

console.log(num);
console.log(str);

上記のコードのように、{num, str} = obj;は構造分解割当ではなくブロックと見なされるため、宣言と割当が分離されると発生する.
したがって、オブジェクト構造を分解するときに宣言と割り当てを分離する場合は、次のコードに従って変更します.🙂

const obj = {
    num : 1,
    str : 'Hello'
};

let num, str;

({num, str} = obj);

console.log(num); // 1
console.log(str); // Hello

このように括弧で囲むことで,エラーが発生しないことを確保し,構造分解配分を正常に行うことができる.
では、オブジェクト構造分解の機能を見てみましょう.
デフォルト
配列と大差なくスキップできますが、整理しておきます.

const obj = {
    myName : 'jake',
    weight : '75',
    height : '180'
};

let {myName, age = 25, weight, height} = obj;

console.log(myName); // jake
console.log(age); // 25
console.log(weight); // 75
console.log(height); // 180

存在しないプログラムの場合は、上記のようにデフォルト値を設定できます.
変数名の変更
Propertyのkeyを基準として分解を行うオブジェクト構造分解の特性上、Propertyと変数の名前が異なる場合があります.😓
したがって,オブジェクト構造分解は:(콜론)を用いて変数名を以下のように変更することができる.

const obj = {
    AnimalName : 'bbokbbok',
    WhatAnimalAge : '18',
    WhatBreed : 'Yorkshire Terrier'
};

let {AnimalName : dogName, WhatAnimalAge : age, WhatBreed : breed} = obj;

console.log(dogName); // bbokbbok
console.log(age); // 18
console.log(breed); // Yorkshire Terrier

正常に変化していることが確認できます.
構造分解割当てを使用すると,上記配列とオブジェクトだけでなく,iterable個のオブジェクトを分解することができる.
今のところどこに書くかは定かではありませんが、追加する理由は必ずあるので、必要なときに適切に使うことを覚えておきましょう!😊
参考資料
[展開構文-JavaScript|MDN] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[割り当て構造分解-JavaScript|MDN] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment