一、什麼是類數組對象 (ArrayLike)
- 擁有
length
- 不具有數組所具有的方法
- 類數組是一個普通對象，而真實的數組是
Array
二、JavaScript中常見的類數組
-
arguments
- DOM方法傳回結果（
getElementsByTagName()
getElementsByClassName()
三、判斷一個對象是否為類數組
function isArrayLike(obj) {
if (obj && // obj不為空
typeof obj === 'object' && // obj是一個對象
isFinite(obj.length) && // obj的長度是一個有限數字
obj.length >= 0 && // obj的長度是一個非負數字
obj.length===Math.floor(obj.length) && // obj的長度是一個正數
obj.length < 4294967296) // obj的長度小于2^32幂
return true; // obj是一個類數組
else
return false; // 否則 obj不是一個類數組
}
四、如何區分數組和類數組對象
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
// 擷取所有li
var lis = document.getElementsByTagName("li");
// 定義數組
var arr = [];
</script>
</body>
-
instanceof
console.log(arr instanceof Array);
console.log(lis instanceof Array);
-
constructor
console.log(arr.constructor === Array);
console.log(lis.constructor === Array);
-
toString()
console.log(Object.prototype.toString.call(arr) === "[object Array]");
console.log(Object.prototype.toString.call(lis) === "[object Array]");
- ES 提供的方法
isArray()
console.log(Array.isArray(arr));
console.log(Array.isArray(lis));
五、為什麼要将類數組轉換為數組
類數組不具有數組的所有方法，轉換為數組後就可以使用
pop()
push()
shift()
unshift()
reserve()
sort()
splice()
等方法
六、如何将類數組轉換為數組
var obj = {
0: "Aurora",
1: 21,
2: "music",
length: 3
}
//第一種方法 Array.prototype.slice.call(arrayLike, start);
var arr = [];
var arr = arr.slice.call(obj);
console.log(arr); //(3) ["Aurora", 21, "music"]
//第二種方法 Array.from(arrayLike);
var arr = Array.from(obj);
console.log(arr); //(3) ["Aurora", 21, "music"]
//第三種方法 周遊添加入一個空數組
var arr = [];
for(var i = 0; i < obj.length; i++){
arr.push(obj[i]);
}
console.log(arr); //(3) ["Aurora", 21, "music"]
<ul class="wrap">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
以上三種方法同樣适用
// 第四種方法 [...arrayLike];
var likeArray = document.querySelectorAll(".wrap li");
var realArray = [...likeArray];
console.log(realArray); // (5) [li, li, li, li, li]
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)