首页 > 代码库 > 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)