uiuifree.com

- サイト制作のノウハウと最適化を目指して-

2020.6.16【JavaScript】配列の反復処理 forEach/filter/map/reduceを扱う

【JavaScript】配列の反復処理 forEach/filter/map/reduceを扱う

JavaScriptの配列操作では便利なメソッドが多く提供されています。
例えばfor(i=0;i<arr.length;i++)みたいなコードを今も記述していませんか?arr.forEachなどの反復処理を知っていれば、もっとスマートに記述できるようになります。

今回はJavaScriptの配列で使える便利な反復メソッドを紹介していきます。

配列のループ処理 (forEach)

forEach
const numList = [2, 4, 6]
numList.forEach((num) => {
  console.log(num)
})

//  output: 2
//  output: 4
//  output: 6

条件一致(filter)

コールバックでtrueを返した条件の配列を抽出

filter
const numList = [2, 4, 6, 8, 10]
const result = numList.forEach((num) => {
  return num < 5
})
console.log(result)
//  output: [2, 4]

map

コールバックの返り値を新しい配列として生成します

map
const numList = [
    { count 1 } ,
    { count: 2 } ,
    { count: 3 } ,
    { count: 4 } ,
    { count: 5 } ,
]
const result = numList.map((num) => {
  return {
     count: num.count,
     date:  '2020/6/16'
  }
})
console.log(result)
/**
  output:  [
    { count 1 , date:  '2020/6/16' } ,
    { count: 2, date:  '2020/6/16'  } ,
    { count: 3 , date:  '2020/6/16' } ,
    { count: 4 , date:  '2020/6/16' } ,
    { count: 5 , date:  '2020/6/16' } ,
]
**/

reduce / reduceRight

配列を反復処理し結果を単一の値にします。

reduce
const numList = [1, 2, 3, 4];

numList.reduce((previousValue, currentValue) => {
      return previousValue + currentValue
})
// 1 + 2 + 3 + 4
// output: 10

reduceRightは処理の順序が配列の末尾からになります。

reduceRight
const numList = [1, 2, 3, 4];

numList.reduce((previousValue, currentValue) => {
      return previousValue + currentValue
})
// 5 + 4 + 3 + 2 + 1
// output: 10

every

条件を満たす値が全てであるか判定

every
const numList = [1, 2, 3, 4];

const result = numList.every((num) => {
      return num  <= 3
})
console.log(result)
// output: false

some

条件を満たす値が存在するか判定

every
const numList = [1, 2, 3, 4];

const result = numList.some((num) => {
      return num  <= 3
})
console.log(result)
// output: true

entries

key/value ペアを含む新しい Array Iterator オブジェクトを取得

entries
const array1 = ['Apple', 'Google', 'Microsoft'];

const iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "Apple"]

console.log(iterator1.next().value);
// expected output: Array [1, "Google"]

ポイントはnext()が呼ばれたときに次の配列値を取得します


以上が私が業務でよく使う反復メソッドになります。
他にもfind() findIndex() keys() valuesなども公式で紹介されていますので、興味がある方はみてみてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

PROFILE

このサイトを運営してるuiuifreeです。
渋谷のベンチャー企業で2年ほど新規事業を担当した後にフリーランスエンジニアにキャリア転換。
求人サイトの開発が多くエンジニア/看護師/保育士などの分野でサイトを運営しています。

アウトプット中の技術

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)