投稿日: 投稿者: iwbjp

Underscore.js 1.7の使い方 Objects編

Underscore.js 1.7の使い方 Objects編

keys

オブジェクトすべてのプロパティ名を返す

var r = document.getElementById("r");
r.innerHTML = _.keys({one: 1, two: 2, three: 3});
// => ["one", "two", "three"]

サンプル

values

オブジェクトすべてのプロパティの値を返す

var r = document.getElementById("r");
r.innerHTML = _.values({one: 1, two: 2, three: 3});
// => [1, 2, 3]

サンプル

pairs

オブジェクトを配列に変換して返す

var r = document.getElementById("r");
r.innerHTML = _.pairs({one: 1, two: 2, three: 3});
// => [["one", 1], ["two", 2], ["three", 3]]

サンプル

invert

オブジェクトのキーと値を逆にして返す

var r = document.getElementById("r");
var result = _.invert({one: 1, two: 2, three: 3});
// =>  Object { 1="one", 2="two", 3="three"}
r.innerHTML = result[1] + ' ' + result[2] + ' ' + result[3];
// => one two three

サンプル

functions

オブジェクト内にあるfunctionをすべて配列で返す

var r = document.getElementById("r");
var f = {
  bFunc: function() {},
  aFunc: function() {},
  cFunc: function() {},
  hoge: 123
};
var result = _.functions(f);
r.innerHTML = result;
// => ["aFunc", "bFunc", "cFunc"]

サンプル

extend

オブジェクトを継承して1つにして返す

var r = document.getElementById("r");
var result = _.extend({name: "sato"}, {age: 20});
// => Object { name="sato", age=20}
r.innerHTML = result.name + ' ' + result.age;
// => sato 20

サンプル

pick

指定したキーが入っているオブジェクトを返す

var r = document.getElementById("r");
var result = _.pick({name: 'suzuki', age: 20, userid: 'i01'}, 'name', 'age');
// => Object { name="suzuki", age=20}
r.innerHTML = result.name;
// => suzuki

このようにfunctionで抽出することも可能

var result2 = _.pick({name: 'suzuki', age: 20, userid: 'i01'},
  function(value, key, object) {
    return _.isNumber(value);
  }
);
// => Object { name="suzuki", age=20}
r2.innerHTML = result2.age;
// => 20

サンプル

omit

指定したキー以外が入っているオブジェクトを返す

var r = document.getElementById("r");
var result = _.omit({name: 'suzuki', age: 20, userid: 'i01'}, 'userid');
// => Object { name="suzuki", age=20 }
r.innerHTML = result.name;
// => suzuki

このようにfunctionで抽出することも可能

var result2 = _.omit({name: 'suzuki', age: 20, userid: 'i01'},
  function(value, key, object) {
    return _.isNumber(value);
  }
);
// => Object { name: "suzuki", userid: "i01" }
r2.innerHTML = result2.name;
// => suzuki

サンプル

defaults

オブジェクトのプロパティが未定義のときのデフォルト値を返す

var r = document.getElementById("r");
var data = { name: 'yamada' };
var result = _.defaults(data, {name: 'suzuki', userid: 'i01'});
// => Object { name: 'yamada', userid: 'i01' }
r.innerHTML = result.name;
// => yamada

サンプル

clone

オブジェクトをシャローコピーして返す

var r = document.getElementById("r");
var data = {name: 'yamada'};
var result = _.clone(data, true);
result.name = 'suzuki';
r.innerHTML = result.name;
// => suzuki
r2.innerHTML = data.name;
// => yamada

サンプル

tap

メソッドチェーンの途中の処理結果を返す

var r = document.getElementById("r");
var result = _.chain([1,2,3,200])
  .filter(function(num) { return num % 2 === 0; })
  .tap(alert)
  // => [2, 200]
  .map(function(num) { return num * num; })
  .value();
r.innerHTML = result;
// => [4, 40000]

サンプル

has

オブジェクトに指定したキーが含まれる場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.has({a: 1, b: 2, c: 3}, "b");
// => true

サンプル

property

オブジェクトのキーを返す関数を返す

var r = document.getElementById("r");
var me = {name: 'sato'};
var result = 'sato' === _.property('name')(me);
r.innerHTML = result;
// => true

サンプル

matches

条件にマッチしたオブジェクトを返す

var r = document.getElementById("r");
var data = [
  {name: 'yamada', age: 20},
  {name: 'sato', age: 20},
  {name: 'sazuki', age: 30}
];
var matches = _.matches({age: 20});
var result = _.filter(data, matches);
// => [{name: 'yamada', age: 20}, {name: 'sato', age: 20}]
r.innerHTML += result[0].name + ' ';
r.innerHTML += result[1].name;
// => yamada sato

サンプル

isEqual

オブジェクトの中身が同じ場合はtrueを返す
(オブジェクトは==で比較した場合は中身が同じでもfalseを返す)

var r = document.getElementById("r");
var orig  = {name: 'sato'};
var clone = {name: 'sato'};
console.log(orig == clone);
// => false
console.log(orig === clone);
// => false
r.innerHTML = _.isEqual(orig, clone);
// => true

サンプル

isEmpty

中身が空の場合はtrueを返す

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

サンプル

isElement

オブジェクトがDOM要素の場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.isElement(document.getElementsByTagName("h1")[0]);
// => true

サンプル

isArray

配列の場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.isArray([1, 2, 3]);
// => true

サンプル

isObject

オブジェクトの場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.isObject({});
// => true

サンプル

isArguments

Argumentsのオブジェクトの場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = (function(){
  return _.isArguments(arguments);
})(1, 2, 3);
// => true

サンプル

isFunction

Functionの場合はtrueを返す

var r = document.getElementById("r");
function f() {}
r.innerHTML = _.isFunction(f);
// => true

サンプル

isString

文字列の場合はtrueを返す

var r = document.getElementById("r");
var s = 'sato';
r.innerHTML = _.isString(s);
// => true

サンプル

isNumber

数値の場合はtrueを返す

var r = document.getElementById("r");
var s = 123;
r.innerHTML = _.isNumber(s);
// => true

サンプル

isFinite

有限の場合はtrueを返す

var r = document.getElementById("r");
var s = 123;
r.innerHTML = _.isNumber(s);
// => true

サンプル

isBoolean

trueかfalseの場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.isBoolean(1 === 1);
//=> true
var r2 = document.getElementById("r2");
r2.innerHTML = _.isBoolean(1 !== 1);
//=> true

サンプル

isDate

Dateオブジェクトの場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.isDate(new Date());
//=> true

サンプル

isRegExp

正規表現の場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.isRegExp(/^TEST$/);
//=> true

サンプル

isNaN

isNaNの場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.isNaN(NaN);
//=> true

サンプル

isNull

nullの場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.isNull(nul;);
//=> true

サンプル

isUndefined

undefinedの場合はtrueを返す

var r = document.getElementById("r");
r.innerHTML = _.isUndefined(undefined);
//=> true

サンプル

ほかのUnderscore.jsの記事

関連する記事