Array. prototype. slice. call (document. querySelectorAll ('A'), 0)

Array. prototype. slice. call (document. querySelectorAll ('A'), 0) is used to convert a DOM NodeList into an Array.

The slice () method can extract a part of a string and return the extracted part with a new string. The syntax is arr. slice ([begin [, end]), where arr can be string or Array. For more information, see MDN.

Document. querySelectorAll ('A') gets a NodeList object, which looks like an array. You can use square brackets to get the nodes in the object, or you can check how many elements it contains, then it does not implement all the methods included in the array. It can be said that JavaScript is sometimes a strange language, and the concept of array is no exception.

There are several objects that seem to be arrays rather than real pseudo arrays. One of them is arguments, and arguments is a special variable that can be accessed inside the function. In fact, the arguments list is the input parameter list. These pseudo arrays do not implement all the methods included in the array, for example:

Var testFun = function ({console. log (arguments); console. log (arguments. length); console. log (arguments. shift () ;}; testFun (1, 2, 3)

Enter the following information in the console:

[1, 2, 3] 3 Uncaught TypeError: undefined is not a function

We can see that arguments. shift is not a function, but an array function. In testFun, enterConsole. log (arguments. constructor), the console outputs "function Object () {[native code]}", while[]. Constructor will output "function Array () {[native code]}". in addition to arguments, many DOM (document Object Model) sets return these objects instead of arrays: document. getElementsByTagName (), document. all (). sometimes we need to convert these objects similar to arrays but not arrays into arrays. Here we use Array. prototype. slice. call.

Why call the NodeList slice method like this? It is because NodeList is not a real array, typeof document. querySelectorAll ('A') = "Object" instead of "Array", it does not use the slice method. prototype. slice. call, JS internal mechanism converts NodeList object to Array. For example:

Var my_object = {'0': 'zero ', '1': 'one', '2': 'two', '3': 'Three, '4 ': 'four'}; var my_arr = Array. prototype. slice. call (my_object); console. log (my_arr.constructor)

Output: function Array () {[native code]}. You can use Array. prototype. slice. call to convert an object to an Array.

Learning much javascript from one line of code is an excellent article about converting NodeList to Array using []. forEach. call. The following is his code:

[]. ForEach. call ($ ("*"), function (a) {a. style. outline = "1px solid #" + (~~ (Math. random () * (1 <24). toString (16 )})

This code is not very rigorous. The css color valid value is 3 or 6 bits ,(~~ (Math. random () * (1 <24). toString (16) does not guarantee that the color value is valid. The following code is modified based on this code.

[]. ForEach. call ($ ("*"), function (a) {a. style. outline = "1px solid #" + ("000000" + (~~ (Math. random () * (1 <24). toString (16). slice (-6 )})

The main purpose of writing this article is to consolidate the JavaScript Foundation and summarize it. If it is not good, let's shoot bricks and shoes.

Links to related articles:

Learning much javascript from one line of code

Array-like Objects in JavaScript

Array. prototype. slice. call (document. querySelectorAll ('A'), 0)