2014年12月1日(月)2023年2月1日(水) 投稿者: iwbjp

Underscore.js 1.7の使い方 Collections編

each
map
reduce
find
filter
where
findWhere
reject
every
some
contains
invoke
pluck
max
min
sortBy
groupBy
indexBy
countBy
shuffle
sample
toArray
size
partition
ほかのUnderscore.jsの記事

each

配列やオブジェクトの中身を順番に返す

配列

var r = document.getElementById(&quot;r&quot;);
_.each([1, 2, 3], function(i) {
  r.innerHTML += i + '&lt;br&gt;';
});
// =&gt; 1&lt;br&gt;
// =&gt; 2&lt;br&gt;
// =&gt; 3&lt;br&gt;

オブジェクト

var r2 = document.getElementById(&quot;r2&quot;);
_.each({one: 1, two: 2, three: 3}, function(key, value) {
  r2.innerHTML += key + ': ' + value + '&lt;br&gt;';
});
// =&gt; 1: one&lt;br&gt;
// =&gt; 2: two&lt;br&gt;
// =&gt; 3: three&lt;br&gt;

サンプル

map

配列やオブジェクトの中身を順番に処理して返す

配列

var r = document.getElementById(&quot;r&quot;);
  _.map([1, 2, 3], function(num) {
  r.innerHTML += num * 2 + '&lt;br&gt;';
});
// =&gt; 2&lt;br&gt;
// =&gt; 4&lt;br&gt;
// =&gt; 6&lt;br&gt;

オブジェクト

var r2 = document.getElementById(&quot;r2&quot;);
  _.map({one: 1, two: 2, three: 3}, function(num, key) {
  r2.innerHTML += num * 2 + '&lt;br&gt;';
});
// =&gt; 2&lt;br&gt;
// =&gt; 4&lt;br&gt;
// =&gt; 6&lt;br&gt;

サンプル

reduce

配列の中身を処理したあと記憶して次の処理に再利用して最後に返す

var r = document.getElementById(&quot;r&quot;);
var sum = _.reduce([1, 2, 3], function(memo, num) {
  return memo + num;
}, 10);
// memoには10を初期値として設定
// 10 + 1 = 11
// 11 + 2 = 13
// 13 + 3 = 16 となる
r.innerHTML = sum;
// =&gt; 16

サンプル

find

配列内で条件に最初にあてはまるものを返す

var r = document.getElementById(&quot;r&quot;);
r.innerHTML += _.find([1, 2, 4], function(num) {
  return num % 2 === 0;
});
// num % 2 === 0 の条件にあてはまるのは
// 2と４だが最初に２がくるのでそこで処理は終了
// =&gt; 2

サンプル

filter

配列内で条件にあてはまるものをすべて返す

var r = document.getElementById(&quot;r&quot;);
r.innerHTML = _.filter([1, 2, 4], function(num) {
  return num % 2 === 0;
});
// =&gt; [2, 4]

サンプル

where

オブジェクトで条件にあてはまるものをすべて返す

var r = document.getElementById(&quot;r&quot;);
var data = [
  { name: 'ito', age: 10, sex: 'Male' },
  { name: 'sato', age: 20, sex: 'Male' },
  { name: 'yamada', age: 20, sex: 'Female' },
  { name: 'suzuki', age: 30, sex: 'Female' }
];
var arr = _.where(data, {age: 20});
console.log(arr);
// =&gt;  [Object { name=&quot;sato&quot;, age=20, sex=&quot;Male&quot;}, Object { name=&quot;yamada&quot;, age=20, sex=&quot;Female&quot;}]
r.innerHTML = arr[1].name;
// =&gt; 'yamada'

サンプル

findWhere

オブジェクトで最初に条件にあてはまったものを返す

var r = document.getElementById(&quot;r&quot;);
var data = [
  { name: 'ito', age: 10, sex: 'Male' },
  { name: 'sato', age: 20, sex: 'Male' },
  { name: 'yamada', age: 20, sex: 'Female' },
  { name: 'suzuki', age: 30, sex: 'Female' }
];
var arr = _.findWhere(data, {age: 20});
console.log(arr);
// =&gt; Object { name=&quot;sato&quot;, age=20, sex=&quot;Male&quot;}
r.innerHTML = arr.name;
// =&gt; 'sato'

サンプル

reject

条件にあてはまらないものを返す

var r = document.getElementById(&quot;r&quot;);
r.innerHTML = _.reject([1, 2, 3, 4], function(num) {
  return num % 2 === 0;
});
// =&gt; [1, 3]

サンプル

every

配列内の真偽値がすべてtrueならtrue、そうでなければfalseを返す

var r = document.getElementById(&quot;r&quot;);
r.innerHTML = _.every([true, 1, undefined]);
// =&gt; false
var r2 = document.getElementById(&quot;r2&quot;);
r2.innerHTML = _.every([true, 1, 'YES']);
// =&gt; true

サンプル

some

配列内の真偽値がひとつでもtrueならtrue、そうでなければfalseを返す

var r = document.getElementById(&quot;r&quot;);
r.innerHTML = _.some([true, 0, undefined]);
// =&gt; true
var r2 = document.getElementById(&quot;r2&quot;);
r2.innerHTML = _.some([null, 0, undefined]);
// =&gt; false

サンプル

contains

配列内に指定した値が含まれていればtrue、そうでなければfalseを返す

var r = document.getElementById(&quot;r&quot;);
r.innerHTML = _.contains([1, 2, 3], 3);
// =&gt; true
var r2 = document.getElementById(&quot;r2&quot;);
r2.innerHTML = _.contains([4, 5, 6], 3);
// =&gt; false

サンプル

