首頁(yè)技術(shù)文章正文

如何利用擴(kuò)展運(yùn)算符將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組？

更新時(shí)間:2023-02-15 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

首先應(yīng)了解什么是偽數(shù)組，偽數(shù)組可以應(yīng)用數(shù)組的length屬性但是無(wú)法直接調(diào)用數(shù)組方法，它也可以像數(shù)組一樣進(jìn)行遍歷。典型的偽數(shù)組包括函數(shù)中的arguments、document.getElementsByTagName)返回的元素集合，以及document.childNodes等。下面使用擴(kuò)展運(yùn)算符來(lái)將偽數(shù)組或可遍歷的對(duì)象轉(zhuǎn)換為真正的數(shù)組，示例代碼如下。

<!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'):       //在數(shù)組中追加a
  console.log(ary);    //輸出結(jié)果：(7)[div,div，div,div,div,div,"a"]
</script>
</body>
</html>

上述代碼中，第8~13行代碼在頁(yè)面中定義了6個(gè)div元素;第15行代碼通過(guò)document.getElementsByTag Name)方法獲取頁(yè)面中所有的div元素;第16行代碼通過(guò)console.log)方法輸出HTMLColleetion對(duì)象，它實(shí)際上是一個(gè)偽數(shù)組;第17行代碼通過(guò)擴(kuò)展運(yùn)算符將偽數(shù)組轉(zhuǎn)換成以逗號(hào)分隔的參數(shù)序列，然后在參數(shù)序列外面添加一個(gè)數(shù)組中括號(hào)，以便將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組;第l8行代碼調(diào)用數(shù)組的push0方法來(lái)驗(yàn)證ary是否是真正的數(shù)組;第19行代碼在控制臺(tái)輸出ay數(shù)組結(jié)果，通過(guò)返回的結(jié)果可以看出a已經(jīng)被追加到ary數(shù)組中，因此可以得出ary是真正的數(shù)組這一結(jié)論。


分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！