js的类数组

我们先来看看在JavaScript 中有哪些情况下的对象是类数组呢?主要有以下几种:

1. 函数里面的参数对象arguments;
2. 用getElementsByTagName/ClassName/Name获得的HTMLCollection;
3. 用querySelector获得的 NodeList。

类数组的基本介绍

arguments

function sum(a,b,c) {
   console.log(arguments)
}
sum(1,2,3)

从结果中可以看到，typeof这个arguments返回的是 object，通过Object.prototype.toString.call 返回的结果是"[object arguments]‘，可以看出来返回的不是’[object array]'，说明arguments和数组还是有区别的。
length属性很好理解，它就是函数参数的长度，我们从打印出的代码也可以看得出来。另外可以看到arguments 不仅仅有一个length属性，还有一个callee 属性，
从控制台可以看到，输出的就是函数自身，如果在函数内部直接执行调用callee 的话，那它就会不停地执行当前函数，直到执行到内存溢出，有兴趣的话你可以自己试一下。

HTMLCollection

HTMLCollection简单来说是HTML DOM对象的一个接口，这个接口包含了获取到的DOM元素集合，返回的类型是类数组对象，如果用typeof来判断的话，它返回的是’object’。它是及时更新的，当文档中的DOM变化时，它也会随之变化。

<div class="son">
   张三
</div>
<div class="son">
   李四
</div>
<div class="son">
   王五
</div>
var arrayList = document.getElementsByClassName("son")
console.log(arrayList)
console.log(typeof arrayList)
console.log(Object.prototype.toString.call(arrayList))

NodeList

NodeList对象是节点的集合，通常是由querySlector返回的。NodeList 不是一个数组，也是一种类数组。虽然NodeList 不是一个数组，但是可以使用for…of 来迭代(HTMLCollection也行)。在一些情况下，NodeList 是一个实时集合，也就是说，如果文档中的节点树发生变化，NodeList 也会随之变化。

<div class="son">
   张三
</div>
<div class="son">
   李四
</div>
<div class="son">
   王五
</div>
var arrayList = document.querySlector("son")
console.log(arrayList)
console.log(typeof arrayList)
console.log(Object.prototype.toString.call(arrayList))

应用场景

遍历参数操作

function sum() {
      var sum = 0, len = arguments.length
      for (var i = 0; i < len; i++) {
        sum += arguments[i]
      }
	return sum
}
console.log(sum(1,2,3)) //6

定义连接字符串函数

function myConcat(separa){
   var args = Array.prototype.slice.call(arguments,1)
   return args.join(separa)
}
console.log(myConcat(",","张三","李四","王五")) //张三,李四,王五

类数组是没有join方法的，所以只能先将其转换数组，在使用join方法

传递参数使用

将参数从一个函数传递到另一个函数

function foo() {
   bar.apply(this, arguments)
}
function bar(a, b, c) {
   console.log(a, b, c)
}
bar(1, 2, 3) // 1,2,3

类数组转数组

类数组借数组之法转数组

var arrayLike = {
   0: "java",
   1: "C++",
   2: "javascript",
   length: 3
}
Array.prototype.push.call(arrayLike, "c语言", "Python")
console.log(arrayLike)
console.log(typeof arrayLike)
console.log(Object.prototype.toString.call(arrayLike))

ES6的方法转数组

array.form()

function sum(a, b) {
   let arr = Array.from(arguments)
   console.log(arr) //[1,2]
   let sum = 0
   console.log(arr.reduce((sum, cor) => sum + cor)) //3
}
sum(1, 2)

扩展运算符（3点运算符）

function sum1(a, b) {
   let arr = [...arguments]
   console.log(arr) //[2,3]
   console.log(arr.reduce((sum,cor) => sum + cor)) // 5
}

sum1(2,3)

function sum2(...obj){
   console.log(obj) //[3,4]
   console.log(obj.reduce((sum,cor) => sum + cor)) //7
}

sum2(3,4)