JavaScriptのイテレーションメソッドまとめ(forEach,map,reduce…)

ECMAScript5ではいろいろな配列操作メソッド(イテレーションメソッド)が追加されたらしく、使ってみると便利そうなので勉強用にいろいろ触ってみたのでそのメモ。

以下、HTML5 テクニックバイブルに書いてあったイテレーションメソッドの説明の引用とMDLのサイトへのリンク(ただし英語。英語が読めない自分が紹介するのもなんですが・・・)。

forEach: 各要素に任意の処理を逐次実行する
参考：Array.prototype.forEach() – JavaScript | MDN
map: 各要素に任意の処理を実行したり返り値で構成される配列を返す
参考：Array.prototype.map() – JavaScript | MDN
filter: 条件を満たす要素のみで構成される配列を返す
参考：Array.prototype.filter() – JavaScript | MDN
some: 条件を満たす要素が1つでもあるか確認する
参考：Array.prototype.some() – JavaScript | MDN
every: すべての要素が条件を満たすか確認する
参考：Array.prototype.every() – JavaScript | MDN
reduce: 左から右へ処理した結果を順に受け渡して1つの値に折り畳む
参考：Array.prototype.reduce() – JavaScript | MDN
reduceRight: 右から左へ処理した結果を順に受け渡して1つの値に折り畳む
参考：Array.prototype.reduceRight() – JavaScript | MDN

というわけで、上記を参考に下記のようなコードを書いてみた。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScriptのイテレーションメソッド</title>
  </head>
  <body>
      <a href="http://www.yahoo.co.jp/">Yahoo</a>
      <a href="http://www.google.co.jp/">Google</a>
      <a href="http://jp.msn.com/">MSN</a>
      <a href="http://www.amazon.co.jp/">amazon</a>
      <a href="http://twitter.com/">Twitter</a>
<script>
    var PrimeArr = [2,3,5,7,11];
    var CharaArr = ['a','k','s','t','n'];
    var LinkArr = document.querySelectorAll('a');
    console.log( LinkArr.length);
    
    // forEach(各要素に任意の処理を逐次実行する)
    // 第一引数はコールバック関数
    // コールバック関数の第一引数は配列の中の値
    console.log("PrimeArr.forEach");
    PrimeArr.forEach(function(element){
        console.log( element ); // 2 3 5 7 11
    });
    // コールバック関数の第二引数は現在のインデックス、第三引数は配列自身を表す
    console.log("CharaArr.forEach");
    CharaArr.forEach(function(element, index, array){
        console.log( array[index] ); // a k s t n
    });
    // forEachに第二引数を入れることででコールバック関数でのthisを指定する
    console.log("PrimeArr.forEach 2");
    PrimeArr.forEach(function(element, index){
        console.log( element + ":" + this[index] ); // 2:a 3:k 5:s 7:t 11:n
    }, CharaArr);
    // 配列のように動作するオブジェクト(lengthプロパティがあるなど)であれば、Array.prototype.forEach.callといったメソッドで動作する
    console.log("Array.prototype.forEach.call");
    Array.prototype.forEach.call( LinkArr, function(element){
        console.log(element.innerHTML); // Yahoo Google MSN amazon Twitter 
    });
    
    // map(各要素に任意の処理を実行したり返り値で構成される配列を返す)
    // 引数はforEachと同じ
    console.log("PrimeArr.map");
    var rvMap = PrimeArr.map(function(element){
        return element << 2; // 左に2シフト=4倍
    });
    console.log(rvMap); // [8, 12, 20, 28, 44]
    // Array.prototype.map.callとすれば配列のように動作するオブジェクトでも動作する
    console.log("Array.prototype.map.call");
    rvMap = Array.prototype.map.call("aiueo", function(element, index, array){
        return array.charCodeAt(index); // ASCIIコードを調べる
    });
    console.log(rvMap); // [97, 105, 117, 101, 111]
    // thisも指定できる
    console.log('["ヤフー","グーグル","アマゾン","ツイッター","MSN"].map');
    rvMap = ["ヤフー","グーグル","アマゾン","ツイッター","MSN"].map(function(element, index){
        return element + ":" + LinkArr[index].getAttribute('href');
    }, LinkArr);
    console.log(rvMap); // ["ヤフー:http://www.yahoo.co.jp/", "グーグル:http://www.google.co.jp/", "アマゾン:http://www.amazon.co.jp/", "ツイッター:http://twitter.com/", "MSN:http://jp.msn.com/"]
    
    // filter(条件を満たす要素のみで構成される配列を返す)
    // 引数はforEachと同じ
    console.log("PrimeArr.filter");
    var rvFilter = PrimeArr.filter(function(element){
        return element % 2 === 1; // 奇数のみ抜き出す
    });
    console.log(rvFilter); // [3, 5, 7, 11]
    // Array.prototype.filter.callとすれば配列のように動作するオブジェクトでも動作する。
    // 返ってくる値は配列なので、Array.prototypeとしなくても、イテレーションメソッドが使える
    console.log("Array.prototype.filter.call");
    Array.prototype.filter.call( LinkArr, function(e){
        return e.getAttribute('href').indexOf('.co.jp') >= 0; // URLに".co.jp"が含まれているもののみ抜き出す
    }).forEach(function(e){
        console.log(e.innerHTML); // Yahoo Google amazon
    });
    
    // some(条件を満たす要素が1つでもあるか確認する)
    // 引数はforEachと同じ
    console.log("PrimeArr.some");
    var rvSome = PrimeArr.some(function(element, index){
        console.log(index); // 0 1
        return element % 2 === 1;
    });
    console.log(rvSome); // true
    // thisも指定できる
    console.log("CharaArr.some");
    rvSome = CharaArr.some(function(element, index){
        console.log(index); // 0 1 2 3 4
        return element === LinkArr[index].innerHTML[0]; // CharaArrとLinkArrのテキストの一文字目が同じものがあるか
    }, LinkArr);
    console.log(rvSome); // false
    
    // every(すべての要素が条件を満たすか確認する)
    // 引数はforEachと同じ
    console.log("PrimeArr.every");
    var rvEvery = PrimeArr.every(function(element, index){
        console.log(index); // 0
        return element % 2 === 1;
    });
    console.log(rvEvery); // false
    // Array.prototype.every.callとすれば配列のように動作するオブジェクトでも動作する。
    rvEvery = Array.prototype.every.call("YGMaT", function(element, index){
        console.log(index); // 0 1 2 3 4
        return element === LinkArr[index].innerHTML[0];
    }, LinkArr);
    console.log(rvEvery); // true
    
    // reduce(左から右へ処理した結果を順に受け渡して1つの値に折り畳む)
    // 第一引数はコールバック関数
    // コールバック関数の第一引数は前回コールバック関数で渡した値。コールバック関数の第二引数以降はforEachと同じ
    console.log("PrimeArr.reduce");
    var rvReduce = PrimeArr.reduce(function(previousValue, currentValue){
        console.log(previousValue); // 2 -1 -6 -13
        return previousValue - currentValue;
    });
    console.log(rvReduce); // -24
    // 第二引数をいれると、最初のコールバック関数の第一引数に渡される
    console.log("PrimeArr.reduce 2");
    rvReduce = PrimeArr.reduce(function(previousValue, currentValue){
        console.log(previousValue); // 100 98 95 90 83
        return previousValue - currentValue;
    }, 100);
    console.log(rvReduce); // 72
    // Array.prototype.reduce.callとすれば配列のように動作するオブジェクトでも動作する。
    console.log("Array.prototype.reduce.call");
    rvReduce = Array.prototype.reduce.call(LinkArr, function(previousValue, currentValue, index){
        return (index === 1 ? previousValue.innerHTML : previousValue) + "," + currentValue.innerHTML;
    });
    console.log(rvReduce); // Yahoo,Google,MSN,amazon,Twitter
    
    // reduceRight(右から左へ処理した結果を順に受け渡して1つの値に折り畳む)
    // 引数はreduceと同じ
    console.log("PrimeArr.reduceRight");
    var rvReduceRight = PrimeArr.reduceRight(function(previousValue, currentValue){
        console.log(previousValue); // 11 4 -1 -4
        return previousValue - currentValue;
    });
    console.log(rvReduceRight); // -6
