Serendip

Web Studio

JavaScript1.6、 1.8 で追加された、配列 (Array) の反復メソッドについて。

filter

配列を、引数として渡された関数でフィルタリングして、結果が真(true)となる要素からなる配列を作る。

filter に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列内の偶数要素からなる配列を作る例。

var ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var retAry = ary.filter(function(x) { return x % 2 === 0 });

参考：filter – MDC

map

配列の各要素に、引数として渡された関数を適用した配列を作る。

map に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列の各要素を2倍にした配列を作る例。

var ary = [0, 1, 2, 3, 4, 5];
var retAry = ary.map(function(x) { return x * 2 });

参考：map – MDC

reduce

配列の要素を2つずつ左から順に、引数として渡された関数を適用してゆき結果を得る。

reduce の第2引数には初期値を指定できる。
初期値が与えられなかった場合は、配列の最初の要素が初期値になり、2番目の要素が現在の要素の値となる。

reduce に渡される関数は4つの引数をとる。
function(tmp, val, index, array)

tmp

初期値または直前の関数実行結果の値

val

現在の要素の値

index

現在のインデックス

array

繰り返しが行われる配列

配列の各要素を1.5倍したものを全て足し合せた合計値を算出する例。

var ary = [1, 2, 3];
/* retVal1
 * 初期値を与えていないため、
 * 初期値は配列の最初の要素の値 1 となリ
 * 現在の要素の値は配列の 2 番目の要素の値 2 となる。
 *  val          tmp     next-tmp
 * (2   * 1.5) +  1       => 4
 * (3   * 1.5) +  4       => 8.5 (result)
 */
var retVal1 = ary.reduce(function(tmp, val) {
    return (val * 1.5) + tmp;
});
/* retVal2
 * 初期値を 0 としたため、
 * 現在の要素の値は配列の最初の要素の値 1 となる
 *  val          tmp     next-tmp
 * (1   * 1.5) +  0       => 1.5
 * (2   * 1.5) +  1.5     => 4.5
 * (3   * 1.5) +  4.5     => 9 (result)
 */
var retVal2 = ary.reduce(function(tmp, val) {
    return (val * 1.5) + tmp;
}, 0);

参考：reduce – MDC

reduceRight

配列の要素を2つずつ右から順に、引数として渡された関数を適用してゆき結果を得る。
reduce の右から処理をする版。

reduceRight の第2引数には初期値を指定できる。
初期値が与えられなかった場合は、配列の最後の要素が初期値になり、最後から2番目の要素が現在の要素の値となる。

reduceRight に渡される関数は4つの引数をとる。
function(tmp, val, index, array)

tmp

初期値または直前の関数実行結果の値

val

現在の要素の値

index

現在のインデックス

array

繰り返しが行われる配列

配列の各要素を全て1.5倍したものを足し合せた合計値を算出する例。

var ary = [1, 2, 3];
/* retVal1
 * 初期値を与えていないため、
 * 初期値は配列の最後の要素の値 3 となリ
 * 現在の要素の値は配列の最後から2番目の要素の値 2 となる。
 *  val          tmp     next-tmp
 * (2   * 1.5) +  3       => 6
 * (1   * 1.5) +  6       => 7.5 (result)
 */
var retVal1 = ary.reduceRight(function(tmp, val) {
    return (val * 1.5) + tmp;
});
/* retVal2
 * 初期値を 0 としたため、
 * 現在の要素の値は配列の最後の要素の値 3 となる
 *  val          tmp     next-tmp
 * (3   * 1.5) +  0       => 4.5
 * (2   * 1.5) +  4.5     => 7.5
 * (1   * 1.5) +  7.5     => 9 (result)
 */
var retVal2 = ary.reduceRight(function(tmp, val) {
    return (val * 1.5) + tmp;
}, 0);

参考：reduceRight – MDC

every

配列内の全ての要素が、引数として渡された関数によって真の結果を得ることができるかを調べる。
配列が空の場合は真を返す。

every に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列内の全ての要素が偶数であるかを調べる例。

var isEven = function(val) {
    return val % 2 === 0;
};
var ary1 = [1, 2, 3];
var ret1 = ary1.every(isEven);
var ary2 = [2, 4, 6];
var ret2 = ary2.every(isEven);
var ary3 = [];
var ret3 = ary3.every(isEven);

参考：every – MDC

some

配列内に、引数として渡された関数によって真の結果を得ることができる要素が1つでも存在するかを調べる。

some に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列内に奇数の要素が存在するかを調べる例。

var isOdd = function(val) {
    return val % 2 === 1;
};
var ary1 = [2, 5, 6];
var ret1 = ary1.some(isOdd);
var ary2 = [2, 4, 6];
var ret2 = ary2.some(isOdd);
var ary3 = [];
var ret3 = ary3.some(isOdd);

参考：some – MDC

forEach

引数として渡された関数を配列の各要素に適用していく。

forEach に渡される関数は、要素の値、インデックス、配列の3つの引数を取る。
function(val, index, array)

配列の各要素を () で囲んだ文字列として連結していく例。

var ary = [1, 2, 3];
var retStr = '';
ary.forEach(function(x) { retStr += '(' + x + ')'; });

参考：forEach – MDC

参考：Array – MDC
　　　New in JavaScript 1.6 – MDC