感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

配列操作を簡単にするJavaScriptのイテレーションメソッド一覧

スポンサーリンク

JavaScriptの配列を回したいときは、イテレーションメソッドを使うとけっこう便利だ。
ES5で追加されたイテレーションメソッドを見ていく。

・forEach
各要素に対して、任意の処理を逐次実行する。

var numbers = [1,2,3,4,5];

numbers.forEach(function(val) {
  console.log(val);
});

実行結果は

1
2
3
4
5

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

var nums = [1,2,3,4,5];

var ret = nums.map(function(num) {
  return num * 2;
});

console.log(ret);

これの実行結果は、ちゃんと配列が返ってきている。

[ 2, 4, 6, 8, 10 ]

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

var nums = [1,2,3,4,5];

var ret = nums.filter(function(num) {
  return num >= 3;
});

console.log(ret);

3以上の数値だけ配列に詰め込んで返す。

[ 3, 4, 5 ]

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

var girlfriends = ["hanako","momoko","kanami","yurika","kana"];

var ret = girlfriends.some(function(girl) {
  return girl === "kana";
});

console.log(ret);

結果はtrue/falseで返ってくる

true

・every
すべての要素がその条件を満たすか確認する

var nums = [2,3,4,5,6]

var ret = nums.every(function(num) {
  return num > 3;
});

console.log(ret);

結果は、false

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

var friends = ["kamachi","kuwano","koumei","youdai"];
var ret = friends.reduceRight(function(pre, cur) {
  return pre + "," + cur;
});

console.log(ret);

結果を見ると、配列が逆回しで処理されていることがわかる。

youdai,koumei,kuwano,kamachi

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


■読んだ本
HTML5 テクニックバイブル
HTML5テクニックバイブル
こんな本出てるよってもっと多くの人に知ってほしい。
HTML5を使った面白そうな技術が満載である。

こんなのもあるみたい(検索したら一緒に出てきた)
JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技