使用ES5阵列方法和ES6生成器

Using ES5 array methods with ES6 generators

本文关键字:ES6 ES5 阵列 方法 使用      更新时间:2023-12-03

在ES6生成器中使用新的ES5数组函数的正确方法是什么?我是否必须先将可迭代项显式转换为数组,或者有更好的方法吗?例如:

function* range(low, high) {
    var i = low;
    while(i < high)
        yield i++;
}
// Sum of numbers in range, doesn't work
console.log(range(0, 10).reduce((x,y) => x + y));

Generator函数返回Iterator对象。Iterator API不包括更高阶的Array方法,如mapreduce等,因此您需要构建一个中间Array(或使用像wu.js这样的库)

您可以使用spread运算符从(有限)迭代器简明地构建一个数组:

var sum = [...range(0, 10)].reduce((e, i) => e + i)

使用Array.from:构建阵列

console.log(Array.from(range(0, 10)).reduce((x,y) => x + y));

Array.from从可迭代项创建一个数组。看见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from.

如果你想在不创建数组的情况下进行reduce,那么你最终需要做一些事情,比如:

var sum = 0;
for (e of range(0, 10)) sum += e;

由于Array.from目前在Chrome上不工作,我需要另一种方法将迭代器转换为数组。

(当然你可以用polyfill填充)

function iterator2Array(iterator) {
    var result = [];
    for (var item in iterator) {
        result.push(item)
    }
    return result;
}

出于类似的原因,我在Map的原型中添加了一个"toArray",这样我基本上将迭代器转换为Array,这样你就可以使用它的面向函数的方法;当然,数组中的每个项都将是一个[key,value]元组(与Map.entries()中的完全相同)

if (!Map.prototype.toArray) {
    /**
     * Transforms a map into an Array of 'tuples' [[key, value], ...]
     */
    Map.prototype.toArray = function () {
        var result = [];
        for (var item of this) {
            result.push(item);
        }
        return result;
    }
}
var m = new Map([[0, 0], ['a', 'A']]);
m.toArray()

然后您可以将其用作数组——不过请记住[key,value]方法!

m.toArray().map(
    function(item, index, array) {
        var key = item[0],
        value = item[1];
        console.log(key + ": " + value);
        return value;
});

这将返回地图的值(好吧,当然不是超级有用的!)

如果你更喜欢一个看起来更标准的循环:

var i = iterator.entries(),
    result = [],
    value;
while (value = i.next().value) {
    result.push(value);
}