es6中提供将其余数据转化为数组的快捷API

Array.from

Array.from方法主要用于将Array-Like Obj(包括DOM对象document.querySeletorAll(...))和iterable对象转化为数组。和下面说的spread操做符相比，它能够直接将Array-Like obj进行转化，而不须要这个类数组对象是iterable的。

function add() {
        let arr = [].slice.apply(arguments);
    }
    
    function add() {
        let arr = Array.from(arguments);
    }
    
    --------
    
    //经过这个方法,将`Array-Like Obj`直接转化为了Array.所以可使用Array提供的方法
    var lis = Array.from(document.querySelectorAll('li'));
    lis.forEach(function(dom, index) {
        // do something
    });

此外，Array.from还接收第二个参数，和Array.prototype.map方法相似.

function foo() {
        let args = Array.from(arguments, item => item + 1);
        console.log(args);
    }
    
    foo(1, 2, 3);    // 2 3 4

能够利用Array.from来返回字符串的长度，由于在js里面，大于uFFFF的Unicode字符长度是算为2个的。

//这里是由于String类型的数据是iterable的，因此能够被Array.from转化为数组
    function countLen(str) {
        return Array.from(str).length;
    }

...args (rest参数)

rest参数主要是在定义函数的时候，用以获取函数多余的函数,这样在函数内部便可不使用arguments对象.由于rest参数是一个数组，所以能够直接利用Array提供的相应的API。

好比一个求和的函数：
    
    之前的写法：
    function add() {
        [].reduce.call(arguments, function(x, y) {
            return x + y;
        });
    }
    
    es6:
    
    function add(...args) {
        args.reduce((x, y) => x + y);
    }

还可使用rest参数搭配解构赋值使用:

function foo(...args) {
        let [x = 0, y = 2] = args;
        //....
    }

在使用箭头函数的时候：

function foo(...args1) {
        var obj = {
            add: () => {
                console.log(arguments);
            }
        }
        obj.add(1, 2, 3);
    }
    
    foo(4, 5, 6);   //最后输出 [4, 5, 6]

这里由于箭头函数没有自身的this,它内部的this事实上是由所在的做用域提供的。所以arguments对象也是所在做用域提供的。因此会输出[4, 5, 6]。

这里若是要正确获取obj.add(1, 2, 3)提供的参数,可使用rest参数:

function foo(...args1) {
        var obj = {
            add: (...args2) => {
                console.log(args2);
            }
        }
        obj.add(1, 2, 3);
    }
    
    foo(4, 5, 6);    //最后输出  [1, 2, 3]

spread操做符

spread操做符用以将一个iterable(部署了[Symbol.Iterator]接口)的value转化为用逗号分隔的参数序列。

哪些数据结构部署了[Symbol.Iterator]的接口呢：

• Array

• Maps

• Sets

• 部署了[Symbol.Iterator]接口的Array-like obj(arguments)

• Dom data Structures

• String

对象字面量:

var obj = {
        name: 'xl',
        age: 20
    }
    
    console.log(...obj);

是没有部署[Symbol.Iterator]接口的，所以使用spread操做符时会报错：

Uncaught TypeError: (var)[Symbol.iterator] is not a function(…)

同时，普通的Array-like的Obj:

var obj = {
        0: 'x',
        1: 'l',
        length: 2
    }

一样使用spread操做符时会报错。若是将这个Array-like的Obj转化为Array，则须要手动在这个obj上配置[Symbol.iterator]接口：

var obj = {
        *[Symbol.iterator]() {
            yield 'x';
            yield 'l'
        }
    }
    
    console.log(...obj);    //  x l

或者换用其余的API：

方式1： let arr1 = Array.from(obj);
    
    方式2： let arr1 = [].slice.apply(obj);

像以前计算一组数当中最大的数:

Math.max.apply(null, [1, 2, 3]);
    
    --->>> Math.max(...[1, 2, 3]);      // 3

此外，spread操做符还能将部署了[Symbol.Iterator]接口的类数组对象转为用逗号分隔的参数序列：

var li = document.querySeletorAll('li');
    
    [...li];   //转化为数组后就能够利用数组提供的API进行其余的操做

Symbol.Iterator

上面屡次提到了iterable或者是部署了[Symbol.iterable]方法的value,事实上它们说的都是同一个意思,一个话去归纳的话就是： iterable的数据结构提供了统一的接口供外部去获取自身的元素。它所提供的这个接口方法名称就是[Symbol.iterator].

上文已经提到了哪些数据结构部署了[Symbol.Iterator]的接口。

哪些方法会调用[Symbol.Iterator]接口呢：

• 解构赋值

let [a, b] = [1, 2];

• for...of循环

for(let value of [1, 2]) {
    
    }

• spread操做符

[...document.querySelectorAll('li')]

• Promise.all()/Promise.race()

Promise.all(iterableOverPromises).then(···);
    Promise.race(iterableOverPromises).then(···);

• yield*

yield* anIterable

关于iterable和iterator单独用一篇文章来写吧。