JavaScriptで配列の要素を検索したい！
ですが、ひとえに検索といえど方法がいっぱいあります。
私が見つけた限り、全部で9つの配列を検索できるメソッドがありました。
ということで、それらをまとめてみました！
目次から目当てのメソッドを見つけてください。
↓ ↓ ↓ ↓
9つの配列を検索する方法
検索メソッドは以下の９つあります。
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// 1. find: 条件を満たす最初の要素を返す
const find = array.find((num) => num > 3);
console.log(find); // 4
// 2. filter: 条件を満たす全ての要素で新しい配列を生成
const filter = array.filter((num) => num > 3);
console.log(filter); // [4, 5, 4]
// 3. findIndex: 条件を満たす最初の要素のindexを返す
const findIndex = array.findIndex((num) => num > 3);
console.log(findIndex); // 3
// 4. indexOf: 指定した要素と同じ内容の最初の要素のindexを返す
const indexOf = array.indexOf(3);
console.log(indexOf); // 2
// 5. lastIndexOf: 指定した要素と同じ内容の最後の要素のindexを返す
const lastIndexOf = array.lastIndexOf(3);
console.log(lastIndexOf); // 6
// 6. some: 少なくとも１つの要素が条件を満たすかチェック
const some = array.some((num) => num > 3);
console.log(some); // true
// 7. every: 全ての要素が条件を満たすかチェック
const every = array.every((num) => num > 3);
console.log(every); // false
// 8. includes: 指定した要素が含まれているかチェック
const includes = array.includes(3);
console.log(includes); // true
// 9. in演算子: 指定した要素が含まれているかチェック
const inOperator = 3 in array;
console.log(inOperator); // trueそれぞれのメソッドをまとめます。
要素や配列を返すメソッド
1. find: 条件を満たす最初の要素を返す
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const find = array.find((num) => num > 3);
console.log(find); // 4
配列の要素を検索して、条件にマッチした最初の要素を返します。
複数の要素が条件に合致していても一番最初の要素のみヒットしますので、注意が必要です。
参考：Array.prototype.find() – JavaScript | MDN
2. filter: 条件を満たす全ての要素で新しい配列を生成
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const filter = array.filter((num) => num > 3);
console.log(filter); // [4, 5, 4]配列内の条件に合致する要素全てを新しい配列として生成します。
全てを検索したい場合に活用できます。
参考：Array.prototype.filter() – JavaScript | MDN
index(配列の位置)を返すメソッド
3. findIndex: 条件を満たす最初の要素のindexを返す
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const findIndex = array.findIndex((num) => num > 3);
console.log(findIndex); // 3
条件を満たした最初の要素の配列内でのindex(位置)を返します。
見つからない場合は-1を返します。
参考：Array.prototype.findIndex() – JavaScript | MDN
4. indexOf: 指定した要素と同じ内容の最初の要素のindexを返す
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const indexOf = array.indexOf(3);
console.log(indexOf); // 2指定した値が配列内に存在する場合は、ヒットした最初の要素のindexを返します。
見つからない場合は-1を返します。
参考：Array.prototype.indexOf() – JavaScript | MDN
5. lastIndexOf: 指定した要素と同じ内容の最後の要素のindexを返す
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const lastIndexOf = array.lastIndexOf(3);
console.log(lastIndexOf); // 6
指定した値が配列内に存在する場合は、ヒットした最後の要素のindexを返します。
見つからない場合は-1を返します。
複数ヒットした場合、一番最後の要素のindexになります。indexOfとは異なりますので気をつけてください。
参考：Array.prototype.lastIndexOf() – JavaScript | MDN
boolean(true/false)を返すメソッド
6. some: 少なくとも１つの要素が条件を満たすかチェック
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const some = array.some((num) => num > 3);
console.log(some); // true
条件に合致する要素が一つでも存在すればtrue、それ以外の場合はfalseが返ります。
if文などで活用できます。
参考：Array.prototype.some() – JavaScript | MDN
7. every: 全ての要素が条件を満たすかチェック
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const every = array.every((num) => num > 3);
console.log(every); // false
全ての要素が条件に合致すればtrue、それ以外の場合はfalseが返ります。
someとは違い、すべて合致しないとtrueになりません。
参考：Array.prototype.every() – JavaScript | MDN
8. includes: 指定した要素が含まれているかチェック
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const includes = array.includes(3);
console.log(includes); // true
指定した値が配列内に存在する場合にtrue、それ以外の場合はfalseが返ります。
参考：Array.prototype.includes() – JavaScript | MDN
9. in演算子: 指定した要素が含まれているかチェック
const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const inOperator = 3 in array;
console.log(inOperator); // true
in演算子はオブジェクト内に指定したプロパティが存在する場合にtrue、存在しない場合はfalseを返します。
参考：in() – JavaScript | MDN
コメント