97
97

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

配列を操作するjQueryのユーティリティ関数まとめ

Last updated at Posted at 2012-11-21

jQuery要素/DOM要素の他に、純粋な配列の操作などができる関数をjQueryは持っていますが、命名や引数などややこしいことが多いのでまとました。

配列を操作するjQueryのユーティリティ関数

純粋な配列を操作できる関数

  • $.inArray(needle, array)
  • $.each(array, callback(index, value))
  • $.map(array, callback(value, index))
  • $.grep(array, callback(value, index) [, invert])
  • $.merge(first, second)

コールバック関数に渡される引数の順序が統一されていないことに注意。

純粋な配列は操作できない関数

  • $.unique(array)

勘違いすると厄介です。詳しくは後述。


関数の解説

$.inArray(needle, array)

公式リファレンス
引数needleが引数arrayの何番目にあるのか整数値で返します。配列に含まれない場合は-1を返します。論理値NaNは返さないので注意。


$.each(array, callback(index, value))

公式リファレンス
配列の各要素に対して指定した関数を実行できる。for文やArray.prototype.forEachの代替として使用出来る。
コールバックに渡される引数の順番が$.gerp$.mapArray.prototype.forEachと逆なので注意。

// ECMA5から使えるforEachメソッドとはvalueとindexの引数の順番が逆
[1, 2, 3].forEach(function (value, index, context) {
	// loop	
});

引数arrayにはjQuery要素などオブジェクトも渡せるのでfor-in文としても使用可能。
(これはArray.prototype.forEachを使用した際も同じ事がいえますが)関数オーバーヘッドがあるのでパフォーマンスを求められる際はfor文が無難。そしてループを抜ける方法がbreak文ではなくreturn文で抜けることができるが、以下の点に注意。

var array = [1, 2, 3],
	length = array.length;

(function () {
	var i;

	for (i = 0; i < length; i += i)
		if (i === 2) {
			return; // 無名関数まで抜けることができる。
			// break; ループだけ抜ける場合はコレ。
		}
	});

}()); 

(function () {
	$.each([1, 2, 3], function (i, value) {
		if (i === 2) {
			return; // $.eachまでしか抜けられない。
		}
	});
}());

関連メソッド

$.fn.each(callback(index, element))

公式リファレンス
jQuery要素の各要素に指定した関数を実行する。


$.map(array, callback(value, index))

公式リファレンス
配列の各要素に指定した関数を実行し、それぞれの戻り値で構成された新しい配列を返す。Array.prototype.mapの代替として使用出来る。

// ECMA5から使えるmapメソッドと引数の順番は同じ
var newArray = [1, 2, 3].map(function (value, index, context) {
	// return newValue;
});

関連メソッド

$.fn.map(callback(index, element))

公式リファレンス
jQuery要素の各要素に指定した関数を実行する。戻り値は純粋な配列ではない。jQueryの要素が返される。ちなみにこっちはコールバック関数に渡される引数が逆(第二引数とthisコンテキストが同じ物だけど、ややこしい)。純粋な配列を返したい場合は$.mapを使う。

// 基本的にはjQueryの要素コレクションが返されるが、コールバック関数の戻り値に、jQuery要素もしくはDOM要素以外を
var result = $('div').map(function (index, element) {
	// this === element は true
	return element.nodeName; // 文字列を返してみる。
});

result; // インデックスには文字列が入っいるDOMを参照しない、できそこないのキメラのような中途半端なjQuery要素が出来上がる。

$.grep(array, callback(value, index) [, invert])

公式リファレンス
配列の各要素を指定したコールバック関数で評価し、trueとなる要素からなる新しい配列を返す。invert引数にtrueを渡すと、評価が逆になり、falseとなる要素からなる新しい配列を返す。Array.prototype.filterの代替として使用出来る。


$.merge(first, second)

公式リファレンス
配列と配列を結合させて、新しい配列を返す。jQuery要素の結合もできる。


$.unique(array)

公式リファレンス
純粋な配列は操作できない関数
DOM要素から成る配列もしくはjQuery要素コレクションから重複要素を削除した配列もしくはjQuery要素コレクションを返す。インデックス内の要素がDOM要素でなければうまく機能しない。文字列や数値から成る配列には無効なので注意


間違いなどありましたらどうぞご指摘ください。

97
97
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
97
97

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?