自定义类数组与纯数组的区别 dom元素的API使用场景 获取form表单元素与控件 dom元素的遍历与常用API

类数组定义

1.任何可迭代的结构，或者拥有length属性，其他属性（索引）为非负整数；
2.不具有数组所有方法；
3.元素属性名必须是数值或者可转换为数值的字符。

类数组和纯数组的区别与联系
相同点：
1.都可用下标索引访问每个元素
2.都有length属性
不同点：
1.数组对象类型为Array，遍历数组可以用for...in....和for循环。
2.类数组对象类型为Object，遍历类数组只能用for循环。

类数组转换为纯数组

因为类数组不具有数组所具有的API，所以需要 将类数组转换为纯数组

Array.prototype.slice.call(arguments)

该方法是将arguments对象转换为纯数组的写法。

function list(){
    return Array.prototype.slice.call(arguments);
}
let li=list(1,2,3,4,5);
console.log(li);

Array.from()

该方法ES6新增的方法，它可以将类数组对象和可遍历对象转为纯数组；

console.log(Array.from('star'));

Array.of()

该方法也是ES6新增的Array构造函数，用于将参数中所有值作为元素形成纯数组;

console.log(Array.of(1,2,3,4,5));

扩展运算符

扩展运算符（...）用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中，这里参数对象是个纯数组，纯数组里面的所有对象都是基础数据类型，将所有基础数据类型重新拷贝到新的纯数组中。

let arr=[1,2];
arr1=[..arr];
console.log(arr1);

遍历类数组

类数组本身虽然不是纯数组，但是有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元素集合的纯数组。