JavaScriptオブジェクトの破棄

概要:このチュートリアルでは、オブジェクトのプロパティを個々の変数に割り当てるJavaScriptオブジェクトの破棄について学びます。

配列を破壊する方法を学びたい場合は、配列破壊チュートリアルをチェックすることができます。

JavaScriptオブジェクトの分割割り当ての概要

二つのプロパティを持つpersonオブジェクトがあるとします。firstNameとlastName。ES6より前のバージョンでは、personオブジェクトのプロパティを変数に割り当てる場合、通常は次のようにします:

Code language: JavaScript (javascript)

ES6では、オブジェクトのプロパティを変数に割り当てる別の方法を提供するオブジェクト分割構文が導入されています:

Code language: JavaScript (javascript)

この例では、firstNameプロパティとlastNameプロパティがそれぞれfName変数とlName変数に割り当てられています。この構文では

:

Code language: JavaScript (javascript)

コロンの前の識別子(:)はオブジェクトのプロパティであり、コロンの後の識別子は変数です。

プロパティ名は、オブジェクトリテラルであろうとオブジェクト分割構文であろうと、常に左側にあることに注意してください。

変数がオブジェクトのプロパティと同じ名前を持つ場合は、次のようにコードをより簡潔にすることができます:

Code language: JavaScript (javascript)

この例では、2つの変数firstNameとlastNameを宣言し、同じステートメント内の変数にpersonオブジェクトのプロパティを割り当てました。

宣言と代入を分離することは可能です。 ただし、変数を括弧で囲む必要があります:

括弧を使用しない場合、JavaScriptエンジンは左側をブロックとして解釈し、構文エラーをスローします。

オブジェクトの分割を使用して変数に存在しないプロパティを割り当てると、変数はundefinedに設定されます。 例えば:

Code language: JavaScript (javascript)

この例では、middleNameプロパティはpersonオブジェクトに存在しないため、middleName変数はundefinedです。

デフォルト値の設定

オブジェクトのプロパティが存在しない場合、変数にデフォルト値を割り当てることができます。 例えば:

Code language: JavaScript (javascript)

この例では、personオブジェクトにmiddleNameプロパティがない場合、空の文字列をmiddleName変数に割り当てました。

また、currentAgeプロパティをage変数にデフォルト値18で割り当てます。

ただし、personオブジェクトにmiddleNameプロパティがある場合、割り当ては通常どおり機能します:

Code language: JavaScript (javascript)

nullオブジェクトの破棄

関数は、いくつかの状況でオブジェクトまたはnullを返すことがあります。 例えば:

Code language: JavaScript (javascript)

そして、あなたはオブジェクトの破壊割り当てを使用します:

Code language: JavaScript (javascript)

コードはaをスローしますTypeError:

Code language: JavaScript (javascript)

これを回避するには、OR演算子(||)を使用して、nullオブジェクトを空のオブジェクトにフォールバックします:

Code language: JavaScript (javascript)

今、エラーは発生しません。 そして、firstNameとlastNameはundefinedになります。

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

プロパティとしてnameオブジェクトを持つemployeeオブジェクトがあると仮定します:

Code language: JavaScript (javascript)

次のステートメントは、ネストされたnameオブジェクトのプロパティを個々の変数に分解します:

Code language: JavaScript (javascript)

複数の変数へのプロパティの複数の割り当てを行うことができます:

Code language: JavaScript (javascript)

Destructuring function arguments

personオブジェクトを表示する関数があるとします:

Code language: JavaScript (javascript)

このように関数に渡されたオブジェクト引数を破壊することは可能です:

Code language: JavaScript (javascript)

特にargumentオブジェクトの多くのプロパティを使用する場合は、あまり冗長に見えません。 この手法はReactでよく使用されます。

概要

• オブジェクト分割は、デフォルトで同じ名前の変数にオブジェクトのプロパティを割り当てます。