Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@yuquitta13

javascriptの「配列ライク」の罠

More than 3 years have passed since last update.

javascriptのドキュメントで登場する「配列ライク」

例えば、「getElementsByClassName」メソッド。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

与えられたクラス名で得られる要素の配列ライクのオブジェクトを返します。document オブジェクトで呼び出されたときは、ルートノードを含む、完全な文書が検索されます。任意の要素でgetElementsByClassName() を呼び出すこともできます。その場合は、与えられたクラス名を持つ指定されたルート要素下の要素だけが返ります。

なるほど、つまり、配列形式で帰ってくるんだな。確認してみる。

sample.js
 tests = document.getElementsByClassName('test')
 console.log(tests) // [<div class='test'>1</div>,<div class='test'>2</div>,...]

確かに、配列で帰ってる。(ように見える…)

だけど、

sample.js
 tests = document.getElementsByClassName('test')
 tests.forEach(...) // TypeError

とエラーになる。

配列ライクは配列ではない

言われれば当たり前だが、配列ライクは配列ではないのだ。したがって、配列(Array)に対して用意されているメソッド
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
はそのままでは使えない。

対処法

今回はforEachがやりたかったので以下の記事が参考になった。Array.prototype.forEach.call()を使うのが基本的な対処法らしい。

http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496
http://ism1000ch.hatenablog.com/entry/2014/07/30/024635

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yuquitta13
言語はRubyを中心にやってます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?