类数组和数组的区别与转换

类数组定义

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

对象中的索引会被当做字符串来处理

常见的类数组

• 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元素集合的数组。