首页技术文章正文

如何利用扩展运算符将伪数组转换为真正的数组?

更新时间:2023-02-15 来源:黑马程序员 浏览量:

IT培训班

首先应了解什么是伪数组,伪数组可以应用数组的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是真正的数组这一结论。


分享到:
在线咨询 我要报名
和我们在线交谈!