一、什么是类数组对象 (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]