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

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

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

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 では正確に判定できないらしい。

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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.