【JavaScript】Array（配列）の繰り返しメソッド

JavaScript の配列である Array オブジェクトの繰り返しメソッドについてまとめました。

Array Iteration methods

メソッド	概要	バージョン
forEach	与えられた関数を配列の各要素に対して実行する。	-
map	与えられた関数を配列の各要素に対して実行して新しい配列を生成する。	-
filter	与えられた関数が true を返す要素からなる新しい配列を生成する	-
every	配列の全ての要素がテスト関数を満たした場合に true を返す。	-
some	配列の少なくとも 1 つの要素がテスト関数を満たした場合に true を返す。	-
reduce	配列の 2 つの値に対し（左から右へ）同時に関数を適用していく。	-
reduceRight	配列の 2 つの値に対し（右から左へ）同時に関数を適用していく。	-
entries	KeyValue ペアを含む新しい ArrayIterator オブジェクト を取得する。	ES2015
find	要素が指定されたテスト関数を満たす場合、配列内の値を返す。	ES2015
findIndex	要素が指定されたテスト関数を満たす場合、配列内のインデックスを返す。	ES2015
keys	配列の各インデックスキーを含む新しい ArrayIterator オブジェクトを返す。	ES2015
values	配列の各インデックスの値を含む新しい ArrayIterator オブジェクトを返す。	ES2015

 Array Iteration methods - JavaScript | MDN
 ECMAScript 6 compatibility table

メソッド詳細

Array.prototype.forEach()

array.forEach(callback[, thisObj]);

与えられた callback 関数を配列の各要素に対して一度ずつ呼び出します。callback は値が代入されているインデックスに対してのみ呼び出されるため、値が代入されていない、又はすでに削除されたインデックスに対しては呼び出されません。 callback の引数は、要素の値、要素のインデックス、forEachが適用されている配列という 3 つの引数をとりますが、インデックスと配列は省略可能です。

thisObject パラメータが与えられると、callback の呼び出しのたびにそのオブジェクトが this として使用されます。thisObject が与えられないか null だと、callback に結び付けられたグローバルオブジェクトが代わりに使用されます。

var ary = ['hoge', 'fuga', , 'bar'];
ary.forEach(function(element, index, array) {
    console.log(index + " : " + element + " [ " + this + " ]");
}, ary);
// this には与えた配列がそのまま使用される。
// 0 : hoge [ hoge,fuga,,bar ]
// 1 : fuga [ hoge,fuga,,bar ]
// 3 : bar [ hoge,fuga,,bar ]

 Function.prototype.call() を使用して以下のように実行することもできます。

var ary = ['hoge', 'fuga', , 'bar'];
Array.prototype.forEach.call(ary, function(element, index, array) {
    console.log(index + " : " + element);
});

Array.prototype.map()

arr.map(callback[, thisObj]);

引数で与えられる関数やパラメータは forEach と同様です。map では与えられた callback 関数を配列の各要素に対して一度ずつ呼び出し、その結果から新しい配列を生成します。

var ary = ['hoge', 'fuga', , 'bar'];
var newAry = ary.map(function(element, index, array) {
    console.log(index + " : " + element);
    return element.toUpperCase();
});
// 0 : hoge
// 1 : fuga
// 3 : bar
console.log(newAry.toString());  // HOGE,FUGA,,BAR  ※空のインデックスも含まれる

Array.prototype.filter()

arr.map(callback[, thisObj]);

引数で与えられる関数やパラメータは forEach と同様です。filter では与えられた callback 関数を配列の各要素に対して一度ずつ呼び出し、callback が真の値を返したすべての値からなる新しい配列を生成します。

var ary = ['hoge', 'fuga', , 'bar'];
var newAry = ary.filter(function(element, index, array) {
    console.log(index + " : " + element);
    return element.length === 4;
});
// 0 : hoge
// 1 : fuga
// 3 : bar
console.log(newAry.toString());  // hoge,fuga  ※空のインデックスは含まれない

Array.prototype.every()

arr.map(callback[, thisObj]);

引数で与えられる関数やパラメータは forEach と同様です。every では与えられた callback 関数を、配列に含まれる各要素に対して一度ずつ実行し、偽の値を返す要素が見つかるまで呼び出します。 偽の値を返す要素が見つかると false を返し、すべての要素に対して真の値を返した場合は true を返します。

