学习遍历地图问题

Question

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

地点：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() returns 迭代器对象 [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values。您应该使用 Array.from().

转换为数组

见以下代码 -

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 方面是完全正确的，应该运行在所有现代浏览器中。

请检查你原来问题的输出，我更新了它。

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.

学习遍历地图问题

Learning to loop over a Map issue

typescript

es6-map