JavaScriptオブジェクト削除マスター！実践的5選+応用例4選

はじめに
●JavaScriptオブジェクト削除の基本
●オブジェクト削除の実践的使い方5選
●オブジェクト削除の応用例4選
まとめ

はじめに

この記事を読めば、JavaScriptでオブジェクトを効率的に削除する方法が身に付くでしょう。

実践的な使い方や応用例、注意点もしっかり解説しますので、ぜひ参考にしてください。

●JavaScriptオブジェクト削除の基本

オブジェクトの削除には、主にdelete演算子を使います。

○delete演算子

delete演算子は、オブジェクトのプロパティを削除するために使用されます。

また、配列から要素を削除することもできますが、インデックスは変更されません。

○サンプルコード1：オブジェクトのプロパティを削除する

const obj = {
  name: "John",
  age: 30,
  city: "New York"
};

delete obj.age; // 'age'プロパティを削除

console.log(obj); // {name: "John", city: "New York"}

○サンプルコード2：配列から要素を削除する

const arr = [1, 2, 3, 4, 5];

delete arr[2]; // インデックス2の要素を削除

console.log(arr); // [1, 2, , 4, 5]

●オブジェクト削除の実践的使い方5選

ここでは、オブジェクト削除の実践的な使い方を5つ紹介します。

○サンプルコード3：オブジェクトから特定のプロパティを一括削除

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5
};

const keysToDelete = ['b', 'd', 'e'];

keysToDelete.forEach((key) => {
  delete obj[key];
});

console.log(obj); // {a: 1, c: 3}

○サンプルコード4：オブジェクト内の空のプロパティを削除する

const obj = {
  a: "",
  b: "hello",
  c: null,
  d: "world"
};

for (const key in obj) {
  if (!obj[key]) {
    delete obj[key];
  }
}

console.log(obj); // {b: "hello", d: "world"}

○サンプルコード5：オブジェクト内の特定の値を持つプロパティを削除

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 2,
  e: 4
};

const valueToDelete = 2;

for (const key in obj) {
  if (obj[key] === valueToDelete) {
    delete obj[key];
  }
}

console.log(obj); // {a: 1, c: 3, e: 4}

○サンプルコード6：オブジェクトを浅いコピーしてから削除

const originalObj = {
  a: 1,
  b: 2,
  c: 3
};

const copiedObj = { ...originalObj }; // オブジェクトの浅いコピーを作成
delete copiedObj.b; // 'b'プロパティを削除

console.log(originalObj); // {a: 1, b: 2, c: 3}
console.log(copiedObj); // {a: 1, c: 3}

○サンプルコード7：条件に合ったオブジェクトを配列から削除

const arr = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

const idToDelete = 2;
const newArr = arr.filter(obj => obj.id !== idToDelete);

console.log(newArr); // [{id: 1, name: "Alice"}, {id: 3, name: "Charlie"}]

●オブジェクト削除の応用例4選

ここでは、オブジェクト削除の応用例を4つ紹介します。

○サンプルコード8：再帰的にオブジェクト内の特定プロパティを削除

function deepDelete(obj, keyToDelete) {
  for (const key in obj) {
    if (key === keyToDelete) {
      delete obj[key];
    } else if (typeof obj[key] === "object") {
      deepDelete(obj[key], keyToDelete);
    }
  }
}

const nestedObj = {
  a: 1,
  b: { c: 2, d: { e: 3 } },
  f: { g: 4 }
};

deepDelete(nestedObj, "d");

console.log(nestedObj); // {a: 1, b: {c: 2}, f: {g: 4}}

○サンプルコード9：Mapオブジェクトでオブジェクトを管理

const map = new Map([
  ["a", { id: 1, name: "Alice" }],
  ["b", { id: 2, name: "Bob" }],
  ["c", { id: 3, name: "Charlie" }]
]);

map.delete("b"); // 'b'キーの要素を削除

console.log(map); // Map(2) {"a" => {id: 1, name: "Alice"}, "c" => {id: 3, name: "Charlie"}}

○サンプルコード10：オブジェクトのプロパティをフィルタリング

function filterObject(obj, predicate) {
  return Object.fromEntries(
    Object.entries(obj).filter(([key, value]) => predicate(key, value))
  );
}

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};

const filteredObj = filterObject(obj, (key, value) => value % 2 === 0);

console.log(filteredObj); // {b: 2, d: 4}

○サンプルコード11：オブジェクトのプロパティを条件に従って変更

function updateObject(obj, updateFn) {
  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [key, updateFn(key, value)])
  );
}

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};

const updatedObj = updateObject(obj, (key, value) => {
  if (value % 2 === 0) {
    return value * 2;
  }
  return value;
});

console.log(updatedObj); // {a: 1, b: 4, c: 3, d: 8}