类数组定义
- 任何可迭代的结构,或者拥有
length
属性,其他属性(索引)为非负整数 - 不具有数组所具有的方法
- 元素属性名必须是数值或者可转换为数值的字符
对象中的索引会被当做字符串来处理
常见的类数组
- arguments对象
- DOM方法的返回结果,比如
document.getElementsByClassName()
- jQuery对象,比如
$("div")
类数组和数组的区别和联系
相同点:
- 都可用下标索引访问每个元素
- 都有
length
属性
不同点:
- 数组对象类型为
Array
,遍历数组可以用for...in..
和for
循环 - 类数组对象类型为
Object
,遍历类数组只能用for
循环
类数组转换为数组
因为类数组不具有数组所具有的API,所以更常用的是将类数组转换为数组
Array.prototype.slice.call(arguments)
该方法是将arguments
对象转换为数组的写法
function list() {
return Array..prototype.slice.call(arguments);
}
var li = list(1,2,3,4);
console.log(li);
//[1,2,3,4]
Array.from()
该方法ES6新增的方法,它可以将类数组对象和可遍历对象转为数组
console.log(Array.from('star'));
//['s','t','a','r']
Array.of()
该方法也是ES6新增的Array构造函数,用于将参数中所有值作为元素形成数组
console.log(Array.of(1,2,3,4));
//[1,2,3,4]
扩展运算符
扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中,这里参数对象是个数组,数组里面的所有对象都是基础数据类型,将所有基础数据类型重新拷贝到新的数组中。
let arr = [1, 2],
arr1 = [...arr];
console.log(arr1); // [1, 2]
遍历类数组
类数组本身虽然不是数组,但是有interator接口,所以可遍历。
<div></div>
<div></div>
<div></div>
<script>
let list = document.querySelectorAll('div')
let divArr = [];
for (let i of arr1) {
divArr.push(item)
}
</script>
页面有三个div,list是一个nodeList,即元素集合,并非纯数组,可以用let of遍历。然后依次放入一个空数组。这样divArr就是div元素集合的数组。