ES6新增数组方法之Array.from与Array.of

在ES6中，数组方法得到了扩展，首先来看下

Array.from方法

这个方法没有被添加到Array对象的原型中，只能使用Array.from的形式调用。它可以把以下两类对象转化为纯数组对象。
1.类数组对象：拥有length属性的对象
2.可遍历对象：拥有Symbol.iterator接口的对象

来看下面这个例子：

<script>
    function fuc(value1,value2,value3){
        console.log(arguments)
        arguments.map(item=>console.log(item))
    }
    fuc(4,5,6);
</script>

我们打算利用数组map方法遍历函数的arguments属性，然而执行后会报错：

报错的原因是，arguments的原型为Object，而在Object原型对象上并没有map方法。
现在我们可以通过ES6为我们提供的Array.from方法将arguments转化为纯数组。

<script>
    function fuc(value1,value2,value3){
        Array.from(arguments).map(item=>console.log(item));
    }
    fuc(4,5,6);
</script>

执行结果为:

4
5
6

同时Array.from()方法还接收第二个参数，功能上相当于调用map方法：

<script>
    function fuc(value1,value2,value3){
        Array.from(arguments,item=>console.log(item));
    }
    fuc(4,5,6);
</script>

同样，可以输出与调用map方法一样的结果：

4
5
6

再来看一个例子：
页面上有多个li元素，我们想提取里面的单词，组成一个完成的句子。

    <ul>
        <li>that</li>
        <li>is</li>
        <li>my</li>
        <li>favour</li>
        <li>channel</li>
    </ul>

通常情况下，我们需要用到for循环遍历元素，然后将每个li的内容拼接成句子。
但当我们用Array.from，事情就变得简单许多：

<script>
    var els = document.querySelectorAll('ul>li');
    var str = Array.from(els,item=>item.innerText).join(" ");
    console.log(str);
</script>

执行结果：

that is my favour channel

Array.of方法

与Array.from一样，该方法没有添加到Array对象的原型中，调用时直接使用Array.of
为什么会有Array.of方法呢？
我们来看一下在ES5中，定义数组的方法：

 <script>
     var arr1 = new Array(2);
     console.log(arr1);
     var arr2 = new Array(1,2,3);
     console.log(arr2);
 </script>

执行结果：

我们可以看到，当给Array构造函数传入一个参数的时候，数组创建出的是一个长度为n的空数组，而当给构造函数传入多个参数时，数组创建出的是与传入参数内容一致的数组。也就是说，在行为上，Array构造函数传入一个与多个参数，结果是不一致的。
Array.of就是为了统一这种行为差异而存在的。无论参数传入多少，都会生成与传入参数个数一致的数组对象，在行为上保持一致。看下面的代码：

 <script>
     var arrof1 = Array.of(2);
     console.log(arrof1);
     var arrof2 = Array.of(3,4,5);
     console.log(arrof2);
 </script>

执行结果：