typescript - 学习循环地图问题

Question

我一直在关注关于 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();

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

Answer 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();

Answer 2

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

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

请检查您原始问题中的输出，我对其进行了更新。

values() 方法返回一个新的 Iterator 对象

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

for...of 语句创建一个循环遍历可迭代对象的循环，包括：内置字符串、数组、类数组对象（例如，参数或 NodeList）、TypedArray、Map、Set 和用户定义的可迭代对象。