</script>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<!DOCTYPE html>

<html>

<head>

<title>JavaScriptのイテレーションメソッド</title>

</head>

<body>

<a href="http://www.yahoo.co.jp/">Yahoo</a>

<a href="http://www.google.co.jp/">Google</a>

<a href="http://www.amazon.co.jp/">amazon</a>

<a href="http://twitter.com/">Twitter</a>

var PrimeArr = [2,3,5,7,11];

var CharaArr = ['a','k','s','t','n'];

var LinkArr = document.querySelectorAll('a');

console.log( LinkArr.length);

// forEach(各要素に任意の処理を逐次実行する)

// 第一引数はコールバック関数

// コールバック関数の第一引数は配列の中の値

console.log("PrimeArr.forEach");

PrimeArr.forEach(function(element){

console.log( element ); // 2 3 5 7 11

});

// コールバック関数の第二引数は現在のインデックス、第三引数は配列自身を表す

console.log("CharaArr.forEach");

CharaArr.forEach(function(element, index, array){

console.log( array[index] ); // a k s t n

});

// forEachに第二引数を入れることででコールバック関数でのthisを指定する

console.log("PrimeArr.forEach 2");

PrimeArr.forEach(function(element, index){

console.log( element + ":" + this[index] ); // 2:a 3:k 5:s 7:t 11:n

}, CharaArr);

// 配列のように動作するオブジェクト(lengthプロパティがあるなど)であれば、Array.prototype.forEach.callといったメソッドで動作する

console.log("Array.prototype.forEach.call");

Array.prototype.forEach.call( LinkArr, function(element){

console.log(element.innerHTML); // Yahoo Google MSN amazon Twitter

});

// map(各要素に任意の処理を実行したり返り値で構成される配列を返す)

// 引数はforEachと同じ

console.log("PrimeArr.map");

var rvMap = PrimeArr.map(function(element){

return element << 2; // 左に2シフト=4倍

});

