それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

Javascriptでの繰返し・反復のforEach/map/reduce についてまとめ

javascriptのIteration系の関数をメインで使うことが多いので纏めておくことにした。

forEach 関数

イテレーションの基本

> [1,2,3,4].forEach(function(e){console.log(e*2) }  )
2
4
6
8

map 関数

配列の各要素を変換する基本。

> [1,2,3,4].map(function(e){ return e*2 }  )
[ 2, 4, 6, 8 ]

reduce 関数

配列の全要素を集計する基本。

> [1,2,3,4].reduce(function(v,e){   return e+v }, 0)
10

この場合、Callbacksの引数が重要。e と書いたのが、各要素(element)。

filter 関数

> [1,2,3,4].filter(function(e){  return e%2==0   })
[ 2, 4 ]
> [1,2,3,4].filter(function(e){  return e%2==1   })
[ 1, 3 ]
> [1,2,3,4].filter(function(e){  return e > 2   })
[ 3, 4 ]
>

この場合、Trueを返した要素を全部選択する。

select / find という名前ではなく、 filter です。忘れないようにしないと。

every 関数

配列の全要素が、指定条件をちゃんと満たしているか調べる、

> [1,2,3,4].every(function(e){  return e > 5   })
false
> [1,2,3,4].every(function(e){  return e > 1   })
false
> [1,2,3,4].every(function(e){  return e > 0   })
true
> [1,2,3,4].every(function(e){  return e >  3   })
false
> [1,2,3,4].every(function(e){  return e >  0   })
true
> [1,2,3,4].every(function(e){  return e >  -1   })
true
> [1,2,3,4].every(function(e){  return e < 10   })
true
> [1,2,3,4].every(function(e){  return e <  0   })
false
>

この辺は、map があれば充分な気もします。

reduceRight関数

reduce の逆順の動作。reverse して reduce する感じ。ax=xa が成立しないときに使うんだけど、単純積や単純な積算だと正順も逆順の結果が変わらないと思うの。。。

せいぜい、多次元配列(行列)の計算の時に使うくらいしか思いつかない。

some

どれか一つでも条件を満たしていればOK

アルファベットを含むかどうか

> "password".split('').some(function(c){ return c>="A" && c<="z" })
true

大文字のアルファベットを含むかどうか

> "password".split('').some(function(c){ return c>="A" && c<="Z" })
false

小文字のアルファベットを含むかどうか

> "password".split('').some(function(c){ return c>="a" && c<="z" })
true

数字を含むかどうか

> "password".split('').some(function(c){ return c>="0" && c<="9" })
false

数字を含むかどうか

> "Passw0rd".split('').some(function(c){ return c>="0" && c<="9" })
true

ここまで来ると、MapしてReduceした方がいいような気もします。

JavaScriptのforEach関数。

一般的なブラウザでは基本的に動くので便利です。

iteratorのmap/reduce/fiterなどはもっと積極的に使われても良いと思うのですが。 某巨大ライブラリの$.map(function(index,elem){ } )が使われていて残念な気もします。

参考資料

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#Iteration_methods

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight

広告を非表示にする