【Javascript】よく使うオブジェクトの操作を覚える

はじめに

Javascriptでよく使う構文を勉強していく中で、よく使うオブジェクトの操作について勉強しましたので、共有いたします。
他にも、オブジェクトの操作でよく使うものがありましたら、共有くださると幸いです。

オブジェクト操作一覧

勉強していた中で特によく使うと言われているオブジェクト操作一覧についてご紹介します。

プロパティ追加

プロパティを追加する際には、obj.キー = 値もしくはobj["キー"] = 値で追加します。このとき、キーは追加するオブジェクトに存在していないことが条件です。
また、記法のうちobj.キーをドット記法、obj["キー"]をブラケット記法と呼びます。

// オブジェクト作成
const obj = {
    name: "Yuto",
    age: 26,
};

// プロパティ追加(ドット記法)
obj.country = "Japan";
console.log(obj); // { age: 26, country: "Japan", name: "Yuto" }

// プロパティ追加(ブラケット記法)
obj["country"] = "Japan";
console.log(obj); // { age: 26, country: "Japan", name: "Yuto" }

また、別のオブジェクトに複製したい場合は、スプレッド構文(...obj)で複製でき、追加してプロパティの設定も可能です。

// オブジェクト作成
const obj = {
    name: "Yuto",
    age: 26
};

// オブジェクト複製
console.log({...obj, country: "Japan", language: "Japanese"}); // { age: 26, country: "Japan", language: "Japanese", name: "Yuto" }

さらに、Object.assign(obj1, obj2)とすることで、オブジェクト同士を結合することもできます。

// オブジェクト作成(2個)
const obj1 = {
    name: "Yuto",
    age: 26
};
const obj2 = {
    country: "Japan",
    language: "Japanese"
};

// オブジェクト複製
console.log(Object.assign(obj1, obj2)); // { age: 26, country: "Japan", language: "Japanese", name: "Yuto" }

プロパティ取得

obj.キーもしくはobj["キー"]でプロパティを取得できます。
また、オブジェクトのキーを全て取得する場合はObject.keys(obj)、値を全て取得する場合はObject.values(obj)、キーと値を両方取得する場合はObject.entries(obj)をそれぞれ使います。

// オブジェクト作成
const obj = {
    name: "Yuto",
    age: 26,
    country: "Japan"
};

// プロパティ取得(ドット記法)
console.log(obj.country); // "Japan"

// プロパティ取得(ブラケット記法)
console.log(obj["country"]); // "Japan"

// オブジェクトのキー取得
console.log(Object.keys(obj)); // ["name", "age", "country"]

// オブジェクトの値取得
console.log(Object.values(obj)); // ["Yuto", 26, "Japan"]

// オブジェクトのキーと値を両方取得
console.log(Object.entries(obj)); // [["name", "Yuto"], ["age", 26], ["country", "Japan"]]

プロパティ更新

記法はプロパティ追加と同じですが、更新の場合は、キーが追加するオブジェクトに存在することが条件です。

// オブジェクト作成
const obj = {
    name: "Yuto",
    age: 26,
    country: "Japan"
};

// プロパティ更新(ドット記法)
obj.age = 27;
console.log(obj); // { age: 27, country: "Japan", name: "Yuto" }

// プロパティ更新(ブラケット記法)
obj["age"] = 27;
console.log(obj); // { age: 27, country: "Japan", name: "Yuto" }

プロパティ削除

オブジェクトからプロパティを削除する場合は、delete obj.キーもしくはdelete obj["キー"]と記述します。

// オブジェクト作成
const obj = {
    name: "Yuto",
    age: 26,
    country: "Japan"
};

// プロパティ削除(ドット記法)
delete obj.country;
console.log(obj); // { age: 26, name: "Yuto" }

// プロパティ削除(ブラケット記法)
delete obj["country"];
console.log(obj); // { age: 26, name: "Yuto" }

プロパティ存在チェック

in演算子("キー" in obj)を用いることによって、オブジェクトにプロパティが存在するか否かをチェックできます。

// オブジェクト作成
const obj = {
    id: 1,
    name: "Yuto",
    age: 26
};

// プロパティ存在チェック
console.log("name" in obj); // true
console.log("address" in obj); // false