JavaScript で for each 関数を作成
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;
}
}
}
}
<!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ではまだ実装されていないみたいなので一応この記事残しておきます。