JavaScriptで配列から空要素を削除：filter、forEach、lengthなど7つの方法
JavaScriptで配列から空要素を削除する方法
filter() メソッドは、配列の各要素をテストし、テストに合格した要素のみを含む新しい配列を作成します。空要素はテストに不合格となるため、新しい配列には含まれません。
const arr = [1, 2, "", 4, null, undefined];
const filteredArr = arr.filter(element => element);
console.log(filteredArr); // [1, 2, 4]
上記の例では、element が空文字、null、または undefined 以外であれば、filter() メソッドは true を返し、新しい配列に要素を含めます。
利点:
- 簡潔で分かりやすいコード
- すべての空要素を効率的に削除できる
- 新しい配列が作成されるため、メモリ使用量が少し増える
forEach() メソッドと splice() メソッドを使う
forEach() メソッドは、配列の各要素に対して処理を実行します。この処理の中で、splice() メソッドを使って空要素を削除することができます。
const arr = [1, 2, "", 4, null, undefined];
let i = 0;
arr.forEach(element => {
if (!element) {
arr.splice(i, 1);
} else {
i++;
}
});
console.log(arr); // [1, 2, 4]
上記の例では、forEach() メソッドを使って配列の各要素を処理し、空要素であれば splice() メソッドを使って削除しています。
filter()メソッドよりもコードが冗長になる
配列の length プロパティは、配列の要素数を表します。このプロパティを使って、空要素を削除することができます。
const arr = [1, 2, "", 4, null, undefined];
while (arr.length) {
if (!arr[arr.length - 1]) {
arr.length--;
} else {
break;
}
}
console.log(arr); // [1, 2, 4]
上記の例では、while ループを使って配列の最後の要素をチェックし、空要素であれば length プロパティを減らして削除しています。
- 他の方法よりもシンプルで軽量
- 配列の要素数が少ない場合にのみ効率的
その他の方法
上記以外にも、ライブラリやフレームワークを使って空要素を削除する方法があります。
- Lodash.js の
_.compact()メソッド - Underscore.js の
_.without()メソッド - jQuery の
$.grep()メソッド
これらのライブラリやフレームワークを使う場合は、事前にライブラリの読み込みが必要です。
JavaScriptで配列から空要素を削除するには、いくつかの方法があります。それぞれの特徴と使い分けを理解し、状況に応じて適切な方法を選択しましょう。
JavaScriptで配列から空要素を削除するサンプルコード
filter() メソッドを使う
const arr = [1, 2, "", 4, null, undefined];
const filteredArr = arr.filter(element => element);
console.log(filteredArr); // [1, 2, 4]
forEach() メソッドと splice() メソッドを使う
const arr = [1, 2, "", 4, null, undefined];
let i = 0;
arr.forEach(element => {
if (!element) {
arr.splice(i, 1);
} else {
i++;
}
});
console.log(arr); // [1, 2, 4]
配列の length プロパティを使う
const arr = [1, 2, "", 4, null, undefined];
while (arr.length) {
if (!arr[arr.length - 1]) {
arr.length--;
} else {
break;
}
}
console.log(arr); // [1, 2, 4]
const arr = [1, 2, "", 4, null, undefined];
const compactedArr = _.compact(arr);
console.log(compactedArr); // [1, 2, 4]
const arr = [1, 2, "", 4, null, undefined];
const withoutEmptyArr = _.without(arr, "", null, undefined);
console.log(withoutEmptyArr); // [1, 2, 4]
const arr = [1, 2, "", 4, null, undefined];
const grepArr = $.grep(arr, element => element);
console.log(grepArr); // [1, 2, 4]
これらのサンプルコードを参考に、状況に応じて適切な方法を選択して、JavaScriptで配列から空要素を削除してください。
JavaScriptで配列から空要素を削除するその他の方法
reduce() メソッドは、配列の要素を累積的に処理し、単一の値にまとめます。この方法では、空要素を無視して新しい配列を作成することができます。
const arr = [1, 2, "", 4, null, undefined];
const filteredArr = arr.reduce((acc, element) => {
if (element) {
acc.push(element);
}
return acc;
}, []);
console.log(filteredArr); // [1, 2, 4]
上記の例では、reduce() メソッドを使って空要素を無視して新しい配列を作成しています。
some() メソッドと filter() メソッドを使う
some() メソッドは、配列の要素がすべて条件を満たすかどうかを判定します。この方法では、空要素を含むかどうかを判定し、空要素を含まない新しい配列を作成することができます。
const arr = [1, 2, "", 4, null, undefined];
const filteredArr = arr.filter(element => !arr.some(el => !el));
console.log(filteredArr); // [1, 2, 4]
上記の例では、some() メソッドを使って空要素を含むかどうかを判定し、filter() メソッドを使って空要素を含まない新しい配列を作成しています。
- コードが少し複雑になる
filter() メソッドと length プロパティを使って、空要素を削除することができます。
const arr = [1, 2, "", 4, null, undefined];
const filteredArr = arr.filter(element => element).length;
console.log(filteredArr); // 4
上記の例では、filter() メソッドを使って空要素を除去し、length プロパティを使って空要素を除去した後の配列の要素数を取得しています。
- コードが少し分かりにくい
テンプレートリテラルを使って、空要素を削除することができます。
const arr = [1, 2, "", 4, null, undefined];
const filteredArr = [...arr.filter(element => element)];
console.log(filteredArr); // [1, 2, 4]
javascript arrays
