More than 5 years have passed since last update.

jQueryで使える配列系便利関数

Last updated at 2017-06-27Posted at 2015-08-28

「使用できるライブラリはすでに入れてあるjQueryだけです、他のライブラリは一切使用できません」とかいう~~ふざけた~~プロジェクトでUnderscore.js/lodashが使えなくてつらいのでなんとか配列などをいい感じに扱える便利関数がないのか調べてみたらあったのでそれのメモです。

`$.unique`

配列内の重複した値を削除してくれる。

$.unique([1, 2, 3, 4, 3, 2, 1, 2, 3, 4]);
// => [1, 2, 3, 4]

破壊的な関数らしく、配列を変数に入れて引数に渡すと引数の配列の中身が戻り値と同じになっている。

引数は一つしか受け取れないみたいだ。

jQuery 3.0で非推奨になったらしく、代わりに$.uniqueSortを使用するように、と書いてある。

引数に渡された二つの配列を連結する。

$.merge([1, 2, 3], [2, 3, 4, 5]);
// => [1, 2, 3, 2, 3, 4, 5]

この関数も破壊的な関数なので最初の引数の配列が変更される。

引数は二つしか受け取れない。

引数に渡されたオブジェクトをマージする。

$.extend({ a: 1, b: 2 }, { b: 3 }, { a: 3, c: 4 });
// => { a: 3, b: 3, c: 4 }

最初の引数にtrueを渡すとオブジェクト内を再帰的にコピーしてくれるようになる。

引数はいくつでも受け取れる。

コンパレータ関数（という呼び方でいいのか？）でtrueが返された値だけ配列に入れて返す。Array.prototype.filterと同じ感じ。

$.grep([1, 2, 3, 4, 5, 6], function(value, index) {
  return (value % 2 === 0);
});
// => [2, 4, 6]

三番目の引数としてtrueを渡すと条件が反対になる。つまり、上記のコードの第三引数にtrueを加えると戻り値は[1, 3, 5]になる。

配列内から目的の値の位置を返す。Array.prototype.indexOfと同じ感じ。

$.inArray(3, [1, 2, 3, 4, 5]);
// => 2

三番目の引数として、検索を開始するインデックスを渡せる。

配列を渡す場合はArray.prototype.mapと同じ感じ。オブジェクトも渡せる。

$.map([1, 2, 3], function(value, index) {
  return value * 2;
});
// => [2, 4, 6]

$.map({ a: 1, b: 2, c: 3 }, function(value, key) {
  return key;
});
// => ["a", "b", "c"]

配列っぽいオブジェクトから配列を生成する。

$.makeArray({ length: 2, 0: 1, 1: 2 });
// => [1, 2]

getElementsByTagNameとか、querySelectorAllで取得したやつを渡したりするとヨサソウ( ˘ω˘)

Function::bindの代わり。

Underscore.js/lodashを用いなくても配列に関しては意外とjQueryだけでどうにかなりそうな印象は得られたかも。

とはいえつらみだ( ˘ω˘)