プログラミング

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

ご無沙汰しております

なんと……

…..

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

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

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

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

[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 とかの意味が全然分からなくて。そこらへん詳しく説明してる記事ってあんまりなくて、みんな頭いいなーって(棒)

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 )を壊すことはありません。

まとめ

今回は、JavaScript を使って配列から条件に合うインデックスを全て抽出する方法についてまとめてみました。もっとスマートな書き方がある気がするけど、分かったらまた更新しようと思います。

いやはや、ほぼ一年ぶりにブログ更新できてなんか安堵しております。

一時期生活(主に子育て)が大変すぎてもうコード書けないかもなんて思った時期もありましたよ……

更新できてない間もアクセス数などはチェックしてたんですが、順調に?右肩上がりで、こんなブログ何か役に立つことがあるのかしら…と思ってますが…

何かの参考になれば幸いです。

ここまでお読みいただき、ありがとうございました!