迷ったらコレ！TypeScriptで配列の要素を削除するベストプラクティス

2024-04-02

TypeScriptで配列の要素を削除する方法

shift() メソッドは、配列の先頭の要素を削除し、その要素を返します。

const fruits = ["apple", "banana", "orange"];

// 先頭の要素 "apple" を削除
const removedFruit = fruits.shift();

console.log(fruits); // ["banana", "orange"]
console.log(removedFruit); // "apple"

const fruits = ["apple", "banana", "orange"];

// 末尾の要素 "orange" を削除
const removedFruit = fruits.pop();

console.log(fruits); // ["apple", "banana"]
console.log(removedFruit); // "orange"

splice() メソッドは、配列の指定された位置から要素を削除できます。

const fruits = ["apple", "banana", "orange", "grape"];

// 2番目の要素 "banana" を削除
fruits.splice(2, 1);

console.log(fruits); // ["apple", "orange", "grape"]

splice() メソッドは、要素の削除だけでなく、挿入や置換にも使用できます。

filter() メソッドは、条件に一致する要素を除外した新しい配列を作成します。

const fruits = ["apple", "banana", "orange", "grape"];

// "a" で始まる要素を除外
const filteredFruits = fruits.filter((fruit) => !fruit.startsWith("a"));

console.log(filteredFruits); // ["banana", "orange", "grape"]

find() メソッドと splice() メソッドを組み合わせて、条件に一致する要素を削除することもできます。

const fruits = ["apple", "banana", "orange", "grape"];

// "orange" という要素を削除
const orange = fruits.find((fruit) => fruit === "orange");
const index = fruits.indexOf(orange);
fruits.splice(index, 1);

console.log(fruits); // ["apple", "banana", "grape"]

TypeScriptで配列の要素を削除するには、さまざまな方法があります。それぞれの方法の特徴と使い分けを理解し、状況に応じて適切な方法を選択することが重要です。

shift() メソッド

const fruits = ["apple", "banana", "orange"];

// 先頭の要素 "apple" を削除
const removedFruit = fruits.shift();

console.log(fruits); // ["banana", "orange"]
console.log(removedFruit); // "apple"

pop() メソッド

const fruits = ["apple", "banana", "orange"];

// 末尾の要素 "orange" を削除
const removedFruit = fruits.pop();

console.log(fruits); // ["apple", "banana"]
console.log(removedFruit); // "orange"

splice() メソッド

const fruits = ["apple", "banana", "orange", "grape"];

// 2番目の要素 "banana" を削除
fruits.splice(2, 1);

console.log(fruits); // ["apple", "orange", "grape"]

filter() メソッド

const fruits = ["apple", "banana", "orange", "grape"];

// "a" で始まる要素を除外
const filteredFruits = fruits.filter((fruit) => !fruit.startsWith("a"));

console.log(filteredFruits); // ["banana", "orange", "grape"]

find() メソッドと splice() メソッド

const fruits = ["apple", "banana", "orange", "grape"];

// "orange" という要素を削除
const orange = fruits.find((fruit) => fruit === "orange");
const index = fruits.indexOf(orange);
fruits.splice(index, 1);

console.log(fruits); // ["apple", "banana", "grape"]

配列の要素を削除するその他の方法

while ループを使用して、削除したい要素を見つけて削除することができます。

const fruits = ["apple", "banana", "orange", "grape"];

// "orange" という要素を削除
let i = 0;
while (i < fruits.length) {
  if (fruits[i] === "orange") {
    fruits.splice(i, 1);
    break;
  }
  i++;
}

console.log(fruits); // ["apple", "banana", "grape"]

const fruits = ["apple", "banana", "orange", "grape"];

// "orange" という要素を削除
for (let i = 0; i < fruits.length; i++) {
  if (fruits[i] === "orange") {
    fruits.splice(i, 1);
    break;
  }
}

console.log(fruits); // ["apple", "banana", "grape"]

reduce() メソッドを使用して、新しい配列を作成し、削除したい要素を除外することができます。

const fruits = ["apple", "banana", "orange", "grape"];

// "orange" という要素を除外した新しい配列を作成
const filteredFruits = fruits.reduce((acc, fruit) => {
  if (fruit !== "orange") {
    acc.push(fruit);
  }
  return acc;
}, []);

console.log(filteredFruits); // ["apple", "banana", "grape"]