学习遍历地图问题答案

【问题标题】：Learning to loop over a Map issue学习遍历地图问题
【发布时间】：2019-06-06 13:17:10
【问题描述】：

我一直在关注关于 ES6/Typescript 和 Map 结构使用的在线教程。

位置：https://codecraft.tv/courses/angular/es6-typescript/mapset/

问题是循环中根本没有显示任何内容。我已经比较了我在教程中写的内容，我一生都无法理解为什么它不会在 for 循环中输出数据。

当教程视频中的代码显示它可以工作时，有人能告诉我为什么这不起作用吗？

这里是代码

function mapDisplay(){
        let ddData = new Map([
          ["this", 11],
          ["doesnt", 21],
          ["work", 31]
        ])
    
        console.log('show ddData');
        console.log(ddData);
    
        console.log('show key');
        // Loop over our Map using keys function
        for (let key of ddData.keys()) {
          console.log(key);
        }
    
        console.log('show values')
        // Loop over our Map using values function
        for (let val of ddData.values()) {
          console.log(val);
        }

        console.log('show entries')
        // Loop over our Map using entries function
        for (let entry of ddData.entries()) {
          console.log(entry[0], entry[1]);
        }
      }
    
      mapDisplay();

我在输出控制台中看到的是这个。如您所见，循环没有输出：

【问题讨论】：

在控制台中，ddData 不是Map，而是Array。也许你的文件中有import { Map } from... 这样的行？
您的代码应该在所有现代浏览器中都能正常工作。您使用哪种浏览器？尝试在不同的浏览器中运行它
@Andriy 我正在使用 FF 67.0.1。
@Elijah，尝试使用打开的控制台运行您问题中的代码。现在可以正常使用了吗？
注意：angularjs != angular（尽管这两个问题都与这个问题无关。）

标签： typescript es6-map

【解决方案1】：

Map.values()/Map.keys() 返回一个迭代器对象 [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values。您应该使用 Array.from() 转换为 Array。

见以下代码——

function mapDisplay(){
    let ddData = new Map([
      ["this", 11],
      ["doesnt", 21],
      ["work", 31]
    ]);

    console.log('show ddData');
    console.log(ddData);

    console.log('show key');
    // Loop over our Map using keys function
    for (let key of Array.from(ddData.keys())) {
      console.log(key);
    }

    console.log('show values')
    // Loop over our Map using values function
    for (let val of Array.from(ddData.values())) {
      console.log(val);
    }

    console.log('show entries')
    // Loop over our Map using entries function
    for (let entry of Array.from(ddData.entries())) {
      console.log(entry[0], entry[1]);
    }
  }

  mapDisplay();

【讨论】：

@"您应该使用 Array.from() 转换为 Array" - 为什么？您可以直接使用for... of 循环遍历Iterator。
@user2216584 谢谢您和 mbojko - 您发布的内容确实有效。我所拥有的困境是来自视频中工作的 friggin 视频教程的代码对我不起作用。如果尝试学习的人无法复制结果，则很难学习。
我还在 stackblitz 中运行了代码。似乎 stackblitz 以 es5 为目标来捆绑代码。所以在 es5 中你可以使用 Map 但要迭代你需要使用 Array.from()。但是在 es6 中，如果您在 es6 中定位输出，则不需要。

【解决方案2】：

看起来您正在 STACKBLITZ 中运行代码并在其控制台中检查输出，例如 https://stackblitz.com/edit/js-n9wnqp。这只是 JS 控制台模仿器。

您的代码在 JS 方面完全正确，应该可以在所有现代浏览器中运行。

请检查您原始问题中的输出，我已更新。

The values() method returns a new Iterator object

您不需要将可迭代对象转换为数组，因为

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.

【讨论】：

我在本地运行代码，因为我原来拥有它，你是绝对正确的。它在本地工作。老实说，我没有在本地运行任何教程内容，只是在 stackblitz 中。也感谢您提供这些链接。
另外，感谢您更新帖子，使其能够内联运行代码。我以前没在论坛上看到过。