var result = ['1', '20', '30', , '50'].every(function(element, index, array) {
    return element >= 10;
});
console.log(result);  // false
var result = ['10', '20', '30', , '50'].every(function(element, index, array) {
    return element >= 10;
});
console.log(result);  // true  ※空のインデックスは呼び出されていない。

Array.prototype.some()

arr.map(callback[, thisObj]);

引数で与えられる関数やパラメータは forEach と同様です。some では与えられた callback 関数を、配列に含まれる各要素に対して一度ずつ実行し、真の値を返す要素が見つかるまで呼び出します。 真の値を返す要素が 1 つでも見つかると true を返し、見つからなかった場合は false を返します。

var result = ['1', '20', '30', , '50'].some(function(element, index, array) {
    return element < 10;
});
console.log(result);  // true
var result = ['10', '20', '30', , '50'].some(function(element, index, array) {
    return element < 10;
});
console.log(result);  // false  ※空のインデックスは呼び出されていない。

Array.prototype.reduce()

var result = array.reduce(callback[, initialValue]);

配列に含まれる各要素に対して、callback 関数を一度だけ実行します。callback は値が代入されている配列のインデックスに対してのみ呼び出されるため、値が代入されていないインデックスに対しては呼び出されません。また callback 関数は 「初期値、又は、直前の callback 呼び出し」、「現在の要素の値」、「現在のインデックス」、「繰り返しが行われる配列」 の 4 つの引数を受け取ります。

var result = [0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
    console.log("previousValue: " + previousValue + ", currentValue: " + currentValue + ", index: " + index);
    return previousValue + currentValue;
});
// previousValue: 0, currentValue: 1, index: 1
// previousValue: 1, currentValue: 2, index: 2
// previousValue: 3, currentValue: 3, index: 3
// previousValue: 6, currentValue: 4, index: 4
console.log(result);  // 10

initialValue が与えられた場合、初回の previousValue は initialValue と等しくなります。

var result = [0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
    console.log("previousValue: " + previousValue + ", currentValue: " + currentValue + ", index: " + index);
    return previousValue + currentValue;
}, 10);
// previousValue: 10, currentValue: 0, index: 0
// previousValue: 10, currentValue: 1, index: 1
// previousValue: 11, currentValue: 2, index: 2
// previousValue: 13, currentValue: 3, index: 3
// previousValue: 16, currentValue: 4, index: 4
console.log(result);  // 10

Array.prototype.reduce()

var result = array.reduce(callback[, initialValue]);

配列に含まれる各要素に対して、callback 関数を一度だけ実行します。callback は値が代入されている配列のインデックスに対してのみ呼び出されるため、値が代入されていないインデックスに対しては呼び出されません。また callback 関数は 「初期値、又は、直前の callback 呼び出し」、「現在の要素の値」、「現在のインデックス」、「繰り返しが行われる配列」 の 4 つの引数を受け取ります。

var result = [0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
    console.log("previousValue: " + previousValue + ", currentValue: " + currentValue + ", index: " + index);
    return previousValue + currentValue;
});
// previousValue: 0, currentValue: 1, index: 1
// previousValue: 1, currentValue: 2, index: 2
// previousValue: 3, currentValue: 3, index: 3
// previousValue: 6, currentValue: 4, index: 4
console.log(result);  // 10

initialValue が与えられた場合、初回の previousValue は initialValue と等しくなります。

var result = [0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
    console.log("previousValue: " + previousValue + ", currentValue: " + currentValue + ", index: " + index);
    return previousValue + currentValue;
}, 10);
// previousValue: 10, currentValue: 0, index: 0
// previousValue: 10, currentValue: 1, index: 1
// previousValue: 11, currentValue: 2, index: 2
// previousValue: 13, currentValue: 3, index: 3
// previousValue: 16, currentValue: 4, index: 4
console.log(result);  // 10

Array.prototype.reduceRight()

reduce との違いは配列のインデックスを後ろから（右から左へ）読み込むという点です。

var result = [0,1,2,3,4].reduceRight(function(previousValue, currentValue, index, array){
    console.log("previousValue: " + previousValue + ", currentValue: " + currentValue + ", index: " + index);
    return previousValue + currentValue;
}, 10);
// previousValue: 10, currentValue: 4, index: 4
// previousValue: 14, currentValue: 3, index: 3
// previousValue: 17, currentValue: 2, index: 2
// previousValue: 19, currentValue: 1, index: 1
// previousValue: 20, currentValue: 0, index: 0
console.log(result);  // 10

---