学习遍历地图问题

时间:2019-06-06 13:17:10

标签: typescript es6-map

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

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

enter image description here

2 个答案:

答案 0 :(得分:2)

Map.values()/ Map.keys()返回一个Iterator对象[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();

答案 1 :(得分: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.