条件によって返す配列の値が変わるメソッドをまとめる。

はじめに

配列の値をある条件によって変化させるメソッドがたくさんありすぎて混乱してきたので一度まとめてみました。

条件に合致する値のみを配列として返す（filter）

その名の通り、指定した条件に合う値のみを配列として返します。検索機能の実装の際によく使うメソッドで、大変お世話になっております。

const num = [1, 2, 3, 4, 5, 6];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//3以上の値を返す
const filterNum = num => {
  return num.filter(el => el > 3);
}

//出力：[4, 5, 6]
console.log(filterNum(num));

文字列の場合は完全一致が前提。
※indexOfと組み合わせれば部分一致に対応することも可能です。

const num = [1, 2, 3, 4, 5, 6];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//一致する文字列を返す
const filterNum = num => {
  return num.filter(el => el === "apple");
}

//出力：["apple"]
const result = filterNum(fruits);
console.log(result);

条件に一致する最初の値のindexを返す（findIndex）

配列を前から順番に見ていき条件に合う値最初の値のindexを返します。

条件に合う値のindexを特定して、そのindexを起点にsliceで値を取ってきたり、spliceで値を追加・削除したりする際に便利です。

const num = [1, 2, 3, 4, 5, 6];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//peachのindexを返す（存在しない場合は-1を返します）
const filterFruits = fruits => {
  return fruits.findIndex(el => el === "peach");
}

//出力：3
const result = filterFruits(fruits);
console.log(result);

注意：似たメソッドでindexOfがありますが、こちらはStringメソッドです。

条件に一致する最初の値を返す（find）

配列を前から順番に見ていく点は上記のfindIndexと同じ。ただし、返す値が今回はindexではなく値です。

const num = [11, 2, 13, 44, 5, 76];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//配列を順番に見て12を超える最初の数字を返す
const filterNum = num => {
  return num.find(el => el > 12);
}

//出力：13
const result = filterNum(num);
console.log(result);

条件に一致する値が配列内に一つでもあるか真偽値を返す（some）

こちらは配列内の値で指定の条件に一つでも当てはまればtrueを返すメソッドです。いくつかの条件の内一つでも合格なら良いみたいな式で使えるのでしょうか？（すいません、良い例が思いつきませんでした。。）

const num = [11, 2, 13, 44, 5, 76];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//75以上の数字が一つでも含まれていればtrueを返す
const filterNum = num => {
  return num.some(el => el > 75);
}

//76が存在するので
//出力：true
const result = filterNum(num);
console.log(result);

someと似たメソッドでincludesがあります。一見同じ動きに見えるこれらの違いは下記の記事でわかりやすくまとまっていました。

配列内の全ての値が条件に一致するか真偽値を返す（every）

everyは配列内の値全てが指定の条件を満たす場合のみtrueを返します。someが一つでもOKだったのに対してeveryはより厳格です。

使い所としてはフォームのバリデーションなどでしょうか？

const num = [11, 2, 13, 44, 5, 76];
const fruits = ["apple", "orange", "grape", "peach", "mango", "blueberry"];

//配列内全ての文字列が4文字以上であればtrueを返す
const filterfruits = fruits => {
  return fruits.every(el => el.length > 4);
}

//出力：true
const result = filterfruits(fruits);
console.log(result);

さいごに

今回は配列の値を調べて返すメソッドをご紹介しました。ただこれらの配列を組み合わせることでできることは他にもたくさんあります。またそれらの組み合わせについてもまとめていきたいと思います。