es6 伪数组和可遍历（iterable）的对象转换为数组

前言

以前我经常会遇到两种方法

[].slice.call(xx)
Array.prototype.slice.call(xx)

这两个方法都是将伪数组转换为数组形式。

伪数组长的什么样？

{
  '0':1,
  '1':1,
  '2':1,
  '3':1,
  length:4
}

伪数组要携带length属性

除了关心什么是伪数组，我们还得知道伪数组在哪里能出现
1.产生nodelist，一般会在和dom节点相关的函数产生，例如

document.getElementByTagNames()
document.getElementsByClassName()
document.querySelectorAll()

2.函数的arguments对象
对于这个arguments对象，我们有时候是这样使用的

[...arguments]

使用这种方式也能将伪数组变成数组，扩展运算符背后调用的是遍历器接口，只有部署了Symbol.iterator才能使用这种方法

ES6的Array.form()

由于es6引入了map，set这类用于iterator接口的数据结构，想要把它们变成数组，上面的方法不能达成我们的目的。

所以es6中引入了Array.form()，同时他也能兼容上面的功能，相当于给之前的功能做了一次拓展

下面是我自己测试使用例子，有兴趣的可以试试

var a=document.querySelectorAll('p')
function* b(){
  yield 1;
  yield 2;
  yield 3;
  yield 4;
}
var c=new Set([1, 2, 3, 4, 4]);
var d={
  '0':1,
  '1':1,
  '2':1,
  '3':1,
  length:4
}
var e=document.getElementsByTagName('div')
var f=document.getElementsByClassName('mayname')
console.log(Array.prototype.slice.call(a))
console.log(Array.prototype.slice.call(b))
console.log(Array.prototype.slice.call(c));
console.log(Array.prototype.slice.call(d));
console.log(Array.prototype.slice.call(e))
console.log(Array.prototype.slice.call(f))
console.log(Array.from(d))
console.log(Array.from(c))
console.log(Array.from(b))
console.log(Array.from(a))
console.log(Array.from({ length: 3 }))