如何在JavaScript循环中为用户对象添加所属国家字段（Vue场景）

我来帮你搞定这个问题～你现在需要把每个用户对象添加上所属的国家字段，其实不用额外再套循环，在提取用户的同时就能完成这个操作，而且用数组的forEach方法会比传统for循环更简洁易读，也更贴合Vue开发中常用的函数式写法。

问题回顾 #

你已经通过嵌套for循环把country_users里的所有用户提取到了users数组，但还没给每个用户加上对应的country属性，其实完全可以在遍历过程中一步完成这个操作，不用额外新增循环。

你的原代码 #

var users = [];
var country_users = [
 {
 "country": "United States",
 "users": [
 { "name": "John" },
 { "name": "Jane" },
 ],
 },
 {
 "country": "Norway",
 "users": [
 { "name": "Ola" },
 { "name": "Jens" },
 ],
 },
];
// 此处我将country_users中的所有用户推入新数组users
for (let cu = 0; cu < country_users.length; cu++) {
 for (let u = 0; u < country_users[cu].users.length; u++) {
 users.push(country_users[cu].users[u]);
 }
 // 是否需要在此处新增循环为users数组中的每个对象添加country字段？该如何实现？
}
console.log(users);

期望的最终结果 #

var users = [
 { "name": "John", "country": "United States" },
 { "name": "Jane", "country": "United States" },
 { "name": "Ola", "country": "Norway" },
 { "name": "Jens", "country": "Norway" }
];
console.log(users);

优化后的解决方案 #

用forEach嵌套遍历，在将用户推入users数组之前，直接给当前用户对象添加country属性，一步到位：

var users = [];
var country_users = [
 {
 "country": "United States",
 "users": [
 { "name": "John" },
 { "name": "Jane" },
 ],
 },
 {
 "country": "Norway",
 "users": [
 { "name": "Ola" },
 { "name": "Jens" },
 ],
 },
];
country_users.forEach((country_user) => {
 country_user.users.forEach((user) => {
 // 直接为当前用户对象添加所属国家字段
 user.country = country_user.country;
 users.push(user);
 });
});
console.log(users);

额外小提示（避免修改原对象）

如果不想修改country_users里的原始用户对象（比如原对象是Vue的响应式数据，不想破坏原结构），可以用对象展开语法创建一个新的用户对象：

country_users.forEach((country_user) => {
 country_user.users.forEach((user) => {
 // 创建新对象，保留原用户属性并添加country字段
 const userWithCountry = { ...user, country: country_user.country };
 users.push(userWithCountry);
 });
});

这种写法不仅简洁，还更符合现代JavaScript的编码风格，在Vue项目里也更容易维护。

内容的提问来源于stack exchange，提问作者Pinch