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

JavaScriptオブジェクト削除のイメージJS
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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}

まとめ

この記事では、JavaScriptでオブジェクトを削除する方法を紹介しました。

具体的には、delete演算子の使用方法、オブジェクト削除の実践的な使い方、応用例を見てきました。

これらの知識を活用して、JavaScriptでオブジェクトを効率的に操作することができるようになります。