このサイトのテーマ『SWELL』を見てみる >>

【JavaScript】複数のindexに該当しない要素のみを配列から抜き出す。

takabee
実務で使う機会があったので備忘録として載せておきます。

 

まずどういうことかというと、

indexes = [ 0, 2 ];
testArray = [ item0, item1, item2, item3 ];
// 出したいoutput: [ item1, item3 ];

 
つまりindexes配列に該当しないindexをもつ要素のみをtestArrayから抜き出したい、ということです。

 

これは結論から言うと、filterとeveryを使って以下のように実装します。

const filteredArray = testArray.filter((_, i) => {
  const filter = indexes.every(index => {
    return i !== index;
  }
  return filter;
}

 

少し難しいかもなので解説します。

 

fiterメソッドは、配列から条件に対してtrueだった要素のみを返す関数です。

例えば以下のfilterメソッドを実行したら、indexが1の要素のみを返します。

const filteredArray = testArray.filter((_, i) => i === 1 );

これによって配列を精製できます。

 

あとは「testArray配列のindexがindexes配列のどれかのindexに該当しているかどうか」を、filter内で判定すればいいだけですね。
 

つまりこんな感じです。

const filteredArray = testArray.filter((_, i) => {
  // iがindexes配列のどれかのindexに該当する => falseを返す
  // 該当しない => trueを返す
}

 

この判定を実装するのにeveryメソッドを使います。
 

everyメソッドは、要素が1つでも条件に当てはまらないとfalseを返します。
 

const indexes = [ 0, 3, 4 ];
const result = indexes.every(c => c === 3);
// result: false
// [ false, true, false ] => false

この例ではresultはfalseになります。

(c===3)という条件に0と4が該当しないからですね。

 

これを使って「testArray配列のindexがindexes配列のどれかのindexに該当しているかどうか」を判定するには、冒頭でも出てきたように以下のようにできます。

const filteredArray = testArray.filter((_, i) => {  const filter = indexes.every(index => {
    // 1つでも (i === index) があればfilterはfalseが入る。すべて (i !== index) をクリアしてはじめてfilterはtrueが入る。
    return i !== index;
  }
  return filter;
}

これで完成です。

 

ちなみにfilterとかmapとかは、元の配列に影響せず新しい配列を生成する非破壊的メソッドなので、何らかの変数に格納しないといいがありません。

例えば以下のコードでtestArrayには何の影響もありません。

const testArray = [ 0, 1, 2, 3 ];
const filteredArray = testArray.filter(c => c === 1);
// filteredArray: [ 1 ]
// testArray: [ 0, 1, 2, 3 ] (そのまま)

詰まると思ったより時間をムダにするので注意しておきましょう。

 

takabee
ではまた次の記事でお会いしましょう!
ネコ大先生
最後まで読んでくれてありがとうニャ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Webエンジニア兼ブロガー。Nuxt.js, Wordpress, SEO対策などの案件を承っております。両感音性難聴3級持ち。
お仕事の依頼はこちらから。
https://www.lancers.jp/profile/takabeee

コメント

コメントする

目次
閉じる