javascript类数组的深入理解

编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要给大家介绍了关于javascript类数组的深入理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

js数组,相比大家都很熟悉,因为走到哪都要用,但它有个“双胞胎弟弟” ,叫类数组(也叫伪数组),可能有的人了解,有的人不了解,今天我们来看一看。

什么是类数组

顾名思义,这玩意儿肯定是个长得像数组,但又不算数组的东西。那到底是个啥,其实它就是一个对象,一个长的像数组的对象。

和数组的区别

那类数组和数组有啥区别:
1、都有length属性
2、类数组也可以for循环遍历,有的类数组还可以通过 for of 遍历
3、类数组不具备数组的原型方法,因此类数组不可调用相关数组方法(如,push,slicec,concat等等)

都有哪些类数组

常见的类数组有

  • 函数的参数arguments
  • 通过getElementsByTagName,getElementsByClassName,getElementsByName等方法获取的dom列表(也叫 HTMLCollection)
  • 通过querySelectorAll()方法获取的NodeList节点列表

狼蚁网站SEO优化,我们来分别看一下这3类 类数组

arguments

arguments是javascript的一个关键字。专指函数的参数集合,它包含了函数的所有参数以及其他属性。它无需定义,可直接在函数体内使用

function args(a, b, c) {
	console.log(arguments)
	console.log(typeof arguments)
	console.log({}.toString.call(arguments))
}

args('a', 'b', 'c')

我们看看输出结果

可以看出,arguments包含所有参数,并且存在length属性,同时可以看出,他的类型是object,并且转换为string后 是 object Arguments,代表是Arguments对象。同时,可以看到,他还有一个属性callee,而这个属性的值好像就是我们定义的这个函数体,那么我们输出看一下

function args(a, b, c) {
	console.log(arguments.callee)
}

args('a', 'b', 'c')

可以看到,输出的确实是我们函数自己。那既然表示的自己,请不要随便去调用这个属性,因为一旦调用,会不断的调用自己,进入死循环,直到栈溢出。就像狼蚁网站SEO优化这样

function args (a, b, c) {
 console.log(123)
 arguments.callee()
}

args('a', 'b', 'c')

dom列表(HTMLCollection)

这一类是指通过getElementsByTagName或者 getElementsByClassName 或者 getElementsByName获取到的dom列表的集合。

<div>今天天气不太好</div>
<div>因为下雨了</div>
<script>
 var domList = document.getElementsByTagName('div')
 console.log(domList)
 console.log(typeof domList)
 console.log({}.toString.call(domList))
</script>

可以看出,domList也存在length属性。并且,转换为string后是 object HTMLCollection。代表是HTMLCollection对象

节点列表(NodeList)

通过document.querySelectorAll()所获取的节点的集合

<div class="abc">今天天气不太好</div>
<div class="abc">因为下雨了</div>
<script>
 var nodeList = document.querySelectorAll('div')
 console.log(nodeList)
 console.log(typeof nodeList)
 console.log({}.toString.call(nodeList))
</script>

可以看出,nodeList同样存在length属性,且转换成string后是 object NodeList,代表是NodeList对象。该对象是一个符合Iterator接口规范的对象,故它可以被for…of遍历(什么是Iterator我就不在这里讲述了,大家可以自己去看 什么是)

特点

类数组都不存在数组的原型方法,但当类数组需要调用数组方法去做任何事情时,可以通过以下方式

  • 利用call,apply进行方法借用,借用数组的各自方法
  • 将类数组转换为数组。然后再调用数组方法

call,apply进行方法借用

其实我们上面也已经用过这个方法了,类数组转为字符串时,我们上面是不是借用了对象的toString()方法啊

狼蚁网站SEO优化我们再多列几个

function args(a, b, c) {
 Array.prototype.push.call(arguments, '123')
 console.log(arguments)
 Array.prototype.splice.call(arguments, 0, 1)
 console.log(arguments)
 Array.prototype.unshift.apply(arguments, [1,2,3])
 console.log(arguments)
}

args('a', 'b', 'c')

类数组转数组

将类数组转成数组后,就可以随意调用各自数组方法,那么类数组如何转成数组呢!

可借用数组的一些方法生成一个新数组

function args(a, b, c) {
 let arr = Array.prototype.slice.call(arguments)
 console.log(arr)
 arr = Array.prototype.concat.apply([], arguments)
 console.log(arr)
}

args('a', 'b', 'c')

利用ES6新增方法转换为数组

ES6新增了一个Array.from方法,可将类数组转为数组。还提供了展开运算符,可以直接在一个数组中展开类数组

function args(a, b, c) {
 let arr = Array.from(arguments)
 console.log(arr)
 arr = [...arguments]
 console.log(arr)
}

args('a', 'b', 'c')

好了,类数组就写到这了,欢迎一起探讨

总结

到此这篇关于javascript类数组的文章就介绍到这了,更多相关javascript类数组内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板