JavaScriptで一致部分一致存在チェックのメソッド全解説!
「JavaScriptの検索で使えるメソッドをまとめて教えて欲しい」
「メソッドをいちいち調べるのはめんどくさいな。。」
「検索についてどれだけのことを知ればいいんだろう?」
今回はこのような悩みを持っている人に対して記事を書いています。
この記事では、JavaScriptの検索で使えるメソッドはいくつもある中で、よく使うメソッドを整理して紹介していこうと思います。
この記事を読むことによって、JavaScriptの検索で使えるメソッドを一通り知ることができるようになるでしょう。
実際に自分の環境で動くことを確認したコードを一緒に紹介しています。
ぜひ、自身の環境でも実行して試してみてください。
目次(クリックで読みたい部分にジャンプできます)
最初に一致した要素の番号を取得〜indexOf〜
indexOfは、配列内で最初に一致した要素が何番目かを取得します。
文法と、実際に数を当てはめた場合を紹介します。
let 一致した添字 = 配列.indexOf( 存在確認したい値 )
実査に使ってみると、、、
const fruits = ["banana", "orange", "grape"];
const found = fruits.indexOf("grape");
console.log(found);
> 2
特定の条件の要素を取得〜filter〜
filterメソッドは、引数の関数がtrueの時の、配列の要素のみを取得して、新しい配列を作成します。
例えば、以下のように、関数を指定しその結果が「true」になるもののみを抽出するイメージです。
const array = [1,2,3,4,5]
function gt3(value){
return value > 2;
}
const newArray = array.filter(gt3);
console.log(newArray);
> [3,4,5]
関数で判断することができるので、filterは応用が効きやすいよ!
○〜○番目の要素を取得〜slice〜
sliceメソッドは、「開始位置」と「終了位置」を指定して、その間の要素をから、配列を作成します。
sliceメソッドを使うと、元の配列には影響を及ぼしません。
配列の○番目以降を取得したいという場合に有効です。
let 切り取られた配列 = 元の配列.slice([開始位置 , 終了位置]);
実際に数字を当てはめて使ってみると。
const fruits = [ "banana", "orange", "grape"];
const newfruits = fruits.slice(1,2);
console.log(newFruits);
> ["orange"]
次で紹介する「splice」メソッドが少し似ているので、混同しないようにしよう。
もし、後ろから○番目の要素を取得したいという場合は、.reverse 関数を配列に使ってから、.sliceメソッドを使うといいよ!
値が存在するかチェック〜includes〜
includesメソッドは、配列内の要素が存在するかを確認できます。
includesメソッドが、存在チェックの王道として使われるメソッドの一つとなります。
let 真偽値 = 配列.includes(存在確認したい値);
返り値が真偽値ってことは、true か falseになるんだね!
実際に使ってみると以下のようになります。
const fruits = ["banana", "orange", "grape"]
const found = fruits.includes("grape");
console.log(found)
> true
次の2つも真偽値で返すものになるよ!全体一致と部分一致だね!
全ての要素の値が一致するか〜every〜
everyメソッドは、全ての要素が、引数の関数に当てはまるかどうかをテストします。
配列内の全ての要素が一致したら、trueを返して、一つでも違うものがあったらfalseを返します。
let 結果 = 配列.every((value, index, array) => {
return 真偽値
}[,_this];
コールバック関数に慣れていなければ、普通の関数を用いる形でも大丈夫です。
const army = [1,2,3,4,5]
function gt2(value) = {
return value > 0
}
const result1 = army.every(value => value > 0)
console.log(result1);
>true
const result2 = army.every(gt2)
cosole.log(result2)
> true
一部の要素の値が一致するか〜some〜
someメソッドは、少なくとも1つの値がコールバック関数で実装された条件でtrueとなるかどうかをテストします。
let 結果 = 配列.some((value, index, array) => {
return 真偽値
}[,_this]
実際に数を当てはめてみると、
const arry = [1,2,3,4,5];
const result = army.some(value => value > 4);
console.log(result);
> true
条件を満たす最初の要素を取得〜find〜
findメソッドは、コールバック関数の条件を満たした最初の値を返します。
let 条件を満たす最初の値 = 配列.find(( value, index, array) => {
return 真偽値
}[,_this]
実際に数を当てはめてみると
const array = [1,2,7,8,9];
const result = array.find(value => value > 2);
console.log(result);
> 7
まとめ
今回は、JavaScriptの検索のメソッドをまとめて紹介しました。
また、追加、削除についても以下の記事で紹介しています。合わせてご覧ください。