invoke

配列にメソッドを適用して返す

使用できるメソッド一覧はこちら

var r = document.getElementById(&quot;r&quot;);
r.innerHTML = _.invoke([[3, 1, 2], [6, 4, 5]], 'sort');
// =&gt; [[1, 2, 3], [4, 5, 6]]
var r2 = document.getElementById(&quot;r2&quot;);
r2.innerHTML = _.invoke([[3, 1, 2], [6, 4, 5]], 'shift');
// =&gt; [3, 6]

サンプル

pluck

指定したキーに一致する値をすべて返す

var r = document.getElementById(&quot;r&quot;);
var data = [
  { name: 'sato', age: 20 },
  { name: 'suzuki', age: 30 }
];
r.innerHTML = _.pluck(data, 'name');
// =&gt; [&quot;sato&quot;, &quot;suzuki&quot;]

サンプル

max

指定したキーで最大値があるオブジェクトを返す

var r = document.getElementById(&quot;r&quot;);
var data = [
  { name: 'sato', age: 20 },
  { name: 'suzuki', age: 30 }
];
var result = _.max(data, function(data){
  return data.age;
});
// =&gt; Object { name=&quot;suzuki&quot;, age=30}
r.innerHTML = result.name;
// =&gt; 'suzuki'

サンプル

min

指定したキーで最小値があるオブジェクトを返す

var r = document.getElementById(&quot;r&quot;);
var data = [
  { name: 'sato', age: 20 },
  { name: 'suzuki', age: 30 }
];
var result = _.min(data, function(data){
  return data.age;
});
// =&gt; Object { name=&quot;sato&quot;, age=20}
r.innerHTML = result.name;
// =&gt; 'sato'

サンプル

sortBy

指定した各値の実行結果の昇順で配列返す

var r = document.getElementById(&quot;r&quot;);
var result = _.sortBy([1, 2, 3], function(num) {
  return Math.sin(num);
});
r.innerHTML = result;
// =&gt;  [3, 1, 2]
// Math.sin(1) =&gt; 0.84
// Math.sin(2) =&gt; 0.90
// Math.sin(3) =&gt; 0.14
// 以上により[3, 1, 2]の順番になる

サンプル

groupBy

指定した各値の実行結果をオブジェクトのプロパティにグループで分けて返す

var r = document.getElementById(&quot;r&quot;);
var result = _.groupBy([1.3, 2.1, 2.4], function(num) {
  return 'n' + Math.floor(num);
});
console.log(result);
r.innerHTML = result.n1 + ' ' + result.n2;
// =&gt; result = {
//       'n1': [1.3],
//       'n2': [2.1, 2.4]
//    }

サンプル

indexBy

指定したプロパティの値を元に生成したオブジェクト返す

var r = document.getElementById(&quot;r&quot;);
var data = [
  {name: &quot;sato&quot;, age: 20},
  {name: &quot;suzuki&quot;, age: 30}
];
var result = _.indexBy(data, &quot;age&quot;);
// =&gt; result = {
//      &quot;20&quot;: {name: &quot;sato&quot;, age: 20},
//      &quot;30&quot;: {name: &quot;suzuki&quot;, age: 30}
//    }
r.innerHTML = result[&quot;20&quot;].name;
// =&gt; 'sato'

サンプル

countBy

条件式の集計結果をオブジェクトで返す

var r = document.getElementById(&quot;r&quot;);
var result = _.countBy([1, 2, 3, 4, 5], function(num) {
  return num % 2 === 1 ? 'odd': 'even';
});
// =&gt; result = { odd: 3, even: 2 }
r.innerHTML = result.odd + ' ' + result.even;
// =&gt; 3 2

サンプル

shuffle

配列をシャッフルして返す

var r = document.getElementById(&quot;r&quot;);
r.innerHTML = _.shuffle([1, 2, 3, 4, 5]);
// =&gt; [5,4,1,2,3]
// ※シャッフルの結果は毎回異なる

サンプル

sample

配列からランダムで要素を抽出する

var r = document.getElementById(&quot;r&quot;);
r.innerHTML = _.sample([1, 2, 3, 4, 5]);
// =&gt; 3
// ※ランダムで抽出するため結果は毎回異なる

第２引数に抽出数を指定することも可能

var r2 = document.getElementById(&quot;r2&quot;);
r2.innerHTML = _.sample([1, 2, 3, 4, 5], 3);
// =&gt; [3, 1, 5]
// ※ランダムで抽出するため結果は毎回異なる

サンプル

toArray

配列に変換して返す

var r = document.getElementById(&quot;r&quot;);
var result = (function() {
  return _.toArray(arguments);
})(1, 2, 3);
r.innerHTML = result;
// =&gt; [1, 2, 3]

サンプル

size

値の個数を返す

var r = document.getElementById(&quot;r&quot;);
r.innerHTML = _.size({zero: 0, one: 1, two: 2});
// =&gt; 3

サンプル

partition

条件式に一致するものとしないものとで配列に分けて返す

var r = document.getElementById(&quot;r&quot;);
var result = _.partition([1, 2, 3, 4, 5], function(num) {
  return num % 2 === 1;
});
// =&gt; [[1, 3, 5], [2, 4]]
r.innerHTML = '奇数は' + result[0];
// =&gt; 奇数は1, 3, 5

サンプル

each

配列

オブジェクト

map

配列

オブジェクト

reduce

find

filter

where

findWhere

reject

every

some

contains

invoke

pluck

max

min

sortBy

groupBy

indexBy

countBy

shuffle

sample

toArray

size

partition

ほかのUnderscore.jsの記事

関連する記事

広告ブロックを検出しました (Ads Blocker Detected)