console.log(rvMap); // [8, 12, 20, 28, 44]

// Array.prototype.map.callとすれば配列のように動作するオブジェクトでも動作する

console.log("Array.prototype.map.call");

rvMap = Array.prototype.map.call("aiueo", function(element, index, array){

return array.charCodeAt(index); // ASCIIコードを調べる

});

console.log(rvMap); // [97, 105, 117, 101, 111]

// thisも指定できる

console.log('["ヤフー","グーグル","アマゾン","ツイッター","MSN"].map');

rvMap = ["ヤフー","グーグル","アマゾン","ツイッター","MSN"].map(function(element, index){

return element + ":" + LinkArr[index].getAttribute('href');

}, LinkArr);

console.log(rvMap); // ["ヤフー:http://www.yahoo.co.jp/", "グーグル:http://www.google.co.jp/", "アマゾン:http://www.amazon.co.jp/", "ツイッター:http://twitter.com/", "MSN:http://jp.msn.com/"]

// filter(条件を満たす要素のみで構成される配列を返す)

// 引数はforEachと同じ

console.log("PrimeArr.filter");

var rvFilter = PrimeArr.filter(function(element){

return element % 2 === 1; // 奇数のみ抜き出す

});

console.log(rvFilter); // [3, 5, 7, 11]

// Array.prototype.filter.callとすれば配列のように動作するオブジェクトでも動作する。

// 返ってくる値は配列なので、Array.prototypeとしなくても、イテレーションメソッドが使える

console.log("Array.prototype.filter.call");

Array.prototype.filter.call( LinkArr, function(e){

return e.getAttribute('href').indexOf('.co.jp') >= 0; // URLに".co.jp"が含まれているもののみ抜き出す

}).forEach(function(e){

console.log(e.innerHTML); // Yahoo Google amazon

});

// some(条件を満たす要素が1つでもあるか確認する)

// 引数はforEachと同じ

console.log("PrimeArr.some");

var rvSome = PrimeArr.some(function(element, index){

console.log(index); // 0 1

return element % 2 === 1;

});

console.log(rvSome); // true

// thisも指定できる

console.log("CharaArr.some");

rvSome = CharaArr.some(function(element, index){

console.log(index); // 0 1 2 3 4

return element === LinkArr[index].innerHTML[0]; // CharaArrとLinkArrのテキストの一文字目が同じものがあるか

}, LinkArr);

console.log(rvSome); // false

// every(すべての要素が条件を満たすか確認する)

// 引数はforEachと同じ

console.log("PrimeArr.every");

var rvEvery = PrimeArr.every(function(element, index){

console.log(index); // 0

return element % 2 === 1;

});

console.log(rvEvery); // false

// Array.prototype.every.callとすれば配列のように動作するオブジェクトでも動作する。

rvEvery = Array.prototype.every.call("YGMaT", function(element, index){

console.log(index); // 0 1 2 3 4

return element === LinkArr[index].innerHTML[0];

}, LinkArr);

console.log(rvEvery); // true

// reduce(左から右へ処理した結果を順に受け渡して1つの値に折り畳む)

// 第一引数はコールバック関数

// コールバック関数の第一引数は前回コールバック関数で渡した値。コールバック関数の第二引数以降はforEachと同じ

console.log("PrimeArr.reduce");

var rvReduce = PrimeArr.reduce(function(previousValue, currentValue){

console.log(previousValue); // 2 -1 -6 -13

return previousValue - currentValue;

});

console.log(rvReduce); // -24

// 第二引数をいれると、最初のコールバック関数の第一引数に渡される

console.log("PrimeArr.reduce 2");

rvReduce = PrimeArr.reduce(function(previousValue, currentValue){

console.log(previousValue); // 100 98 95 90 83

return previousValue - currentValue;

}, 100);

console.log(rvReduce); // 72

// Array.prototype.reduce.callとすれば配列のように動作するオブジェクトでも動作する。

console.log("Array.prototype.reduce.call");

rvReduce = Array.prototype.reduce.call(LinkArr, function(previousValue, currentValue, index){

return (index === 1 ? previousValue.innerHTML : previousValue) + "," + currentValue.innerHTML;

});

console.log(rvReduce); // Yahoo,Google,MSN,amazon,Twitter

// reduceRight(右から左へ処理した結果を順に受け渡して1つの値に折り畳む)

// 引数はreduceと同じ

console.log("PrimeArr.reduceRight");

var rvReduceRight = PrimeArr.reduceRight(function(previousValue, currentValue){

console.log(previousValue); // 11 4 -1 -4

return previousValue - currentValue;

});

console.log(rvReduceRight); // -6

</script>

</body>

</html>

以下、実行サンプル。
JavaScriptのイテレーションメソッド

上記ページを開いたら開発者ツールを開いてみてください。コンソールタブに結果が出力されるはずです。

while(isプログラマ)

ころころ興味対象が変わるプログラマの技術ブログ(多分)

JavaScriptのイテレーションメソッドまとめ(forEach,map,reduce…)

コメントを残すコメントをキャンセル

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル