JavaScriptオブジェクトの秘訣：キーバリューペアの追加と動的なプロパティ操作

2024-04-02

JavaScriptオブジェクトにキーバリューペアを追加する方法

オブジェクトにキーバリューペアを追加するには、以下の3つの方法があります。

ドット記法

オブジェクトのプロパティ名としてキーを記述し、その後に = 記号と値を記述します。

const obj = {};

// キー "name" と値 "John Doe" を追加
obj.name = "John Doe";

// キー "age" と値 30 を追加
obj.age = 30;

console.log(obj); // { name: 'John Doe', age: 30 }

ブラケット記法

キーを文字列として括弧内に記述し、その後に = 記号と値を記述します。

const obj = {};

// キー "name" と値 "John Doe" を追加
obj["name"] = "John Doe";

// キー "age" と値 30 を追加
obj["age"] = 30;

console.log(obj); // { name: 'John Doe', age: 30 }

Object.assign() メソッドは、複数のオブジェクトのプロパティをコピーして新しいオブジェクトを作成します。

const obj1 = { name: "John Doe" };
const obj2 = { age: 30 };

const obj3 = Object.assign({}, obj1, obj2);

console.log(obj3); // { name: 'John Doe', age: 30 }

上記の3つの方法いずれも、オブジェクトにキーバリューペアを追加することができます。どの方法を使うかは、状況や好みによって使い分けてください。

注意点

キーは文字列でなければなりません。
キーが既に存在する場合は、その値が上書きされます。

例

// オブジェクトを作成
const person = {};

// キーバリューペアを追加
person.name = "John Doe";
person.age = 30;
person.address = "123 Main Street";

// オブジェクトの内容を出力
console.log(person);

// { name: 'John Doe', age: 30, address: '123 Main Street' }

JavaScriptオブジェクトにキーバリューペアを追加するには、ドット記法、ブラケット記法、Object.assign() メソッドの3つの方法があります。どの方法を使うかは、状況や好みによって使い分けてください。

// オブジェクトを作成
const person = {};

// キーバリューペアを追加
person.name = "John Doe";
person.age = 30;
person.address = "123 Main Street";

// オブジェクトの内容を出力
console.log(person);

// { name: 'John Doe', age: 30, address: '123 Main Street' }


// ドット記法でキーバリューペアを追加
person.city = "Portland";

// オブジェクトの内容を出力
console.log(person);

// { name: 'John Doe', age: 30, address: '123 Main Street', city: 'Portland' }


// ブラケット記法でキーバリューペアを追加
person["phone"] = "555-555-5555";

// オブジェクトの内容を出力
console.log(person);

// { name: 'John Doe', age: 30, address: '123 Main Street', city: 'Portland', phone: '555-555-5555' }


// Object.assign() メソッドでキーバリューペアを追加
const additionalInfo = {
  email: "[email protected]",
  jobTitle: "Software Engineer"
};

const updatedPerson = Object.assign({}, person, additionalInfo);

// オブジェクトの内容を出力
console.log(updatedPerson);

// { name: 'John Doe', age: 30, address: '123 Main Street', city: 'Portland', phone: '555-555-5555', email: '[email protected]', jobTitle: 'Software Engineer' }

Object.assign() メソッド

どの方法を使うかは、状況や好みによって使い分けてください。

JavaScriptオブジェクトにキーバリューペアを追加する他の方法

defineProperty() メソッドは、オブジェクトのプロパティを定義します。

const obj = {};

// キー "name" と値 "John Doe" を追加
Object.defineProperty(obj, "name", {
  value: "John Doe",
  writable: true,
  enumerable: true,
  configurable: true
});

// キー "age" と値 30 を追加
Object.defineProperty(obj, "age", {
  value: 30,
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(obj); // { name: 'John Doe', age: 30 }

const proto = {
  name: "John Doe",
  age: 30
};

const obj = Object.create(proto);

// キー "city" と値 "Portland" を追加
obj.city = "Portland";

console.log(obj); // { name: 'John Doe', age: 30, city: 'Portland' }

コンストラクタ関数を使用して、オブジェクトを作成することもできます。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person = new Person("John Doe", 30);

// キー "city" と値 "Portland" を追加
person.city = "Portland";

console.log(person); // { name: 'John Doe', age: 30, city: 'Portland' }