読み込み中...

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

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

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

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

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

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

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

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

はじめに

JavaScriptでオブジェクトを効率的に削除する方法をマスターすれば、プログラミングスキルが大幅に向上します。

本記事では、実践的な使い方や応用例、注意点を詳細に解説します。

初心者の方でも理解しやすいよう、段階的に説明していきますので、ぜひ最後までお付き合いください。

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

JavaScriptにおけるオブジェクト削除の基本を押さえておくことは、効率的なコーディングの第一歩となります。

ここでは、主要な削除方法について解説します。

○delete演算子

delete演算子は、オブジェクトのプロパティを取り除くための基本的な道具です。

この演算子を使用すると、オブジェクトから特定のプロパティを完全に消し去ることができます。

また、配列の要素を取り除くこともできますが、その場合はインデックスが変更されないという特徴があります。

それでは、具体的な使用例を見ていきましょう。

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

オブジェクトから特定のプロパティを削除する方法を示します。

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

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

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

このコードでは、objオブジェクトからageプロパティを削除しています。

結果として、ageプロパティが完全に取り除かれたオブジェクトが得られます。

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

次に、配列から要素を削除する方法を見てみましょう。

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

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

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

このコードでは、arr配列のインデックス2の要素を削除しています。

注意すべき点は、削除後も配列の長さは変わらず、削除された要素の位置には空の要素（undefined）が残ることです。

●オブジェクト削除の実践的使い方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}

このコードでは、削除したいプロパティのキーを配列で指定し、forEachメソッドを使って一括削除を行っています。

○サンプルコード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"}

このコードでは、for...inループを使用してオブジェクトのすべてのプロパティをチェックし、空（falsy）の値を持つプロパティを削除しています。

○サンプルコード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}

このコードでは、値が2であるプロパティを全て削除しています。

○サンプルコード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"}]

このコードでは、filterメソッドを使用して、特定のidを持つオブジェクトを除外した新しい配列を作成しています。

●オブジェクト削除の応用例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オブジェクトでオブジェクトを管理

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"}}

このコードでは、Mapオブジェクトを使用してキーと値のペアを管理し、deleteメソッドで特定のキーを持つ要素を削除しています。

○サンプルコード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}

このコードでは、Object.entries()とObject.fromEntries()を組み合わせて、条件に合うプロパティだけを含む新しいオブジェクトを作成しています。

○サンプルコード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}

このコードでは、条件に基づいてオブジェクトの値を更新しています。

偶数の値を2倍にする例を表していますが、この方法を応用すれば、さまざまな条件での更新が可能です。

まとめ

本記事では、JavaScriptでオブジェクトを削除する様々な方法について詳しく解説しました。

基本的なdelete演算子の使い方から始まり、実践的な使用例、そして高度な応用例まで幅広く取り上げました。

この技術を適切に使いこなすことで、効率的でメンテナンス性の高いコードを書くことができます。

オブジェクト操作は日々の開発で頻繁に行われる作業です。

ここで学んだ手法を実際のプロジェクトで活用し、さらなるスキルアップにつなげてください。