JavaScript で計算されたプロパティ名: 角括弧はオブジェクトのプロパティをどのように定義しますか?

計算プロパティ名の公開: 角括弧の中にあるものは何ですか?

オブジェクト リテラルが最上位に君臨する JavaScript の領域では、興味深いプロパティ名を角かっこで囲むという構文が登場しました。 「計算されたプロパティ名」として装飾されたこの謎の表記法は、最近 ES6 仕様のページを飾りました。

提供された例で謎めいて導入されているプロパティ dist は、内部オブジェクトに対して影響力を持ち、その files プロパティは、独特の構文見本:

dist: {
    files: {
      [bpr + 'lib/Monster.min.js']: ['<%= concat.dist.dest %>']
    }
  }
}

この不可解な表現に困惑しながら、私たちは、計算されたプロパティ名の謎めいた世界。

計算されたプロパティ名の謎を解く

MDN が明るく宣言しているように、「ECMAScript 2015 以降、オブジェクト初期化子の構文は計算されたプロパティ名もサポートします。これにより、式を括弧 [] に入れることができます。プロパティ名として計算されます。"

本質的に、これらの角括弧により、評価された式の結果に基づいてプロパティ名を動的に生成することができます。この機能は、名前を静的に決定できないオブジェクト プロパティを構築するときに非常に役立つことがわかります。

構文の説明

計算されたプロパティ名の構文は簡単です。決定する式を囲みます。角括弧内のプロパティ名。この式は、単純な変数参照から複雑な計算まで多岐にわたります。

const propertyName = 'age';
const object = {
  [propertyName]: 25
};

この例では、プロパティ名は propertyName 変数の値によって動的に生成されます。

Empowering Dynamicオブジェクトの構築

計算されたプロパティ名により、プロパティ名が次のような動的オブジェクトの作成が可能になります。実行時に決定されます。この柔軟性は、外部データまたはユーザー入力に基づいてデータ構造を生成する場合に特に役立ちます。

const data = {
  firstName: 'John',
  lastName: 'Doe',
  [`${firstName} ${lastName}`]: 'John Doe'
};

このコードは、firstName プロパティと lastName プロパティの連結を使用してプロパティを動的に作成します。結果のオブジェクトには「John Doe」という名前のプロパティが含まれるため、完全な名前に簡単にアクセスできます。

要約

ES6 で導入された計算されたプロパティ名。評価された式による動的なプロパティ名の生成を可能にすることで、JavaScript のオブジェクト構築機能を強化します。この柔軟性により、洗練された表現力豊かなオブジェクトベースのデータ構造を構築するための膨大な可能性が解き放たれます。

以上がJavaScript で計算されたプロパティ名: 角括弧はオブジェクトのプロパティをどのように定義しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。