複数の値を持った配列じゃないオブジェクトとは 【Javasqript】【jQuery】

jQueryの配列風オブジェクト（擬似配列）について、非常に難しかったので共有します。

前提条件

  • menu-itemクラスを持つ要素は複数ある状態
let tabs = $(".menu_item");

 

結論から言います、上記のtabs は配列ではありません。

これは配列風オブジェクト（jQueryで複数のプロパティを持つオブジェクト)です。

 

// 何番目の要素がクリックされたかを、tabsから要素番号を取得
const index = tabs.index(this);

 

ここでtabsに、

配列に変換しなくても、集合したDOM要素から引数に指定したDOMと同じ要素番号を戻すindexメソッドを引数をthisとして記載しています。

ここで、要素番号を取得するということはtabsは配列なのでは？

と疑問を持ちました。

 

しかしtabsは配列ではない、では一体要素番号とは何なんでしょう？

 

tabsの中身を確認するために、ブラウザのコンソールでtabsと入力すると以下の値が出力されます。

 

  1. S.fn.init(3) [a#about.menu_item.active, a#service.menu_item, a#contact.menu_item, prevObject: S.fn.init(1)]
    1. length: 3

 

太線の箇所に注目してください。

tabs（オブジェクト）にはいくつかのプロパティが存在していることがわかります。そしてその左に番号が振られています。これが要素番号です。

 

よって、indexメソッドを使い、配列でないtabsオブジェクト（配列風オブジェクトとも呼ぶそう）から、要素番号を戻すことができます。

 

まとめると

  • DOM要素を複数取得し、変数に入れると配列風オブジェクトとなる。
  • 配列風オブジェクトには配列のように要素番号が振られている

 

ひとまずは、なるほど、といった所でしょうか？

 

でも、そもそもなぜRubyのように複数の値を変数に入れた時点で

配列に最初から入れないんでしょうか？

どうメリットがあるんでしょうか？

配列風オブジェクトとして扱うことに対するメリットが理解できません。

 

コメントでお教えいただくと幸いです。