更新时间:2023-02-15 来源:黑马程序员 浏览量:
首先应了解什么是伪数组,伪数组可以应用数组的length属性但是无法直接调用数组方法,它也可以像数组一样进行遍历。典型的伪数组包括函数中的arguments、document.getElementsByTagName)返回的元素集合,以及document.childNodes等。下面使用扩展运算符来将伪数组或可遍历的对象转换为真正的数组,示例代码如下。
<!DOCTYPE html> <html> <head> <meta charset-"UTE-8"> <title>Document</title> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <script> var oDivs = document.getElementsByTagName('div'); console.log(oDivs); // HTMICollection(6) [div, div, div, div, div, div] var ary = [...oDivs]; ary-push('a'): //在数组中追加a console.log(ary); //输出结果:(7)[div,div,div,div,div,div,"a"] </script> </body> </html>
上述代码中,第8~13行代码在页面中定义了6个div元素;第15行代码通过document.getElementsByTag Name)方法获取页面中所有的div元素;第16行代码通过console.log)方法输出HTMLColleetion对象,它实际上是一个伪数组;第17行代码通过扩展运算符将伪数组转换成以逗号分隔的参数序列,然后在参数序列外面添加一个数组中括号,以便将伪数组转换为真正的数组;第l8行代码调用数组的push0方法来验证ary是否是真正的数组;第19行代码在控制台输出ay数组结果,通过返回的结果可以看出a已经被追加到ary数组中,因此可以得出ary是真正的数组这一结论。