投稿日: 投稿者: iwbjp

Underscore.js 1.7の使い方 Collections編

Underscore.js 1.7の使い方 Collections編

each

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

配列

var r = document.getElementById("r");
_.each([1, 2, 3], function(i) {
  r.innerHTML += i + '<br>';
});
// => 1<br>
// => 2<br>
// => 3<br>

オブジェクト

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

サンプル

map

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

配列

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

オブジェクト

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

サンプル

reduce

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

var r = document.getElementById("r");
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;
// => 16

サンプル

find

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

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

サンプル

filter

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

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

サンプル

where

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

var r = document.getElementById("r");
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);
// =>  [Object { name="sato", age=20, sex="Male"}, Object { name="yamada", age=20, sex="Female"}]
r.innerHTML = arr[1].name;
// => 'yamada'

サンプル

findWhere

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

var r = document.getElementById("r");
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);
// => Object { name="sato", age=20, sex="Male"}
r.innerHTML = arr.name;
// => 'sato'

サンプル

reject

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

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

サンプル

every

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

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

サンプル

some

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

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

サンプル

contains

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

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

サンプル

invoke

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

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

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

サンプル

pluck

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

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

サンプル

max

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

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

サンプル

min

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

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

サンプル

sortBy

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

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

サンプル

groupBy

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

var r = document.getElementById("r");
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;
// => result = {
//       'n1': [1.3],
//       'n2': [2.1, 2.4]
//    }

サンプル

indexBy

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

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

サンプル

countBy

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

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

サンプル

shuffle

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

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

サンプル

sample

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

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

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

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

サンプル

toArray

配列に変換して返す

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

サンプル

size

値の個数を返す

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

サンプル

partition

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

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

サンプル

ほかのUnderscore.jsの記事

関連した記事

Default ThumbnailUnderscore.js 1.7の使い方 Utility編 Default ThumbnailUnderscore.js 1.7の使い方 Objects編 Default ThumbnailUnderscore.js 1.7の使い方 Arrays編 Default ThumbnailUnderscore.js 1.7の使い方 Functions編