Array.prototype.filter を拡張して配列からnullを取り除く

2024-04-02

TypeScriptで配列からnullを取り除く

filter メソッドは、配列の各要素に対して条件を評価し、条件に合致する要素のみを含む新しい配列を生成します。nullを取り除くには、v !== null という条件を指定します。

const arr = [1, null, 2, null, 3];
const filteredArr = arr.filter(v => v !== null);
console.log(filteredArr); // [1, 2, 3]

reduce メソッドは、配列の各要素を累積的に処理し、単一の値に集約します。nullを取り除くには、null 以外の要素を新しい配列に追加していくように処理します。

const arr = [1, null, 2, null, 3];
const filteredArr = arr.reduce((acc, v) => {
  if (v !== null) {
    acc.push(v);
  }
  return acc;
}, []);
console.log(filteredArr); // [1, 2, 3]

Array.prototype.filter メソッドを拡張することで、nullを取り除く処理をより簡潔に記述できます。

Array.prototype.filterNotNull = function() {
  return this.filter(v => v !== null);
};

const arr = [1, null, 2, null, 3];
const filteredArr = arr.filterNotNull();
console.log(filteredArr); // [1, 2, 3]

型ガードを使う

TypeScript 4.0以降では、型ガードを使ってnullを取り除くことができます。

const arr: (number | null)[] = [1, null, 2, null, 3];
const filteredArr = arr.filter(v: number | null): v is number => v !== null;
console.log(filteredArr); // [1, 2, 3]

これらの方法のいずれでも、配列からnullを取り除くことができます。自分に合った方法を選択してください。

filter メソッド
reduce メソッド
Array.prototype.filter の拡張
型ガード

これらの方法を使って、TypeScriptで配列からnullを取り除くことができます。

const arr: (string | null)[] = ["a", null, "b", null, "c"];

// 1. `filter` メソッドを使う
const filteredArr1 = arr.filter(v => v !== null);
console.log(filteredArr1); // ["a", "b", "c"]

// 2. `reduce` メソッドを使う
const filteredArr2 = arr.reduce((acc, v) => {
  if (v !== null) {
    acc.push(v);
  }
  return acc;
}, []);
console.log(filteredArr2); // ["a", "b", "c"]

// 3. `Array.prototype.filter` を拡張する
Array.prototype.filterNotNull = function() {
  return this.filter(v => v !== null);
};
const filteredArr3 = arr.filterNotNull();
console.log(filteredArr3); // ["a", "b", "c"]

// 4. 型ガードを使う
const filteredArr4 = arr.filter(v: string | null): v is string => v !== null;
console.log(filteredArr4); // ["a", "b", "c"]

実行結果

["a", "b", "c"]
["a", "b", "c"]
["a", "b", "c"]
["a", "b", "c"]

Array.prototype.find と Array.prototype.indexOf を使う

Array.prototype.find メソッドは、条件に合致する最初の要素を返します。Array.prototype.indexOf メソッドは、要素の最初の出現位置を返します。これらのメソッドを使って、nullではない要素のみを含む新しい配列を作成できます。

const arr = [1, null, 2, null, 3];
const filteredArr = [];
let i = 0;
while ((i = arr.find((v, idx) => v !== null, i)) !== -1) {
  filteredArr.push(arr[i]);
  i++;
}
console.log(filteredArr); // [1, 2, 3]

for ループを使う

単純な方法として、for ループを使ってnullではない要素のみを含む新しい配列を作成できます。

const arr = [1, null, 2, null, 3];
const filteredArr = [];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] !== null) {
    filteredArr.push(arr[i]);
  }
}
console.log(filteredArr); // [1, 2, 3]