また、HTML5 テクニックバイブルで知ったこと。
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>
以下、実行サンプル。
JavaScriptのイテレーションメソッド
上記ページを開いたら開発者ツールを開いてみてください。コンソールタブに結果が出力されるはずです。
コメント