將類數組對象(array-like object)轉化為數組對象(Array object)


用法:Array.prototype.slice.call(array-like object)

// 創建一個類數組對象
var alo = {0:"a", 1:"b",2:"c", length:3};

// 轉化
var arr = Array.prototype.slice.call(alo);

console.log(
    Array.isArray(alo) // false
)

console.log(
    Array.isArray(arr) // true
)

console.log(alo); // { '0': 'a', '1': 'b', '2': 'c', length: 3 }
console.log(arr); // [ 'a', 'b', 'c' ]

下面分析它是如何工作的.

類數組對象擁有類似數組的結構,所以它可以使用大多數數組的方法。

數組里有一個方法slice(),遍歷調用對象,然后返回一個數組。

這里有一個問題,slice()是數組對象的方法,那該如何使用?

數組方法是數組對象的屬性,所以可以通過Array.prototype.slice獲取它。

然而在一個對象里調用其它對象的方法,我們需要用到"Function.prototype"里的方法call(),像這樣function name.call(obj,args)

所以有,Array.prototype.slice.call(alo)

slice()是一個函數(function),所以從Function.prototype繼承了方法call,這也就是為什么我們可以這樣用Array.prototype.slice.call(...)

Function.prototype.call(obj)的第一個參數是一個對象,即將傳給f.call(obj)函數里的f,這一步,f的上下文(關鍵詞this)的值會是obj.

一般情況下Array.slice(),方法slice將Array作為this的值,使用索引遍歷所有的數組元素。在我們的例子中,我們將alo設置為this的值,alo是類數組,本身又具有索引,因此而工作。

 

NodeList,HTMLCollection都是類數組對象

<body>
<ul id="ho" class="ho">
  <li></li>
</ul>
<script>
// 創建一個htmlCollection對象
var htmlCollection = document.getElementsByTagName("li");

// 創建一個NodeList對象
var nodeList = document.getElementById("ho").childNodes;

// 轉化
var h2arr = Array.prototype.slice.call(htmlCollection);
var n2arr = Array.prototype.slice.call(nodeList);

console.log(htmlCollection); // HTMLCollection [ <li> ]
console.log(nodeList); // NodeList [ #text "", <li>, #text "" ]

console.log(h2arr); // Array [ <li> ]
console.log(n2arr); // Array[ #text "", <li>, #text "" ]
</script>
</body>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM