配列内の検索・判定・判別をするJavaScriptのメソッド(find, some, every, includes)を解説~初心者~中級者向け

JavaScript

上記に挙げたように配列(Array)の判定や判別には5種類のJavaScriptのメソッドが便利です。

例えば[3, 4, 6, 777, 8192]のような配列があった場合、6以下の数値は要素として存在するか?という命題を、自動で判別するにはsome()メソッドを使ったりします。

実際にはこんなに短い配列ではなく、巨大で目視に堪えないような大きな配列で使うケースが多いです。それに加え、配列はいつも固定ではありませんから(サンプルコードだとほぼ固定なので要素の判定を自動でするという恩恵が分かりにくいです)どんな要素が入れられるのかはランダムだと考えると、とてもじゃないけどsome()で判別するほかない状況に置かれます。

some()だけではありません。every()include()も、膨大な配列や、桁数の多い数字の存在の有無をチェックするために必要不可欠になります。

では、各メソッドについて一つづつ見ていきましょう。

isArray()メソッド – 配列オブジェクトか判別

Array.isArray()は引数がArrayオブジェクト(配列型)であればtrue、そうでなければfalseを返します。

使い方は単純で、引数にオブジェクトを入れてあげるだけです。Array.isArray(オブジェクト)という型になります。オブジェクトがArray型かどうか、ってことですね。

サンプルコード

Array.isArray([]); // true
Array.isArray([1]); // true
Array.isArray(new Array()); // true
Array.isArray(new Array('a', 'b', 'c', 'd')); // true
Array.isArray(new Array(3)); // true

Array.isArray(); // false ※引数が空なのでfalse
Array.isArray({}); // false ※{}ではなく[]が配列オブジェクトを表すためfalse
Array.isArray(null); // false
Array.isArray(undefined); // false
Array.isArray(17); // false ※引数がint型なのでfalse
Array.isArray('Array'); // false ※引数が文字列なのでfalse
Array.isArray(true); // false ※引数がboolean型なのでfalse
Array.isArray(false); // false ※同上

find()メソッド – 条件を満たす値を取得

find()メソッドはその名の通り配列内に条件に合う値を探す(走査する)関数です。条件を満たす値があればその値を返します。

使い方は、配列オブジェクト.find(コールバック関数(要素値))のように記述します。サンプルを見た方が分かりやすいので次の例をご覧ください。

let sampleArray = [3, 4, 6, 777, 8192];

let findSample = sampleArray.find(function(e){
  return e > 800;
});
console.log(findSample); // 8192

最初に定義した配列オブジェクトのsampleArrayの中身が800より大きい場合に、要素の数字を表示するコードです。上記の例では「8192」が(最初に)該当するので、コンソール上に8192と出力されます。

このサンプルの悪いところは、条件にマッチした最初の値しか返さないところです。returnを使ってしまうとそこで関数は終了しますからね。findは暗黙的にループを行うため、forEach等のループ処理は不要なので注意しましょう

で、この配列の中に複数の値が条件にヒットするときはどういった書き方をしたらよいでしょうか。ちょっとやってみましょう。

let sampleArray = [3, 4, 6, 777, 8192, 65536];

let findSample = sampleArray.find(function(e){
  if(e > 800){
    console.log(e); // 8192 に続いて 65536 が出力される
  }
})

後者の方がよく使うパターンかもしれません。もしかしたら取得した値を再度配列に入れて、条件に合った値だけの配列を返すような処理が実用的かもしれませんね。例えばこんな感じで。

let sampleArray = [3, 4, 6, 777, 8192, 65536];
let newMatchedArray = []; // 条件に合致する値を入れるための配列

let findSample = sampleArray.find(function(e, index){
  if(e > 800){
    newMatchedArray.push(e); // 条件にマッチしたら配列に入れる
  }
  if(index == sampleArray.length - 1){ // 元の配列の最後まで走査したらreturnで新しい配列を返す
    return newMatchedArray;
  }
})
console.log(newMatchedArray); // [8192, 65536] がコンソールに出力される

補足しておくと、.find(function(要素, インデックス){......のようにコールバック関数の第二引数にはインデックス値を入れることが出来るので、関数内で順番の操作や確認も出来ます。ちなみに第三引数にはArrayオブジェクトを突っ込むことも可能ですが、ほとんど使う機会がなさそうなので、出来るよってことだけ押さえておいてください。

some()メソッド – 条件を満たす要素がひとつでもあるか判定

some()メソッドは少しややこしいかもしれませんが、機能としては条件を満たす要素がひとつでもあるかどうかを判別する関数です。従ってtrueかfalseのboolean型しか返ってきません。あればtrue、なければfalseという感じです。

ややこしいと言ったのは、some()メソッドにはアロー関数がもれなくついてくることが多いという点です。次の例をご覧ください。

サンプルコード

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(arr.some(value => value < 6)); // true が出力される

console.log(arr.some(value => value > 10.5)); // false が出力される

ちょっとぶっきらぼうなサンプルコードですのでもう少し砕いて記載してみます。

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let checkLower10 = arr.some(value => value < 10); // true が出力される
console.log(checkLower10);

// ちなみに上記の「value」ですが「v」でも「e」でも構いません。便宜上にvalueと記述しています。
let checkLower10 = arr.some(e => e < 10); // true が出力される
console.log(checkLower10);

let checkUpper10 = arr.some(value => value > 10); // false が出力される
console.log(checkUpper10);

多少は認識しやすくなったでしょうか。例の通り合致するものがあればtrue、合致するものが無ければfalseが返ってきます。

アロー関数を使わない場合はどう書けばよいのでしょうか?次のサンプルをご確認ください。

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function isUpper8(element) {
  return element > 8;
}

console.log(arr.some(isUpper8));

うーん、明らかにアロー関数を使った方がステップ数が少なくてスッキリはしますね。この機会にアロー関数を理解しておいて、色んなメソッドに対応出来るようにしておくと、世界が広がるかもしれません。是非アロー関数で書けるようにしておきましょう。

アロー関数式については別途記事を作成していますので下記を参照ください。

every()メソッド – 全要素が条件を満たすか判定

配列内の要素がすべて条件が合致するかどうかを判定するメソッドです。せっかくなのでアロー関数で練習しておきましょう。

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let checkUpper4 = arr.every(e => e > 4);
console.log(checkUpper4); // 全要素が4より大きいわけではないのでfalseになる

includes()メソッド

これは難しくありません。アロー関数も使わないですし、単純に指定した値が配列内に存在するか(含まれているか)のチェックに使います。

let sampleArray = [3, 4, 6, 777, 8192, 65536];

let isIncluded = sampleArray.includes(777);
console.log(isIncluded); // 777 は配列に含まれている(インクルードされている)のでtrueが返る

どちらかというと、Array.isArray()メソッドに似ていますね。そんなに引っかかる箇所はないので、こういうことも出来るよ、ってことで覚えておいてください。絶望的に長い配列の時に、要素があるかどうかを検知するために使います。非常に効率的に調べることが出来るのでおすすめです。(まさか目視とかCtrl+Fとかしてませんよね……?笑)

参考文献

JavaScript 第7版 単行本(ソフトカバー) – 2021/12/2

タイトルとURLをコピーしました