在javascript中迭代地图

Question

我有这样的结构:

var myMap = {
    partnr1: ['modelA', 'modelB', 'modelC'],
    partnr2: ['modelA', 'modelB', 'modelC']
};

我将使用它们的关联(模型)迭代每个元素(partnr).

为了达到这个目的,我正在尝试每次迭代加倍$,但没有任何反应:

$.each(myMap, function (i, val) {
    $.each(i, function (innerKey, innerValue) {

        setTimeout(function () {
            $('#variant').fadeOut("slow", function () {
                $(this).text(innerKey + "-" + innerValue).fadeIn("slow");

            });

        }, i * 6000);

    });
});

我正在尝试实现淡入淡出的效果在使用单值数组(Object)时工作正常,但是当我需要为每个键设置多个值时(如此处).

有关如何成功完成此迭代的任何想法,除了使用在这种情况下更好的地图之外还有其他方法吗？

任何建议都会引起关注.

Answer 1

我使用标准的javascript:

for (var m in myMap){
    for (var i=0;i<myMap[m].length;i++){
    ... do something with myMap[m][i] ...
    }
} 

请注意处理对象和数组的不同方法.

Answer 2

ES6+ 的函数式方法

如果您想采用更实用的方法来迭代Map对象，您可以执行以下操作

const myMap = new Map() 
myMap.forEach((value, key) => {
    console.log(value, key)
})

Answer 3

从2019年开始回答您的问题：

这取决于您使用的ECMAScript版本。

ES6之前的版本：

使用以下任何答案，例如：

for (var m in myMap){
    for (var i=0;i<myMap[m].length;i++){
    ... do something with myMap[m][i] ...
    }
} 

对于ES6（ES 2015）：

您应该使用Map具有以下entries()功能的对象：

var myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

for (const [key, value] of myMap.entries()) {
  console.log(key, value);
}

对于ES8（ES 2017）：

Object.entries() 被介绍：

const object = {'a': 1, 'b': 2, 'c' : 3};
for (const [key, value] of Object.entries(object)) {
  console.log(key, value);
}

Answer 4

好吧，看起来这个旧的 JQuery 线程已经被ES6 Map用户采用了。

如果这就是您正在寻找的，我可以建议使用Array.from()将 转换Map为Array. 这使您可以轻松地进行链式转换，例如filter()、map()等。

const map = new Map([
  ['key one', 'value one'],
  ['key two', 'value two'],
]);

// Loop through key-value-pairs
Array.from(map.entries()).map(([key, val]) => console.log(key, val));

// Loop through map keys
Array.from(map.keys()).map(key => console.log(key));

// Loop through values
Array.from(map.values()).map(value => console.log(value));

Answer 5

回调将按$.each()顺序传递属性名称和值。因此，您尝试迭代内部调用中的属性名称$.each()。我想你想要：

$.each(myMap, function (i, val) {
  $.each(val, function(innerKey, innerValue) {
    // ...
  });
});

在内部循环中，给定一个像地图这样的对象，值是数组。没关系，但请注意“innerKey”值都是数字。

编辑- 现在一旦解决了，这就是下一个问题：

    setTimeout(function () {

      // ...

    }, i * 6000);

第一次循环时，“i”将是字符串“partnr1”。因此，该乘法尝试将产生一个NaN. 您可以保留一个外部计数器来跟踪外部映射的属性计数：

var pcount = 1;
$.each(myMap, function(i, val) {
  $.each(val, function(innerKey, innerValue) {
    setTimeout(function() {
      // ...
    }, pcount++ * 6000);
  });
});