配列とオブジェクトの破棄

JavaScriptでの破棄は、配列やオブジェクトからデータを1行で簡単に抽出できる割り当て構文です。

オブジェクトの破壊

Live Editor

function learnJavaScript() { // オブジェクトを作成する `fruit` let fruit = { title: 'banana', group: 'tropical', quantity: 5 } // オブジェクトの破壊 `fruit` let { title, group, quantity } = fruit // 画面に表示する `title` return title }

function learnJavaScript() {
  // オブジェクトを作成する `fruit`
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }

  // オブジェクトの破壊 `fruit`
  let { title, group, quantity } = fruit

  // 画面に表示する `title`
  return title
}

Result

Loading...

title、 group、quantityプロパティはfruitオブジェクトの構造を繰り返し、それらの値を{...}にある同一の変数にコピーします。 したがって、 {...}で変数を交換する場合、コードも同様に機能します。上記の例で変数を交換してみてください。

ネストされたオブジェクト

ネストされたオブジェクトを分解することもできます。

Live Editor

function learnJavaScript() { let fruit = { title: 'banana', group: 'tropical', quantity: { store: 5, storeHaus: 99 } } let { title, quantity: { store: s1, storeHaus: s2 } } = fruit return title + ', ' + parseFloat(s1 + s2) }

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: {
      store: 5,
      storeHaus: 99
    }
  }

  let {
    title,
    quantity: { store: s1, storeHaus: s2 }
  } = fruit

  return title + ', ' + parseFloat(s1 + s2)
}

Result

Loading...

他の名前

プロパティ名以外の変数名を使用する必要がある場合は、次の構文が機能します。

Live Editor

function learnJavaScript() { let fruit = { title: 'banana', group: 'tropical', quantity: 5 } // title -> a; group -> b; quantity -> c let { title: a, group: b, quantity: c } = fruit return a }

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }
  // title -> a; group -> b; quantity -> c
  let { title: a, group: b, quantity: c } = fruit

  return a
}

Result

Loading...

デフォルト値

{...}に見つからない変数プロパティを書き込むと、値undefinedが割り当てられます。 変数にデフォルト値を割り当てるには、この値を変数に割り当てることができます。 プロパティが見つかった変数に値を割り当てようとすると、プロパティの値が割り当てられます。 例を見てみましょう。

Live Editor

function learnJavaScript() { let fruit = { title: 'banana' } let { title = 'lime', group, quantity = 5 } = fruit return title + ', ' + group + ', ' + quantity }

function learnJavaScript() {
  let fruit = {
    title: 'banana'
  }
  let { title = 'lime', group, quantity = 5 } = fruit

  return title + ', ' + group + ', ' + quantity
}

Result

Loading...

titleは、プロパティの値を表示しますが、割り当てた値は表示しません。 groupプロパティはfruitオブジェクトに存在せず、変数に値を割り当てていません。 quantityプロパティも存在しませんが、変数に値5を割り当てました。

残り

オブジェクトから1つの変数を取得し、残りを別のオブジェクトにグループ化する必要がある場合は、残りのプロパティを持つオブジェクトが作成される変数の前に...を使用します。

Live Editor

function learnJavaScript() { let fruit = { title: 'banana ', group: 'tropical ', quantity: 5 } let { group, ...prop } = fruit return prop.title + group }

function learnJavaScript() {
  let fruit = {
    title: 'banana ',
    group: 'tropical ',
    quantity: 5
  }
  let { group, ...prop } = fruit

  return prop.title + group
}

Result

Loading...

アレイの破壊

配列の破棄は、オブジェクトと同じ方法で行われます。 唯一の違いは、配列要素の値が、要素が定義されている順序で変数に割り当てられることです。

Live Editor

function learnJavaScript() { // アレイを作成する `fruit` let fruit = ['banana', 'tropical', 5] // アレイを破壊する `fruit` let [title, group, quantity] = fruit // 画面に表示する return `${title}, ${group}, ${quantity}` }

function learnJavaScript() {
  // アレイを作成する `fruit`
  let fruit = ['banana', 'tropical', 5]

  // アレイを破壊する `fruit`
  let [title, group, quantity] = fruit

  // 画面に表示する
  return `${title}, ${group}, ${quantity}`
}

Result

Loading...

残り

オブジェクトとの類推により、残りは機能します。

Live Editor

function learnJavaScript() { let fruit = ['banana ', 'tropical ', 5] let [name, ...prop] = fruit return `${name}, ${prop}` }

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let [name, ...prop] = fruit

  return `${name}, ${prop}`
}

Result

Loading...

配列コピー

配列のコピーを作成する例。

Live Editor

function learnJavaScript() { let fruit = ['banana ', 'tropical ', 5] let _fruit = [...fruit] return _fruit }

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let _fruit = [...fruit]

  return _fruit
}

Result

Loading...

アレイのユニオン

配列を1つに結合する例。

Live Editor

function learnJavaScript() { let name = ['banana '], prop = ['tropical ', 5], fruit = [...name, ...prop] return fruit }

function learnJavaScript() {
  let name = ['banana '],
    prop = ['tropical ', 5],
    fruit = [...name, ...prop]

  return fruit
}

Result

Loading...

問題？

に書き込む Discord または電報 チャット, また、私たちの購読 ニュース

質問

破壊は？

1. 働き
2. 構文
3. オブジェクト

オブジェクトを破棄する場合、変数をオブジェクト内と同じ順序で配置する必要がありますか？

1. はい
2. いいえ

オブジェクトに同一のプロパティが見つからない場合、変数には何が割り当てられますか？

1. error
2. undefined
3. unknown

オブジェクトを分解するとき、オブジェクト内の要素の順序は重要ですか？

1. はい
2. いいえ

このレッスンでどれだけ学んだかを理解するために、モバイルアプリ このトピックに関する私たちの学校。

リンク

1. Learn JavaScript
2. MDN Web Docs
3. ES6での破壊

Contributors ✨

Thanks goes to these wonderful people (emoji key):

IIo3iTiv

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