在javascript中迭代映射

在javascript中迭代映射,javascript,jquery,map,Javascript,Jquery,Map,我有一个这样的结构: var myMap = { partnr1: ['modelA', 'modelB', 'modelC'], partnr2: ['modelA', 'modelB', 'modelC'] }; 我将迭代每个元素(partnr)及其关联(模型) 为了实现这一点,我尝试在每次迭代中使用双美元,但什么也没有发生: $.each(myMap, function (i, val) { $.each(i, function (innerKey, innerV

我有一个这样的结构:

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

    });
});
当使用单值数组(对象)时,我尝试实现的淡入淡出效果很好,但当我需要为每个关键点设置多个值时(如此处所示),效果就不好了

关于如何成功地完成这个迭代有什么想法吗?在这种情况下,除了使用映射,还有其他更好的方法吗


任何建议都会引起人们的兴趣。

$的回调。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);
  });
});

我会使用标准javascript:

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

对于(var i=0;i不要使用迭代器来执行此操作。通过增加回调中的计数器并递归调用下一项上的操作来维护您自己的循环

$.each(myMap, function(_, arr) {
    processArray(arr, 0);
});

function processArray(arr, i) {
    if (i >= arr.length) return;

    setTimeout(function () {
        $('#variant').fadeOut("slow", function () {
            $(this).text(i + "-" + arr[i]).fadeIn("slow");

            // Handle next iteration
            processArray(arr, ++i);
        });
    }, 6000);
}


虽然您的代码中存在逻辑错误。您正在(大致)同时将同一容器设置为多个不同的值。也许您的意思是让每个容器都更新自己的容器。

2019年起对您的问题的回答:

这取决于您使用的ECMAScript版本

ES6之前的课程:

使用以下任何答案,例如:

for (var m in myMap){
    for (var i=0;i<myMap[m].length;i++){
    ... do something with myMap[m][i] ...
    }
} 
对于ES8(ES 2017):

介绍了:

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

针对ES6+的功能方法

如果您想采用更实用的方法来迭代
Map
对象,您可以这样做

constmymap=newmap()
myMap.forEach((值,键)=>{
console.log(值、键)
})

好吧,看起来这个老JQuery线程已经被用户使用了

如果这是您正在寻找的,我建议您使用
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));

谢谢你的回复。通过将$.each(i…)更改为$.each(val..我上面的代码以显示结果的方式工作。但不幸的是,它只显示映射中的最后一个结果,所以它直接跳到最后一个迭代。@user2374903不,它没有跳到最后一个,尽管它看起来是这样做的。我没有仔细查看“setTimeout”调用,因此我将添加到我的答案中。通过将pcount从1更改为0(这意味着它从第一个循环开始)代码起作用了,但只是一个接一个地显示模型。我没有说清楚的错误是,目标是让所有与显示为列表的partnumer相对应的模型消失。好的:为什么?你省略了必要的闭包…我认为这样更快更干净。我跳过了其余部分,因为我不清楚它是什么应该做的。什么是变体?变体最终应该做什么?#变体是将要显示的div的id(淡入)使用来自地图的信息。对于每个partnr,应该在一个列表中淡出相应的模型。谢谢你的建议。我尝试了你的代码,但你是对的,容器有问题。下面的代码可以工作,但这里只有一个单值数组:这看起来是一个很好的方法。$。每个(jArray,function(i,val){setTimeout(function(){$('#reklame2').fadeOut(“慢”,function(){$(this.text(val).fadeIn(“慢”);$('#reklame17').fadeOut(“慢”,function(){$(this.text(val).fadeIn(“慢”);},i*6000);});@user2374903:目的是什么?是每个
partnr
更新一个单独的容器,还是它们都要按顺序运行?还是
partnr1[0]->partnr2[0]->partnr1[1]->partnr2[1]->etc
很抱歉没有明确迭代的对象。每次partnr出现时,所有对应的模型都会在那一刻以列表的形式淡入。这不是一个
映射
,而是一个
对象
。我想问一个愚蠢的问题,当最终用户可能在旧浏览器上时,为什么要使用ES8?@Erik:JS dev开发也发生在web开发以外的领域。在那里,您可能不必担心较旧的浏览器版本,并且可以享受ES8带来的改进。
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));