我们先来看看在JavaScript 中有哪些情况下的对象是类数组呢?主要有以下几种:
- 函数里面的参数对象arguments;
- 用getElementsByTagName/ClassName/Name获得的HTMLCollection;
- 用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)