Underscore.jsその1 mapとeachを使ってみる

参考にさせて頂いたページ

第2回 Underscore.jsのコレクションと配列とオブジェクトの機能：Underscore.jsの入り口｜gihyo.jp … 技術評論社

準備

underscore.jsをダウンロードして読み込む
sample.jsを作成
sample.htmlを作成

sample.htmlの記述内容

bodyの中に以下のような感じ

<p class="target">target1</p>
<p class="target">target2</p>
<p class="target">target3</p>
<p class="target">target4</p>
<p class="target">target5</p>

sample.jsに書いた、mapサンプルソース

var target = document.getElementsByClassName('target');

//id属性を連番で付与
//(v,kはforeachのkeyとvalueみたいな感じをイメージすると良いかな?)
var example = _(target).map(function(v, k){
  alert(k);//kはこの場合0～nの整数
  v.id = 'target'+k;
  return v;
});

console.log(example);

mapの実行結果

alertによって、0,1,2,3,4が順番に出力される。

v.id = 'target'+k;によって、id属性target0,target1,target2,target3,target4が順番に付与される。

console.log(example);で戻り値を出力してみると

[p#target0.target, p#target1.target, p#target2.target, p#target3.target, p#target4.target]

とのこと。

sample.jsに書いた、eachサンプルソース

mapとほぼ同じように書いた。mapの代わりにeachを使っただけ。

var target = document.getElementsByClassName('target');

//id属性を連番で付与
var example = _(target).each(function(v, k){
  alert(k);//kはこの場合0～nの整数
  v.id = 'target'+k;
  return v;
});

console.log(example);

eachの実行結果

戻り値の出力について違いがあり、以下のような感じ

HTMLCollection[p#target0.target, p#target1.target, p#target2.target, p#target3.target, p#target4.target]

配列の中を開いていくことができて、沢山の要素が含まれている。

細かいことはまたそのうち。

この記事を書いたきっかけ

職場でlodash.jsを導入していて、同僚に教えてもらったので家でもちょっとunderscore.jsをやってみた。

webで検索すると、

_.each()

のような書き方はあるけど、

_(target).each()

みたいな書き方は見当たらないので、自分で読み返せるようにと書いておいた。

lodash.jsでは

_(target).each().commit();

と書くの教えてもらったけど、underscore.jsだと違うのかな?

今回はここまで。