動的JavaScriptのオブジェクトキー

バナーイメージでdoggosの弾幕を言い訳.私は2465 79152にストックフォトを探しました.私は、方法の最もタキで検索します😃
私は、彼らがあなたの時間を明るくすることを望みます.
最近、私は同僚によるプル要求をレビューするとき、'おかしい' js構文を見つけました.以前は使っていなかった.次のようになります.

const dataFromAPI = 'age';

let existingObject = {
  name: 'John',
  [dataFromAPI]: 25
};

// Output {age: 25, name: "John"}

驚くべき!
私はオブジェクトキーの変数を見て、それを共有することを決めた.
unsplash
キーとオブジェクトの値
JavaScriptでは、オブジェクトキーと値は、初期化の間のオブジェクトリテラルの中で、またはドットまたはブラケット記法を使用して割り当ての中で、多数の方法で作成されます.

// Creating an object literal with keys and values
let newObject = {
  name: 'Jane',
  age: 24
};

// Adding a new key - bracket notation
newObject["location"] = "Peru"

// Adding a new key - Dot notation
newObject.height = '1.95m'

// Output {age: 24, height: "1.95m", location: "peru", name: "Jane"}

これはかなり標準的なものです.キーの値については、複雑な演算演算結果を値として割り当てることができます.キーのために、我々は同様の何かをすることができて、キーで計算を実行することさえできます.

ダイナミックオブジェクトキー
ES 6以前のオブジェクトの動的キーを扱う方法は次のようになります.

let newObject = {
  name: 'Jane',
  age: 24
};

const newData = "location";

newObject[newData] = "Nicaragua"

// Output {age: "24", location: "Nicaragua", name: "Jane"}

括弧を使ってES 6で導入された速記形式では、このように直接オブジェクトリテラルに変数を割り当てることができます.

const newData = "location";

let newObject = {
  name: 'Jane',
  age: 24,
  [newData]: "Nicaragua"
};

// Output {age: "24", location: "Nicaragua", name: "Jane"}

この短縮形式は、クリーナーコードをサポートしていますが、このシナリオは複数の場合に適用されます.既存のデータ(Object)は、動的なキーを持つ別のソースからのデータで拡張されます.
計算されたキーに移動すると、オブジェクトキーの値を直接リテラル内の同じブラケット表記を使用してオブジェクトリテラルで計算することができます.

const newData = "lottery";
const didUserWin = true;

let newObject = {
  name: 'Doug',
  age: 42,
  [newData + (didUserWin ? 'Winner': 'Loser')]: "Assign any value or data here"
};

// Output {age: "24", lotteryWinner: "Assign any value or data here", name: "Doug"}

この図は、三項演算子の形式での条件の使用も示します.
このポストは、主にオブジェクトキーと値の両方のダイナミズムを示すことです.
あなたはこれを使用して任意のフィードバックがある場合.
ここでは良くなる🥂
ウィリアム.
この記事はもともと