VanillaJavaScriptを使用してオブジェクトにアイテムを追加する方法

JavaScriptでは、オブジェクトにアイテムを追加する方法が2つあります。

1. ドットドット：object.thingToAdd
2. 角かっこ表記：object['thingToAdd'

ドット表記

最初にドット表記を見てみましょう：

let dog = {
  name: "Naya",
  age: "2",
  color: "black",
}

// Add item to dog object
dog.breed = "Rottweiler mix"

// Log object to console
console.log(dog)
// { name: "Naya", age: "2", color: "black", breed: "Rottweiler mix", }

それはドット表記です。

ブラケット表記

角かっこ表記では、オブジェクトにプロパティを追加する方法に関する制限が少なくなります。以前と同じ犬のオブジェクトを見てみましょう：

let dog = {
  name: "Naya",
  age: "2",
  color: "black",
}

次に、角かっこ表記を使用してプロパティと値を追加しましょう：

dog["weight"] = "34kg"

console.log(dog)
//  { name: "Naya", age: "2", color: "black", weight: "34kg", }

ご覧のとおり、この特定の例では、ドット表記とまったく同じように機能します。

次に、2つの方法を比較してみましょう。

ドット表記とブラケット表記

番号を追加してみてください ドット表記を使用して新しいプロパティ名として：

// Dot notation
dog.1 = "Property 1"
console.log(dog)
// Uncaught SyntaxError: Unexpected number

おっと、エラーが発生します！これは、ドット表記では数字を使用できないためです。 プロパティ名で。

しかし、あなたはできます IDが文字列としてフォーマットされている限り、角かっこ表記の数字を使用してください：

// Bracket notation
dog["1"] = "Property 1"
console.log(dog)
// { 1: "Property 1", age: "2", color: "black", name: "Naya" }

繰り返しますが、角かっこ表記はドット表記よりも柔軟性があります。

どちらを使用する必要がありますか？

読みやすいので、できる限りドット表記を使用することをお勧めします。ただし、オブジェクトにプロパティを追加する必要があり、プロパティが数字、特殊記号、または予約済みのキーワードで始まる必要がある場合は、角かっこ表記を使用してください。

ドット表記：

• プロパティ識別子（名前）で、英数字（a〜z）文字、アンダースコア（_のみを含む） ）、または$ 。
• プロパティ識別子できません 数字で始めます。
• プロパティ識別子できません 変数を含みます。

ブラケット表記：

• プロパティ識別子（名前）は、文字列値型または参照する変数である必要があります。 文字列。
• 識別子にスペースを使用できます[" property"] 、
• 文字列識別子できます 数字で始まる["1st"]