Javascript 是否有更好的方法循环通过此对象？

JSON

JS

for（数据中的k）{
对于（数据[k]中的x）{
var cObj=数据[k][x]；
$（“#列表”）。追加(
“
”+x+“
”
);
对于（变量i=0；i

---

我得到了预期的结果。但我觉得我用了太多的for循环。这是我的示例。

您不需要外部循环，因为只有一个属性

最里面的循环可以通过使用

.map（）

获取国家的名称和

.join（）

将它们与正确的HTML链接（还可以在

map/join

调用之前和之后添加开头和结尾

div

来替换

var数据={
“国家”：{
“欧洲”：[{名称：“英格兰”，缩写：“恩”}，{名称：“西班牙”，缩写：“es”}]，
“美洲”：[{名称：“美国”}]，
“亚洲”：[{名称：“中国”}]
}
};
用于（数据国家/地区中的常数x）{
const cObj=国家数据[x]；
$（“#列表”）。追加(
“
”+x+“
”+
cObj.map（c=>c.name）.join（“”）+
“
”
);
}

#list>li>p{
字体大小：粗体；
}
#列表>列表>分区{
左侧填充：10px；
}

您不需要外部循环，因为只有一个属性

最里面的循环可以通过使用

.map（）

获取国家的名称和

.join（）

将它们与正确的HTML链接（还可以在

map/join

调用之前和之后添加开头和结尾

div

来替换

var数据={
“国家”：{
“欧洲”：[{名称：“英格兰”，缩写：“恩”}，{名称：“西班牙”，缩写：“es”}]，
“美洲”：[{名称：“美国”}]，
“亚洲”：[{名称：“中国”}]
}
};
用于（数据国家/地区中的常数x）{
const cObj=国家数据[x]；
$（“#列表”）。追加(
“
”+x+“
”+
cObj.map（c=>c.name）.join（“”）+
“
”
);
}

#list>li>p{
字体大小：粗体；
}
#列表>列表>分区{
左侧填充：10px；
}

我给你的建议是去掉裸环！它们确实使代码更难阅读。而是使用

forEach

，

map

等功能。请使用以下方法查看此代码段：

var数据={
“国家”：{
“欧洲”：[{名称：“英格兰”，缩写：“恩”}，{名称：“西班牙”，缩写：“es”}]，
“美洲”：[{名称：“美国”}]，
“亚洲”：[{名称：“中国”}]
}
};
对象.键（数据.国家）.forEach（函数（大陆）{
var countryList=数据。国家[大陆]；
$（“#列表”）。追加（“
”+大陆+”
”）；
countryList.forEach（函数（countryObj）{
$（“#list li”）.append（“+countryObj.name+”）；
});
});
我给你的建议是去掉裸环！它们确实使代码更难阅读。而是使用
forEach
，
map
等功能。请使用以下方法查看此代码段：


var数据={
“国家”：{
“欧洲”：[{名称：“英格兰”，缩写：“恩”}，{名称：“西班牙”，缩写：“es”}]，
“美洲”：[{名称：“美国”}]，
“亚洲”：[{名称：“中国”}]
}
};
对象.键（数据.国家）.forEach（函数（大陆）{
var countryList=数据。国家[大陆]；
$（“#列表”）。追加（“
”+大陆+”
”）；
countryList.forEach（函数（countryObj）{
$（“#list li”）.append（“+countryObj.name+”）；
});
});

为您准备。这应该比你原来的帖子更有表现力

for (k in data) {

  for (x in data[k]) {
    var cObj = data[k][x];

    $("#list").append(
      "<li><p>" + x + "</p></li>"
    );

    for (var i=0; i < cObj.length; i++) {
      $("#list").append(
        "<div> " + cObj[i].name + " </div>"
      );
    }
  }
}

var数据={
“国家”：{
“欧洲”：[{名称：“英格兰”，缩写：“恩”}，{名称：“西班牙”，缩写：“es”}]，
“美洲”：[{名称：“美国”}]，
“亚洲”：[{名称：“中国”}]
}
};
常量大陆=Object.key（data.countries）；
对于（设j=0；j<大陆长度；j+=1）{
$（“#列表”）。追加(
“
”+大陆[j]+“
”
);
让countries=Object.values（data.countries[大陆]]）；
对于（设i=0；i

与我的答案相比，我更喜欢其他两个答案，它们看起来比我的答案性能更好，循环次数更少。
。这应该比你原来的帖子更有表现力

for (k in data) {

  for (x in data[k]) {
    var cObj = data[k][x];

    $("#list").append(
      "<li><p>" + x + "</p></li>"
    );

    for (var i=0; i < cObj.length; i++) {
      $("#list").append(
        "<div> " + cObj[i].name + " </div>"
      );
    }
  }
}

var数据={
“国家”：{
“欧洲”：[{名称：“英格兰”，缩写：“恩”}，{名称：“西班牙”，缩写：“es”}]，
“美洲”：[{名称：“美国”}]，
“亚洲”：[{名称：“中国”}]
}
};
常量大陆=Object.key（data.countries）；
对于（设j=0；j<大陆长度；j+=1）{
$（“#列表”）。追加(
“
”+大陆[j]+“
”
);
让countries=Object.values（data.countries[大陆]]）；
对于（设i=0；i

我比我的答案更喜欢其他两个答案，它们看起来比我的答案性能更好，循环次数更少。
我无法找到将其减少为一个循环的方法，但您可以将其减少为两个，并提高可读性（如前一个答案中所述）

$。每个（数据、国家、职能（大陆、国家）{
$（“#列表”）。追加(
“
”+大陆+“
”
);
美元。每个（国家，职能（指数，国家）{
$（“#列表”）。追加(
“”+country.name+“”
);
})
})

.
我无法找到将其减少为一个循环的方法，但您可以将其减少为两个，并提高可读性（如前面的回答中所述）

$。每个（数据、国家、职能（大陆、国家）{
$（“#列表”）。追加(
“
”+大陆+“
”
);
美元。每个（国家，职能（指数，国家）{
$（“#列表”）。追加(
“”+country.name+“”
);
})
})

.
我们可以利用jQuery的
.append（）
接受数组的能力。这个allo
var data = {
  "countries": {
    "europe" : [{name: "England", abbr: "en"}, {name: "Spain", abbr: "es"}],
    "americas" : [{name: "Unites States"}],
    "asia" : [{name: "China"}]
  }
};
const continents = Object.keys(data.countries);
for (let j = 0; j < continents.length; j += 1) {

    $("#list").append(
      "<li><p>" + continents[j] + "</p></li>"
    );

    let countries = Object.values(data.countries[continents[j]]);

    for (let i = 0; i < countries.length; i += 1) {
      $("#list").append(
        "<span> " + countries[i].name + " </span>"
      );
    }
  }

$.each(data.countries, function(continent, countries){

  $("#list").append(
      "<li><p>" + continent + "</p></li>"
  );

  $.each(countries, function(index, country){
    $("#list").append(
        "<div> " + country.name + " </div>"
    );
  })

})