This post is Private. Only a writer or those who know its URL can access this post.

Improve article
RevisionsShow article in Markdown
Report article
Help us understand the problem. What is going on with this article?

Array​.prototype​.slice.call について

More than 1 year has passed since last update.

こう言う悪魔的記法に出会った。

const nodeListOfDiv = document.querySelectorAll("div")
const length = nodeListOfDiv.length
const arrayOfDiv = Array.prototype.slice.call(nodeListOfDiv, 0, length)

意味

上記のコードは [object NodeList][object Array] に変換している。

文法

const arrayOfDiv = Array.prototype.slice.call(
  nodeListOfDiv, // 第一引数はインスタンス this, Python で言えば self
  0, length      // 第二引数以降はメソッドの引数, slice の引数になる
)                                           

Function.prototype.call と言うことは関数オブジェクトのメソッドと言うことか...

Function​.prototype​.call() - MDN Web docs
call() はあるオブジェクトに所属する関数やメソッドを、別なオブジェクトに割り当てて呼び出すことができます。

slice(begin, end) は引数を省略すると、 0, length が代入される様子。

Array​.prototype​.slice() - MDN Web docs
begin が指定されなかった場合、 slice はインデックス 0 から開始します。
end が省略された場合、slice はシーケンスの最後 (arr.length) までを取り出します。

用途

for ... in, for ... of, forEach で使えるようにするため。そのままでは使えないから... って書いてあったけど普通に Chrome で使えた。最近使えるようになったのかな...

const nodeListOfDiv = document.querySelectorAll("div")
for (nodeOfDiv in nodeListOfDiv) {
  console.log(nodeOfDiv);
}
const nodeListOfDiv = document.querySelectorAll("div")
const length = nodeListOfDiv.length
for (let i = 0; i < length; i++) {
  console.log("hello");
  console.log(nodeListOfDiv[i]);
}
const nodeListOfDiv = document.querySelectorAll("div")
nodeListOfDiv.forEach(function(e, i) { console.log(i + ': ' + e); });

型判定

typeof では正確に判定できないらしい。

参考にさせていただいたもの

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