破壊的割り当ての再紹介

JavaScriptを作成する場合は、ES2015と導入されたすべての新しい言語標準に精通している可能性があります。 信じられないほどの人気が見られるそのような標準の1つは、割り当てを破壊することです。 配列またはオブジェクトに「飛び込み」、その中の何かをより直接的に参照する機能。 それは通常このようなものになります。

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

ただし、代入の破棄は非常に強力な構文であるため、多くの開発者は、最初にリリースされてからそれを使用している場合でも、実行できることのいくつかを忘れています。 この投稿では、オブジェクトと配列の両方の破壊、場合によっては両方の5つの実際の例を紹介します。 そして、楽しみのために、先日出会った奇妙な例を紹介します。

1.ネストされた破壊

オブジェクト内の最上位のキー、または配列の最初の要素にアクセスできることは強力ですが、それは多少制限もあります。 それは1レベルの複雑さを取り除くだけであり、私たちが本当に求めているものにアクセスするための一連のドットまたは[0]参照になります。

結局のところ、破壊はトップレベルを超えて機能する可能性があります。 そして、そうすることには正当な理由があります。 HTTPリクエストからのオブジェクト応答のこの例を見てください。 データオブジェクトを超えて、ユーザーだけにアクセスしたいと考えています。 探しているキーがわかっている限り、それは問題ではありません。

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

ネストされた配列でも同じことができます。 この場合、キーがないため、キーを知る必要はありません。 あなたが知る必要があるのはあなたが探しているものの位置です。 各要素の参照変数（またはコンマプレースホルダー）を、探している要素まで指定する必要があります（後で説明します）。 変数は、配列内の値と一致しようとしないため、任意の名前を付けることができます。

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

これらの機能は、他のツールと同様に、慎重に使用する必要があることに注意してください。 ユースケースとコードベースの対象者を認識します。 読みやすさと将来の変更のしやすさを考慮してください。 たとえば、サブアレイのみにアクセスする場合は、マップの方が適している可能性があります。

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

オブジェクトと配列は一般的なデータ構造です。 実際、非常に一般的であるため、一方が他方の内部に表示されることがよくあります。 ネストされた破棄を超えて、アクセスしている外部プロパティとは異なるタイプのデータ構造にある場合でも、ネストされたプロパティにアクセスできます。

オブジェクト内の配列のこの例を見てください。

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

逆のユースケースも有効です。 オブジェクトの配列。

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

結局のところ、この例では少し問題があります。 最初のユーザーの名前にしかアクセスできません。 それ以外の場合は、「name」を使用して2つの異なる文字列を参照しようとしますが、これは無効です。 次の破壊シナリオでは、これを整理する必要があります。

3.エイリアス

上記の例で見たように（引き出したいさまざまなオブジェクト内に繰り返しキーがある場合）、「通常の」方法でそれを行うことはできません。 変数名を同じスコープ内で繰り返すことはできません（これは、それを説明する最も簡単な方法であり、明らかにそれよりも複雑です）。

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

エイリアシングはオブジェクトにのみ適用できます。 これは、配列が既存のオブジェクトキーと一致する代わりに、開発者が選択した任意の変数名を使用できるためです。

4.デフォルト値

破壊は、参照している値がそこにあると想定することがよくありますが、そうでない場合はどうなりますか？ 未定義の値でコードを散らかすことは決して楽しいことではありません。 その場合、デフォルト値が役立ちます。

それらがオブジェクトに対してどのように機能するかを見てみましょう。

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

参照されるキーにすでに値がある場合、デフォルトは無視されます。 キーがオブジェクトに存在しない場合は、デフォルトが使用されます。

配列についても同様のことができます。

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

オブジェクトの例と同様に、値が存在する場合、デフォルトは無視されます。 上記の例を見ると、配列に存在するよりも多くの要素を破壊していることに気付くかもしれません。 より少ない要素を破壊するのはどうですか？

5.値を無視する

破棄の最も優れた部分の1つは、より大きなデータ構造の一部である値にアクセスできることです。 これには、これらの値を分離し、必要に応じて残りのコンテンツを無視することが含まれます。

実際にこれの例を以前に見ましたが、私たちが話している概念を分離しましょう。

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

この例では、 organizationを解体することはありません。それはまったく問題ありません。 このように、 userオブジェクト内で引き続き参照できます。

 user.organization

配列の場合、要素を「無視」する方法は実際には2つあります。 オブジェクトの例では、関連付けられたキー名を使用して内部値を具体的に参照しています。 配列が分解されると、変数名は位置によって割り当てられます。 配列の最後にある要素を無視することから始めましょう。

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

配列の最初と2番目の要素を分解し、残りは無関係です。 しかし、後の要素はどうですか？ 位置ベースの場合、必要な要素に到達するまで各要素を分解する必要はありませんか？

結局のところ、私たちはしません。 代わりに、これらの要素の存在を示すためにコンマを使用しますが、参照変数がないと無視されます。

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

そして、両方を同時に行うことができます。 カンマプレースホルダーを使用して、必要な場所で要素をスキップします。 また、オブジェクトの例と同様に、「無視された」要素は、 roleCounts配列内で引き続き参照できます。

奇抜な例

破壊の力と多様性はまた、あなたがいくつかの本当に奇妙なことをすることができることを意味します。 それらが便利になるかどうかを言うのは難しいですが、それがオプションであることを知っておく価値があります！

そのような例の1つは、デストラクチャリングを使用して浅いコピーを作成できることです。

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

破壊を使用できるもう1つのことは、間接参照です。

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

いつものように、読みやすさは最も重要であり、これらの例はすべて司法的に使用する必要があります。 ただし、すべてのオプションを知っていると、最適なオプションを選択するのに役立ちます。

結論

JavaScriptは複雑なオブジェクトと配列でいっぱいです。 HTTPリクエストからの応答であろうと、静的データセットであろうと、埋め込まれたコンテンツに効率的にアクセスできることが重要です。 破壊的割り当てを使用することは、それを行うための優れた方法です。 複数レベルのネストを処理するだけでなく、集中的なアクセスを可能にし、未定義の参照の場合にデフォルトを提供します。

何年にもわたって破壊を使用したとしても、仕様には非常に多くの詳細が隠されています。 この記事が、言語が提供するツールを思い出させるものとして機能したことを願っています。 次回コードを書くときは、そのうちの1つが役立つかもしれません。