ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript ES6 で既存のオブジェクトに分解できますか?

JavaScript ES6 で既存のオブジェクトに分解できますか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-28 15:03:30627ブラウズ

Can You Destructure Onto an Existing Object in JavaScript ES6?

JavaScript ES6 で既存のオブジェクトに分割できますか?

分割は、データの便利な抽出を可能にする ES6 で導入された便利な機能です。オブジェクトと配列から。ただし、よくある疑問が生じます: 既存のオブジェクトに分解することは可能ですか?

次のシナリオを考えてみましょう: foo と oof の 2 つのオブジェクトがあります。 x 値と y 値を foo から oof に転送したいとします。分割はこのタスクには理想的なツールのように見えますが、ES6 の分割構文を使用してこれを直接実現する方法があるかどうか興味があるかもしれません。

直接転送の試行:

直感的には、oof{x,y} = foo のような構文を使用することを考えるかもしれませんが、残念ながら、これは機能しません。代わりに、JavaScript は新しい変数が代入演算子の左側で宣言されることを期待します。

回避策:

この制限を回避するには、次のようにします。少し型破りだが効果的な解決策を使用します。

({x: oof.x, y: oof.y} = foo);

この行は、foo から x 値と y 値を読み取り、それらを oof 内のそれぞれの場所に割り当てます。このアプローチは最も洗練されたものではないかもしれませんが、目的の目的は達成できます。

代替オプション:

より伝統的なアプローチについては、次の代替案を検討してください。

  • 明示的な割り当て:
oof.x = foo.x;
oof.y = foo.y;
  • forEach の使用:
['x', 'y'].forEach(prop => oof[prop] = foo[prop]);

これらのメソッドは、おそらくより単純で、読みやすさを維持します。

要約:

既存のオブジェクトへの分割は、ES6 の分割構文では直接サポートされていません。ただし、特定の手法を使用して目的の結果を達成することも、明確さを優先する場合は従来の割り当てアプローチを選択することもできます。 ({x: oof.x, y: oof.y} = foo);、oof.x = foo.x; であるかどうか。 oof.y = foo.y;、または別の方法の選択は、好みとコンテキストによって異なります。

以上がJavaScript ES6 で既存のオブジェクトに分解できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。