jQueryの配列など,Object型と判定されるものを配列と判定したい。

Question

毎度お世話になっております。

現在,配列に入っている配列を全て展開し,全ての要素を配列一個だけにするという処理を実装しています。

var a =[[1],[2,3,[4,5],6],7,],8,[9,10]];
function convert(array){略};
convert(a);
//#=>[1,2,3,4,5,6,7,8,9,10] 

こちらビルトイン配列に関しての実装は完了したのですが,jQueryの配列を展開しようとしたところインデックスiの時の要素がjQueryのセレクタで得られた配列をArray.isArray(a[i])で実行すると,falseが返り配列に対して実行したい処理がスルーされてしまいます。

これらのオブジェクトを配列とみなす方法として,length要素などのプロパティが存在するかどうかなどで判別できると思いますが,他に良い方法はあるでしょうか？

また,このように同じ[]を利用しているのに別オブジェクトとして定義するという実装は,どのように実装しているのでしょうか。jQueryの実装に詳しい方いらっしゃいましたらお聞きしたいです。

Answer 1

jQuery オブジェクトを判定するなら instanceof 演算子がお手軽だと思います。

console.log(jQuery('p') instanceof jQuery); // true
console.log(Object.getPrototypeOf(jQuery('p')) === jQuery.prototype); // true

個人的には Array.from で配列に変換する実装で十分な気がします(IE11- 対策として Polyfill は必須ですが)。

• ECMAScript 6 compatibility table

console.log(Array.from(jQuery('p')));
console.log(Array.prototype.slice.call(jQuery('p')));
console.log(Object.assign([], jQuery('p')));

Re: tkow さん

Comments

[退会済みユーザー]

プロトタイプで判別する方法もあるのですね。
勉強になりました。
jQueryのオブジェクト判定も出来るっていうのも出来るんじゃないかと思っていたことなので出来ることがわかってよかったです。

Answer 2

題意から、「配列のように添え字でアクセスできる値を持つオブジェクトを配列とみなして扱いたい」ということかと思ったのですが、皆さんの回答で納得されてるようなので蛇足をば。

基本的に「添え字でアクセスできる」「配列とみなして扱う」ということで、数値型のプロパティを持ってれば「配列とみなして」扱ってしまうことにしてみましょう。
※連想配列の場合は無視することにします。

var getNumericalKeys = function(object){
  var keys = [];
  for(key in object){ if(!isNaN(key)){ keys.push(key); }
  return keys;
};

これなら、配列もjQueryオブジェクトもDOMのNodelistも「配列とみなして」「添え字で値にアクセス」ができます。

var keys;
var arr = [1,2,3];
keys = getNumericalKeys(arr); // [0, 1, 2]
for(var i = 0; i < keys.length; i++){
  console.log(arr[keys[i]]);
}
keys = getNumericalKeys($('p')); // 略
keys = getNumericalKeys(document.getElementsByTagName('p')); // 略

。。。ついでにmaisumakunさんの回答に出てきた「arrayLike」も配列扱いになりますねｗ

Comments

[退会済みユーザー]

ありがとうございます！
jsでインデクサっぽいもの作るとこんな感じになるのですね。
勉強になりました。

Answer 3

なかなか、面倒な問題ですよね、、、
配列と、オブジェク・・・JavaScriptの世界では、まあ、いい意味で曖昧というか、でも困りものでもあったり。

さて、本題です。
配列かどうかを、見極めるコードとして有名どころのコードですが、

var is_array_ex = function(value) {
	return value &&                             
		typeof value === 'object' &&
		typeof value.length === 'number' &&
		typeof value.splice === 'function' &&
		!(value.propertyIsEnumerable('length'));
}

こんなのかと。
いわゆる、おっしゃられている「length」で、判別するという方法をちょっと拡張したものです(lengthだけだと、stringとかも引っかかってしまいますから)。

ということで、以下の記事などが参考になるかと。
http://qiita.com/kyoshiro-obj/items/551240c68185fd47e2fe

http://watilde.hatenablog.com/entry/2012/11/02/163440

Comments

[退会済みユーザー]

なるほど！
ありがとうございました！

Answer 4

jQueryオブジェクトのようなオブジェクトを、専門的には「配列のようなオブジェクト」といいますが、要はただのオブジェクトです。

たとえば、以下のように、単なるオブジェクトにも数値プロパティを追加できます。

var arrayLike = {};
arrayLike[0] = 2;
arrayLike[1] = 3;

「配列のようなオブジェクト」を本物の配列に直すのによく使われるArray.prototype.sliceも、lengthと数値プロパティさえあれば何でも受け入れるようになっています。

Comments

[退会済みユーザー]

ありがとうございます！
助かりました！