JavaScript で for each 関数を作成

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

jQuery の each 関数を参考に
for each 処理を作ってみました。

Arrayオブジェクトを拡張して実装しています。
解説はプログラム中のコメントで詳しく書いてます。

sample

実際のプログラムです。
http://tm-labo.com/laboratory/finding/for-each/

for each 関数を作成(script.js)

/**
 * @author phi
 */

// ArrayオブジェクトのプロパティにforEach関数を追加
// コールバック関数とコールバック関数が受けとる引数配列を引数にとる
Array.prototype.forEach = function(callback, args) {
    // 引数がある場合は引数をそのまま渡す
    if (args) {
        for (var i=0; i<this.length; ++i) {
            if (callback.apply(this[i], args) === false) {
                break;
            }
        }
    }
    // 引数がなかった場合、添え字を渡す
    else {
        for (var i=0; i<this.length; ++i) {
            if (callback.call(this[i], i) === false) {
                break;
            }
        }
    }
}
    
【使用例(index.html)】
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    
    <body>
        <h1>for each</h1>
        <p>
            添字で配列にアクセスするのは個人的にあまり好きじゃないので<br />
            for eachを作ってみました。jQueryのeachを参考にしています。
        </p>
        <script type="text/javascript">
            
            var a = [1, 6, 1, 8];
            
            function writeH2(str) {
                document.write("<h2>" + str + "</h2>");
            }
            
            // 引数なしバージョン
            writeH2("引数なしバージョン");
            a.forEach(function(i){
                document.write(i+" : "+this+"<br />");
            });
            
            // 引数ありバージョン
            writeH2("引数ありバージョン(list 表示)");
            document.write("<ol>");
            a.forEach(function(l, r){
                document.write(l+this+r);
            }, ["<li>", "</li>"]);
            document.write("</ol>");
            
            // 3回で止める
            writeH2("3回で止める");
            a.forEach(function(i){
                document.write(i+" : "+this+"<br />");
                if (i==2) { return false; }
            });
        </script>
        
        <hr />
        <a href="/">Home</a>
    </body>
</html>
    

追記

MDCを見たところ、forEachって標準搭載されているみたいです。
これ作ったあと知りましたorz
IEではまだ実装されていないみたいなので一応この記事残しておきます。

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。