JavaScriptで破壊的割り当てを使用する方法

getdocs

2年前

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)