在javascript中迭代地图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在javascript中迭代地图相关的知识,希望对你有一定的参考价值。

我有这样的结构:

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)时工作正常,但是当我需要为每个键设置多个值时(如此处)。

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

任何建议都会引起关注。

答案

我使用标准的javascript

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

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

另一答案

从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);
}
另一答案

$.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);
  });
});
另一答案

不要使用迭代器来执行此操作。通过递增回调中的计数器来维护自己的循环,并递归调用下一项的操作。

$.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);
}

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

以上是关于在javascript中迭代地图的主要内容,如果未能解决你的问题,请参考以下文章

一次迭代并访问多个地图(JavaScript)

使用片段的谷歌地图

谷歌地图片段显示,但没有地图

谷歌地图片段内的片段可以操纵我的地图

Android:在drawerlayout中使用地图膨胀片段时出错

如何在滚动视图中设置谷歌地图片段