このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2013.11.24

【JS】【保存版】underscore.js の使用方法 まとめ Array Functions

underscore.js

引き続き、underscore.js のArray Functionsのまとめとなります。

 

Array Functions

first

_.first(array, [n])

リストの最初の値を返します。

_.first([5, 4, 3, 2, 1]);

=> 5

example

(function() {
  var list = ["web帳", 3, 5, 6, 2];
  var x = _.first(list);
  console.log(x);
})();

initial

_.initial(array, [n])

配列の最後の要素以外のすべてを返します

_.initial([5, 4, 3, 2, 1]);
=> [5, 4, 3, 2]
(function() {
  var list = [7, 3, 5, 6, "web帳"];
  var x = _.initial(list);
  console.log(x);
})();

 

last

_.last(array, [n])

配列 の最後の要素を返します。

_.last([5, 4, 3, 2, 1]);

=> 1

 

rest

_.rest(array, [index])

配列の中の要素の残り(rest) を返します。

_.rest([5, 4, 3, 2, 1]);
=> [4, 3, 2, 1]

example

(function() {
  var a = [5, 4, 3, 2, 1];
  var x = _.rest(a, 2)
  console.log(x);
})();

 

compact

_.compact(array)

false, null, 0, “”, undefinedを取り除いた配列を返す。

_.compact([0, 1, false, 2, ”, 3]);

=> [1, 2, 3]

example

(function() {
 var a = ['web帳', 1, 'false', null, '', 3, false];
 var x = _.compact(a);
 console.log(x);
})();

 

flatten

_.flatten(array, [shallow])

多次元配列を一次元化する。

_.flatten([1, [2], [3, [[4]]]]);
=> [1, 2, 3, 4];

_.flatten([1, [2], [3, [[4]]]], true);
=> [1, 2, 3, [[4]]];

example

(function() {
  var a = [1, [2], [3, [[{"name": "hoge"},{"name": "web帳"}]]]];
  var x = _.flatten(a);
  console.log(x);
})();

 

without

_.without(array, [*values])

valuesを取り除いた配列を返す。===演算子で比較される。

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
=> [2, 3, 4]

example

(function() {
 var a = ["web", 2, "web帳", 0, 3, 1, 3];
 var x = _.without(a, 0, "web", "3");
 console.log(x);
})();

 

union

_.union(*arrays)

arrays の和集合 (arrays のどれかか複数で現れる項目を1回だけ順にとったリスト)を計算します。

_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2, 3, 101, 10]

example

(function() {
var x = _.union([1, 2, "web"], [101, 2, 1, 10], ["web帳", 1, "web帳", "web帳"]);
    console.log(x);
})();

 

intersection

_.intersection(*arrays)

配列のすべての積集合(重なる値)となる値のリストを計算します。

結果の中のそれぞれの値はそれぞれの配列に現れます。

_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2]

example

(function() {
 var a = [3, 1, "web帳"],
     b = [1, 2, 4, 3, "web帳"],
     c = ["web帳", 1, 2, 3, 4, 10];
 var x = _.intersection(a, b, c);
     console.log(x);
})();

 

difference

_.difference(array, *others)

without に似ていますが、配列の中から otherに存在しない値のリストを返します。

_.difference([1, 2, 3, 4, 5], [5, 2, 10]);
=> [1, 3, 4]

example

(function() {
  var a = [3, 1, 5, "web帳"],
  b = [1, 2, 4, 3];
  var x = _.difference(a, b);
  console.log(x);
})();

 

uniq

_.uniq(array, [isSorted], [iterator])

オブジェクト同等性をテストするのに === を使って、配列の重複なし版を返します。

_.uniq([1, 2, 1, 3, 1, 4]);
=> [1, 2, 3, 4]

example

(function() {
  var a = [1, 2, 1, 3, 1, "web帳", 4, "web", 4, "web帳"];
  var x = _.uniq(a);
  console.log(x);
})();

 

zip

_.zip(*arrays)

配列のそれぞれの中の値を、対応する位置に値が来るように一緒に結合します。

_.zip([‘moe’, ‘larry’, ‘curly’], [30, 40, 50], [true, false, false]);

=> [["moe", 30, true], ["larry", 40, false], ["curly", 50, false]]

_.zip.apply(_, arrayOfRowsOfData);
=> arrayOfColumnsOfData

example

(function() {
 var a = ["web帳", "web帳を", "気になる"],
     b = ["素敵", "毎日", "urlは"],
     c = ["いやん", "見てる", "http://www.webcyou.com/"];
     var x = _.zip(a, b, c);
 console.log(x);
})();

 

object

_.object(list, [values])

配列をオブジェクトに変換します。
どちらかを通る、単一のリスト、の[キー、値]ペア、あるいはキーのリストおよび値のリスト。
同じキーが存在する場合、最終の値が優先。

_.object(['moe', 'larry', 'curly'], [30, 40, 50]);
=> {moe: 30, larry: 40, curly: 50}

_.object([['moe', 30], ['larry', 40], ['curly', 50]]);
=> {moe: 30, larry: 40, curly: 50}

example

(function() {
 var a = ["web帳", "だめ"],
     b = ["そげんこというても", "わからんと"],
     c = ["web帳", "良い!"];
 var x = _.object([a, b, c]);
 console.log(x);
})();

 

indexOf

_.indexOf(array, value, [isSorted]) 
value が array の中で見つかった場所のインデックスか、array の中に現れなかったら-1を返します。

_.indexOf([1, 2, 3], 2);
=> 1

example

(function() {
 var a = ["web帳", "html5", "javascript"];
 var x = _.indexOf(a, "web");
 console.log(x);
})();

lastIndexOf

_.lastIndexOf(array, value, [fromIndex])

array の中で value が最後に現れるインデックスか、もしなければ  -1 を返します。

_.lastIndexOf([1, 2, 3, 1, 2, 3], 2);
=> 4

example

(function() {
 var a = [1, 2, 3, 1, 2, "web屋"];
 var x = _.lastIndexOf(a, "web帳");
 console.log(x);
})();

 

sortedIndex

_.sortedIndex(list, value, [iterator], [context])

値がリストのソートされた秩序を維持するためにリストへ挿入されるべきインデックスを決定するために二分探索法を使用します。

_.sortedIndex([10, 20, 30, 40, 50], 35);
=> 3

var stooges = [{name: 'moe', age: 40}, {name: 'curly', age: 60}];
_.sortedIndex(stooges, {name: 'larry', age: 50}, 'age');
=> 1

example

(function() {
 var a = [{title: 'jsの記事', page: 23}, {title: 'htmlの記事', page: 25}];
 var x = _.sortedIndex(a, {title: 'cssの記事', page: 40}, 'page');
 console.log(x);
})();

range

_.range([start], stop, [step])

eachやmapループに重宝する柔軟に番号付けられた整数リストを生成する関数。

startは省略されたらデフォルトは0。stepのデフォルトは1。

startからstopまでstepずつ増分(減分)される整数のリストを返します。

_.range(10);
=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
_.range(1, 11);
=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
_.range(0, 30, 5);
=> [0, 5, 10, 15, 20, 25]
_.range(0, -10, -1);
=> [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]
_.range(0);
=> []

example

(function() {
  var x = _.range(10, -40, -5);
 console.log(x);
})();

 

と、便利な機能がたくさん!!!

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。