JavaScript无法迭代Map键或值避免重复使用迭代器使用可迭代项

如何解决JavaScript无法迭代Map键或值避免重复使用迭代器使用可迭代项

在某些情况下，尝试遍历JavaScript映射键或值失败。该脚本根本不会进入循环。

function pushAndLog(array,values) {
    array.push(...values);
    for (const value of values) {
        console.log(value);
    }
}

const array = [];
const map = new Map([["a",1],["b",2]]);
pushAndLog(array,map.keys());

在此示例中，array得到了正确的更新，但是映射键未得到记录。

解决方法

原因

发生这种情况是因为Map.keys()和Map.values()方法返回的是Iterator对象而不是Iterable对象。

如何修复

避免重复使用迭代器

与Iterable相反，Iterator是一个有状态的对象。您不能重复使用它。特别是，如果将Iterator传递给函数，则以后不能使用它-您应该创建一个新的Iterator。并非总是可能。

使用可迭代项

修复此代码的最简单方法是将集合传递给函数，而不是迭代器：

pushAndLog(array,[...map.keys()]);

但是这种解决方案通常不是最有效的，因为创建新集合会消耗内存和CPU时间。有更好的解决方案。将以下实用程序添加到您的代码中：

export function getIterableKeys<K,V>(map: Iterable<readonly [K,V]>): Iterable<K> {
    return {
        [Symbol.iterator]: function* () {
            for (const [key,_] of map) {
                yield key;
            }
        }
    };
}

export function getIterableValues<K,V]>): Iterable<V> {
    return {
        [Symbol.iterator]: function* () {
            for (const [_,value] of map) {
                yield value;
            }
        }
    };
}

使用它们代替本地的Map.keys（）和Map.values（）方法：

pushAndLog(array,getIterableKeys(map));

它对于较大的地图效果更好。

注释：

这些函数是用TypeScript编写的。要将它们转换为JavaScript，只需从函数头中删除类型定义即可。
这些功能被编写为ES6模块。要将它们转换为纯JavaScript，只需删除export关键字。
嵌套函数是生成器函数，即它们返回还可以用作迭代器的生成器。为了使用此代码，请确保您的解释器支持生成器或结合regenerator-runtime库使用TypeScript / Babel编译器。

一些想法

从Map.keys（）和Map.values（）方法返回Iterator对象是一个糟糕的设计决定，我们必须忍受并始终牢记。此类错误有时是无法预料的，并且很难跟踪，因为迭代器可以很好地起作用，直到您尝试重用它们为止。因此，您必须保持警惕。

在其他成熟的编程语言中，此类方法会巧妙地返回可迭代对象：

在Java中，Map#keySet方法返回一个Set，它扩展了Iterable接口；
在.NET中，Dictionary.Keys属性是一个实现KeyCollection接口的IEnumerable对象。

Java Iterable和.NET IEnumerable都是可重用的，因此它们的用户不会遇到相同的问题。这种方法更安全。对于我来说，这是一个问题，为什么一个相对年轻的JavaScript社区发明自己的解决方案，而不是从现有的成熟编程语言继承最佳实践。

即使JavaScript Iterator或多或少地像Iterable对象一样工作（您可以在for..of循环，散布运算符，集合构造函数等中使用它），但它正式打破了Iterable类协定，该协定可重用，而Iterator不是。

TypeScript定义假装Map.keys（）和Map.values（）返回扩展了Iterable接口的所谓IterableIterator对象，由于相同的原因，这是错误的。

JavaScript无法迭代Map键或值 避免重复使用迭代器使用可迭代项

如何解决JavaScript无法迭代Map键或值 避免重复使用迭代器使用可迭代项