首頁技術文章正文

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

更新時間:2023-02-15 來源:黑馬程序員 瀏覽量:

IT培訓班

首先應了解什么是偽數(shù)組，偽數(shù)組可以應用數(shù)組的length屬性但是無法直接調用數(shù)組方法，它也可以像數(shù)組一樣進行遍歷。典型的偽數(shù)組包括函數(shù)中的arguments、document.getElementsByTagName)返回的元素集合，以及document.childNodes等。下面使用擴展運算符來將偽數(shù)組或可遍歷的對象轉換為真正的數(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);    //輸出結果：(7)[div,div，div,div,div,div,"a"]
</script>
</body>
</html>

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


分享到：
在線咨詢 我要報名
和我們在線交談！