[JavaScript]配列から条件に合うインデックスを全て抽出する方法

Contents

ご無沙汰しております
配列から条件に合うインデックスを全て取得する方法
- if分の省略形で書く
- 三項演算子で書く
filter() のいろんな使い方
map() との違い
まとめ

ご無沙汰しております

なんと……

…..

ほぼ一年ぶりのブログ更新になってしまいました。

ここ一年は出産やらその後のドタバタにつき全然更新できなかったんですが、最近職場復帰してまた日々分からないことだらけな毎日が繰り返されているので、

自分の備忘録のためにも、またコツコツ更新してこうかなーと思ってます！

そんなこんなの一年ぶりの本日は、

[JavaScript]配列から条件に合うインデックスを全て取得する方法

について書いていきたいと思います。

前回ブログはこちらから↓

配列から条件に合うインデックスを全て取得する方法

早速ですが、以下コードです。

// 検索対象の配列
const array = [12, 45, 65, 34, 56, 23, 457, 3451, 4233, 34346];

// 条件にあった index を取得するための空の配列
let filterIndex = [];

// 2 で割り切れる要素を抽出する
array.filter((value, index) => {
  if(value % 2 === 0){
    filterIndex.push(index);
  }
});
console.log(filterIndex);  // [0, 3, 4, 9]

filter() を使って、配列 array から2で割り切れる要素のインデックス(index)を全て抽出します。

filter() の第一引数は value (その配列の要素)、第二引数は index (その配列のインデックス、添字)です。

アロー関数を使って上記のように if 文の中で array の要素から2で割り切れるインデックスを配列 filterIndex に push() で追加してきます。

console.log の結果は [0, 3, 4, 9] となり、2で割り切れる「12, 34, 56, 34346」のインデックスが抽出できました。

ちなみに、なんですが、第一引数は value (その配列の要素)、第二引数は indexなので、省略して v, i, とか val とか書いたりしますね。

index を取得したいからと言って、第一引数に array.filter(index => とかやっても index は取れません(笑

↑実際やった人

引数の概念て、難しくないですか？実務最初の頃って、この v とか i とかの意味が全然分からなくて。そこらへん詳しく説明してる記事ってあんまりなくて、みんな頭いいなーって(棒)

if分の省略形で書く

もっとスマートな書き方はないんか…と思ったのですが。

if分の省略形で書くと少しだけすっきりする(あんまり変わってない気もする

// 検索対象の配列
const array = [12, 45, 65, 34, 56, 23, 457, 3451, 4233, 34346];

// 条件にあった index を取得するための空の配列
let filterIndex = [];

// 2 で割り切れる要素を抽出する
array.filter((value, index) => {
  if(value % 2 === 0) filterIndex.push(index);  // ←省略形で書く
})
console.log(filterIndex);  // [0, 3, 4, 9]

三項演算子で書く

これでも同じ結果になるんだけど、false 時に空文字(‘ ‘)を指定するのはどうなんだろ…

// 検索対象の配列
const array = [12, 45, 65, 34, 56, 23, 457, 3451, 4233, 34346];

// 条件にあった index を取得するための空の配列
let filterIndex = [];

// 2 で割り切れる要素を抽出する
array.filter((value, index) => {
  value % 2 === 0  ? filterIndex.push(index): ' '  // ←三項演算子で書く
})
console.log(filterIndex);  // [0, 3, 4, 9]

filter() のいろんな使い方

filter() って便利ですよね。

例えばこんな感じでアロー関数の先に条件式を書いて、1行でシンプルに書くこともできるんですね。

// 検索対象の配列
const array = [12, 45, 65, 34, 56, 23, 457, 3451, 4233, 34346];

// 50より大きい要素を抽出
const array2 = array.filter(value => value > 50);
console.log(array2);  // [65, 56, 457, 3451, 4233, 34346]

// インデックスが6より大きい要素を抽出
const array3 = array.filter((value, index) => index > 6);
console.log(array3);  // [3451, 4233, 34346]

// 2で割り切れる要素を抽出
const array4 = array.filter(value => value % 2 === 0);
console.log(array4);  // [12, 34, 56, 34346]

途端にできる人っぽくなりましたね！(そんなこたない

map() との違い

なんとなく filter() と map() て似てる？って盛大に勘違いしてたんですが、

試しに上記と同じことを map() を使って実行してみました。

// 検索対象の配列
const array = [12, 45, 65, 34, 56, 23, 457, 3451, 4233, 34346];

const array2 = array.map(value => value > 50);
console.log(array2);  // [false, false, true, false, true, false, true, true, true, true]

const array3 = array.map((value, index) => index > 6);
console.log(array3);  // [false, false, false, false, false, false, false, true, true, true]

const array4 = array.map(value => value % 2 === 0);
console.log(array4);  // [true, false, false, true, true, false, false, false, false, true]

全然違いますね(大汗

filter() は与えられた条件に合致した要素全てを抽出するのに対して、map() は与えられた条件を全ての要素に対して実行し、その結果からなる配列を生成するんですね。

また、filter() と map() はどちらとも非破壊メソッドなので、元々の配列(上記で言う array )を壊すことはありません。