JavaScript
デストラクションの割り当て

前書き

構文

• let [x、y] = [1,2]
• [first、... rest] = [1、2、3、4]
• [one、three] = [1,2,3]とする。
• let [val = 'デフォルト値'] = []
• {a、b} = {a：x、b：y}とする。
• {a：{c：}} = {a：{c： '入れ子'}、b：y}
• {b = 'デフォルト値'} = {a：0}

備考

関数の引数を破壊する

関数に渡されたオブジェクトからプロパティを取得します。このパターンは、引数の位置に頼るのではなく、名前付きのパラメータをシミュレートします。

let user = {
    name: 'Jill',
    age: 33,
    profession: 'Pilot'
}    

function greeting ({name, profession}) {
    console.log(`Hello, ${name} the ${profession}`)
}

greeting(user)

これは配列に対しても機能します：

let parts = ["Hello", "World!"];

function greeting([first, second]) {
    console.log(`${first} ${second}`);
}

破壊時の変数名の変更

Destructuringでは、オブジェクト内の1つのキーを参照できますが、別の名前の変数として宣言できます。構文は、通常のJavaScriptオブジェクトのキー値構文と似ています。

let user = {
  name: 'John Smith',
  id: 10,
  email: '[email protected]',
};

let {user: userName, id: userId} = user;

console.log(userName) // John Smith
console.log(userId) // 10

配列の破壊

const myArr = ['one', 'two', 'three']
const [ a, b, c ] = myArr

// a = 'one', b = 'two, c = 'three'

destructuring配列にデフォルト値を設定することができます。 デフォルト値Destructuringの例を参照してください。

配列を破壊すると、2つの変数の値を簡単にスワップできます。

var a = 1;
var b = 3;

[a, b] = [b, a];
// a = 3, b = 1

空のスロットを指定すると、不要な値をスキップすることができます。

[a, , b] = [1, 2, 3] // a = 1, b = 3

オブジェクトの破壊

破壊は、オブジェクトからプロパティにプロパティを抽出する便利な方法です。

基本的な構文：

let person = {
  name: 'Bob',
  age: 25
};

let { name, age } = person;

// Is equivalent to
let name = person.name; // 'Bob'
let age = person.age;   // 25

破壊と名前の変更：

let person = {
  name: 'Bob',
  age: 25
};

let { name: firstName } = person;

// Is equivalent to
let firstName = person.name; // 'Bob'

デフォルト値でのデストラクション：

let person = {
  name: 'Bob',
  age: 25
};

let { phone = '123-456-789' } = person;

// Is equivalent to
let phone = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

デフォルト値での名前の変更と名前の変更

let person = {
  name: 'Bob',
  age: 25
};

let { phone: p = '123-456-789' } = person;

// Is equivalent to
let p = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

内部変数の破壊

オブジェクトを関数引数に分解するのとは別に、次のように変数宣言の中で使用することができます。

const person = {
  name: 'John Doe',
  age: 45,
  location: 'Paris, France',
};

let { name, age, location } = person;

console.log('I am ' + name + ', aged ' + age + ' and living in ' + location + '.');
// -> "I am John Doe aged 45 and living in Paris, France."

ご覧のように、 name 、 age 、 location 3つの新しい変数が作成され、それらの値はキー名と一致する場合はオブジェクトのpersonから取得されました。

残りのパラメータを使用して引数配列を作成する

あなたが特別に宣言したものとは別に、余分な引数からなる配列を必要とする場合、引数宣言の中でarray restパラメータを以下のように使用することができます：

例1：配列へのオプション引数：

function printArgs(arg1, arg2, ...theRest) {
  console.log(arg1, arg2, theRest);
}

printArgs(1, 2, 'optional', 4, 5);
// -> "1, 2, ['optional', 4, 5]"

例2では、​​すべての引数が配列になりました。

function printArgs(...myArguments) {
  console.log(myArguments, Array.isArray(myArguments));
}

printArgs(1, 2, 'Arg #3');
// -> "[1, 2, 'Arg #3'] true"

myArgumentsが配列であり、 ...myArgumentsがparameters引数宣言内にあるため、コンマで区切られた関数（パラメータ）によって得られた値のリストを、完全に機能的な配列に変換します（配列のようなオブジェクトではありませんネイティブの引数オブ​​ジェクトのように）。

破壊時のデフォルト値

抽出しようとしているプロパティがオブジェクト/配列に存在しないため、 TypeError （ネストされたオブジェクトをTypeError ）またはundefinedに設定されることがよくあります。破壊すると、デフォルト値を設定することができます。デフォルト値は、オブジェクトに見つからない場合にフォールバックします。

var obj = {a : 1};
var {a : x , b : x1 = 10} = obj;
console.log(x, x1); // 1, 10
 
var arr = [];
var [a = 5, b = 10, c] = arr;
console.log(a, b, c); // 5, 10, undefined

入れ子構造の破壊

私たちはオブジェクト/配列の破壊に限定されず、入れ子にされたオブジェクト/配列を破壊することができます。

ネストされたオブジェクトの破棄

var obj = {
  a: {
    c: 1,
    d: 3
  },
  b: 2
};

var {
  a: {
    c: x,
    d: y
  },
  b: z
} = obj;

console.log(x, y, z);     // 1,3,2

ネストした配列の破壊

var arr = [1, 2, [3, 4], 5];

var [a, , [b, c], d] = arr;

console.log(a, b, c, d);      // 1 3 4 5

破壊は単なるパターンに限られているわけではなく、nレベルのネスティングで配列を持つことができます。同様に、オブジェクトを使用して配列を破棄することも、逆も可能です。

オブジェクト内の配列

var obj = {
  a: 1,
  b: [2, 3]
};

var {
  a: x1,
  b: [x2, x3]
} = obj;

console.log(x1, x2, x3);    // 1 2 3

配列内のオブジェクト

var arr = [1, 2 , {a : 3}, 4];

var [x1, x2 , {a : x3}, x4] = arr;

console.log(x1, x2, x3, x4);