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

时间：2014-11-08 18:03:12 阅读：216 评论：0 收藏：0 [点我收藏+]

标签：style blog http io color ar os 使用 java

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基础，整理归纳下，不好的地方，大家拍砖扔鞋吧。