目次
each
配列やオブジェクトの中身を順番に返す
配列
1 2 3 4 5 6 7 | var r = document.getElementById("r"); _.each([1, 2, 3], function (i) { r.innerHTML += i + '<br>' ; }); // => 1<br> // => 2<br> // => 3<br> |
オブジェクト
1 2 3 4 5 6 7 | 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
配列やオブジェクトの中身を順番に処理して返す
配列
1 2 3 4 5 6 7 | var r = document.getElementById("r"); _.map([1, 2, 3], function (num) { r.innerHTML += num * 2 + '<br>' ; }); // => 2<br> // => 4<br> // => 6<br> |
オブジェクト
1 2 3 4 5 6 7 | 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
配列の中身を処理したあと記憶して次の処理に再利用して最後に返す
1 2 3 4 5 6 7 8 9 10 | 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
配列内で条件に最初にあてはまるものを返す
1 2 3 4 5 6 7 | var r = document.getElementById("r"); r.innerHTML += _.find([1, 2, 4], function (num) { return num % 2 === 0; }); // num % 2 === 0 の条件にあてはまるのは // 2と4だが最初に2がくるのでそこで処理は終了 // => 2 |
filter
配列内で条件にあてはまるものをすべて返す
1 2 3 4 5 | var r = document.getElementById("r"); r.innerHTML = _.filter([1, 2, 4], function (num) { return num % 2 === 0; }); // => [2, 4] |
where
オブジェクトで条件にあてはまるものをすべて返す
1 2 3 4 5 6 7 8 9 10 11 12 | 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
オブジェクトで最初に条件にあてはまったものを返す
1 2 3 4 5 6 7 8 9 10 11 12 | 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
条件にあてはまらないものを返す
1 2 3 4 5 | var r = document.getElementById("r"); r.innerHTML = _.reject([1, 2, 3, 4], function (num) { return num % 2 === 0; }); // => [1, 3] |
every
配列内の真偽値がすべてtrueならtrue、そうでなければfalseを返す
1 2 3 4 5 6 | 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を返す
1 2 3 4 5 6 | 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を返す
1 2 3 4 5 6 | 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
配列にメソッドを適用して返す
1 2 3 4 5 6 | 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
指定したキーに一致する値をすべて返す
1 2 3 4 5 6 7 | var r = document.getElementById("r"); var data = [ { name: 'sato' , age: 20 }, { name: 'suzuki' , age: 30 } ]; r.innerHTML = _.pluck(data, 'name' ); // => ["sato", "suzuki"] |
max
指定したキーで最大値があるオブジェクトを返す
1 2 3 4 5 6 7 8 9 10 11 | 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
指定したキーで最小値があるオブジェクトを返す
1 2 3 4 5 6 7 8 9 10 11 | 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
指定した各値の実行結果の昇順で配列返す
1 2 3 4 5 6 7 8 9 10 | 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
指定した各値の実行結果をオブジェクトのプロパティにグループで分けて返す
1 2 3 4 5 6 7 8 9 10 | 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
指定したプロパティの値を元に生成したオブジェクト返す
1 2 3 4 5 6 7 8 9 10 11 12 | 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
条件式の集計結果をオブジェクトで返す
1 2 3 4 5 6 7 | 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
配列をシャッフルして返す
1 2 3 4 | var r = document.getElementById("r"); r.innerHTML = _.shuffle([1, 2, 3, 4, 5]); // => [5,4,1,2,3] // ※シャッフルの結果は毎回異なる |
sample
配列からランダムで要素を抽出する
1 2 3 4 | var r = document.getElementById("r"); r.innerHTML = _.sample([1, 2, 3, 4, 5]); // => 3 // ※ランダムで抽出するため結果は毎回異なる |
第2引数に抽出数を指定することも可能
1 2 3 4 | var r2 = document.getElementById("r2"); r2.innerHTML = _.sample([1, 2, 3, 4, 5], 3); // => [3, 1, 5] // ※ランダムで抽出するため結果は毎回異なる |
toArray
配列に変換して返す
1 2 3 4 5 6 | var r = document.getElementById("r"); var result = ( function () { return _.toArray(arguments); })(1, 2, 3); r.innerHTML = result; // => [1, 2, 3] |
size
値の個数を返す
1 2 3 | var r = document.getElementById("r"); r.innerHTML = _.size({zero: 0, one: 1, two: 2}); // => 3 |
partition
条件式に一致するものとしないものとで配列に分けて返す
1 2 3 4 5 6 7 | 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の記事
- Underscore.js 1.7の使い方 Arrays編
- Underscore.js 1.7の使い方 Objects編
- Underscore.js 1.7の使い方 Utility編
- Underscore.js 1.7の使い方 Functions編
- Underscore.js 1.7の使い方 Chaining編