首页 > 代码库 > Array.prototype.slice.call(document.querySelectorAll('a'), 0)

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

    Array.prototype.slice.call(document.querySelectorAll(‘a‘), 0)的作用就是将一个DOM NodeList 转换成一个数组。

    slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。语法为arr.slice([begin[, end]]),其中arr可为string或Array。更多了解可以参考MDN

    document.querySelectorAll(‘a‘)获取了一个NodeList对象,它看起来像一个数组,你可以使用方括号来获取其中的节点,你也可以检查它其中包含多少个元素,然后它并没有实现数组包含的所有方法。可以说JavaScript有时是一个古怪的语言,什么是数组的概念也不例外。

   这些看似数组又不是真正的伪数组的对象有好几个,其中一个是arguments,arguments是一个特殊的变量,它可以在函数的内部访问到。事实上,arguments列表就是传入的参数列表。这些伪数组没有实现数组包含的所有方法,例如:

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

控制台输入以下信息:

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

    可以看到arguments.shift不是一个函数;而是一个数组函数。在testFun中输入console.log(arguments.constructor),控制台输出"function Object() { [native code] }",而[].constructor将输出"function Array() { [native code] } ".除了arguments,很多DOM(文档对象模型)集合返回的也是这些对象而不是数组:document.getElementsByTagName(),document.all(). 有时我们需要把这些类似于数组但是不是数组的对象变成数组。在这里我们使用了Array.prototype.slice.call。

    为什么要这么调用 NodeList的slice 方法呢?就是因为 NodeList不是真的数组,typeof document.querySelectorAll(‘a‘)==="Object" 而不是 "Array" 它没有slice这个方法,通过这么Array.prototype.slice.call调用,JS的内部机制把NodeList对象转化为Array。例如:

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)

   输出:function Array() { [native code] } 。可见通过使用Array.prototype.slice.call可以将object转化为Array。

   Learning much javascript from one line of code是一篇优秀的文章,这篇文章讲述的是使用[].forEach.call()将NodeList转化为Array。下面是他的代码:

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

   这段代码并不是十分严谨,css的颜色有效值为3位或6位,(~~(Math.random()*(1<<24))).toString(16)并不能保证颜色值是有效的。下面是我在这段代码基础上修改的代码

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

  写这篇文章主要目的是巩固下JavaScript基础,整理归纳下,不好的地方,大家拍砖扔鞋吧。

相关文章链接:

Learning much javascript from one line of code

Array-like Objects in JavaScript

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