JavaScriptは、オブジェクトを分解し、1つのテイクで個々のユニットを割り当てる機能を提供します。 これにより、やりたいことのポイントに到達し、物事をきれいに保つことができます。

簡単に言うと、 destructuring は、オブジェクトまたは配列の値を変数に解凍することを意味します。 このガイドの最後に、それを使用する方法と、それがあなたのために何を置き換えることができるかがわかります。

アレイの破壊

デストラクチャリング割り当てを開発する前は、配列があり、その値の一部を変数に割り当てたい場合は、次のようにします。

let johnDoe = ["John", "Doe", "Iskolo"]
let firstName = johnDoe[0]
let lastName = johnDoe[1]
let title = johnDoe[2]

console.log(firstName, lastName, title) // John Doe Iskolo

次のように、配列を破棄しても同じ結果を得ることができます。

let johnDoe = ["John", "Doe", "Iskolo"]
let [firstName, lastName, title] = johnDoe
console.log(firstName, lastName, title) // John Doe Iskolo

この方法では、必要な要素をいくつでも選択できます。

let johnDoe = ["John", "Doe", "Iskolo"]
let [firstName, lastName] = johnDoe
console.log(firstName, lastName) // John Doe

または:

let johnDoe = ["John", "Doe", "Iskolo"]
let [, lastName, title] = johnDoe
console.log(lastName, title) // Doe Iskolo

文字列でもこれを行うことができます:

let [firstName, ,title] = "John Doe Iskolo".split(" ")
console.log(firstName, title) // John Iskolo

残りの演算子(...)をスローして、残りの引数を収集できます。

let [firstName, ...others] = "John Doe Iskolo".split(" ")
console.log(firstName, others) // John Iskolo

また、ここにオブジェクトを取り込むこともできます。

let johnDone = {}
[johnDoe.first, johnDoe.last] = "John Doe Iskolo".split(" ")
console.log(johnDoe.first, johnDoe.last) // John Doe

オブジェクトをループする場合

破棄割り当てを使用して、オブジェクトやマップなどのキーと値のペア変数をループできます。

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}
Object.keys(obj).forEach(key => {
  console.log(`${key} : ${obj[key]}`)
})

これを次のように別の方法で回転させることができます。

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}
for(let [key, value] of Object.entries(obj)) {
  console.log(`${key} : ${value}`)
}

あなたには同じように見えるかもしれませんが、そうではありません。 上記のforEachを使用する場合、オブジェクトのキーを配列にプルし、次にそのキーの配列をループして、それらのキーを使用してオブジェクトの値を選択します。

2番目の部分では、まっすぐ進み、各オブジェクトエントリをループして、キーと値を抽出します。

デフォルト値の割り当て分解したい変数が空の場合にのみ、デフォルト値を割り当てることができます。

let [firstName = "John", ,title = "Fire"] = "John Doe".split(" ")
console.log(firstName, title) // John Fire

オブジェクトを破壊する

配列で行ったように、オブジェクトを分解することもできます。 Reactを使用したことがある場合は、モジュールをインポートするときにこれが使用されているのを見たことがあるかもしれません。

let obj = {
  firstName : "John",
  lastName : "Doe",
  title : "Iskolo"
}

let {firstName, lastName) = obj
console.log(firstName, lastName) // John Doe

オブジェクトを破棄するときは、変数名としてkeysを使用します。 これは、JavaScriptが割り当てたいオブジェクトのプロパティを知る方法です。 割り当てでインデックス/位置を使用する配列とは異なり、ここではキーを使用します。

この破壊は、あらゆる種類のオブジェクトで機能します。 オブジェクトにネストされた値がある場合でも、それを分解して値を変数に抽出できます。

let obj = {
  name : "John Doe",
  address : {
    city : "Omsk",
    country : "Russia"
  }
}
let {city, country} = obj.address
console.log(city, country) // Omsk Russia

関数の引数を渡すためにそれを使用する

次のような関数を見たことがあるかもしれません。

function sumFunc(a = true, b = "", c = "", d = 0, e = false) {
  console.log(a,b,c,d,e)
}
// Call the function
sumFunc(true, "", "", "", true)
// Or if we want to preserve default values
sumFunc(true, undefined, undefined, undefined, true)

これはあまりよく見えません。 チャートを作成するような機能を実行しようとしていて、チャットを作成するために多くの引数が必要な場合は、さらに悪化します。

このような状況では、破壊が役立つ場合があります。

function sumFunc({a = true, b = "", c = "", d = 0, e = false}) {
  console.log(a,b,c,d,e)
}
let args = {a : false, e: true}
// Call the function
sumFunc(args)

関数の引数をオブジェクトとして渡すことにより、それらは自動的に独立した引数に解決されます。 ここで、一致するキーと値のペアを持つオブジェクトを渡すと、関数はうまく機能します。

結論

破棄は、それなしで実行できる操作ですが、それがどのように優れた開発者になるかはすでにわかります。 よりクリーンなコード、より少ない繰り返し、そしてあなたが持っているものより多くの構造。

今日は破壊を使用して、コードを改善してください。