JavaScriptでforEach, filter, map, reduceとか

  • 292
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

IE8もそろそろ死んでくれそうで、最近は使うことが多いのでメモ。

参考URL

ここをみると、全部のってる。

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

forEach

連想配列(object)だと使えないので、eachはjQueryの$.each(collection, callback)の方が使い勝手がいいかも。

[2, 5, 9].forEach(function(element, index, array) {
    console.log(index + ":" + element);
});

filter

条件にあうものだけを抽出。
arrayは元の配列。index, arrayは省略可能。

var filtered = [12, 5, 8, 130, 44].filter(function(element, index, array) {
    return (element >= 10);
});

map

処理をして新しい配列を作る(写像ですね)。
arrayは元の配列。index, arrayは省略可能。

var square = [1, 2, 3, 4, 5].map(function(element, index, array) {
    return element * element;
});

reduce, reduceRight

処理をして1つの値を取得。
previousValueは前の値というより、それまでの結果と考えるとわかりやすい。
arrayは元の配列。index, arrayは省略可能。

var total = [0, 1, 2, 3].reduce(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
});

reduceRightは右から処理する。

var total = [0, 1, 2, 3].reduceRight(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
});

every, some

everyは条件を全ての値が満たすか、someは条件を満たすものがあるかの判定。
結果はboolean。
arrayは元の配列。index, arrayは省略可能。

var passed = [12, 54, 18, 130, 44].every(function(element, index, array) {
    return (element >= 10);
});
passed = [2, 5, 8, 1, 4].some(function(element, index, array) {
    return (element >= 10);
});