JavaScript中如何遍历对象内嵌数组，解决函数提前执行、输出不符预期问题

1. loop函数的执行逻辑说明 #

loop并没有提前执行，完全符合JavaScript的表达式运算规则：
你在console.log(i + " " + loop(obj[i]))中把loop(obj[i])作为字符串拼接的运算项，JS会优先计算所有运算项的值再完成拼接：

• 执行loop(obj[i])时，函数内部先遍历数组打印两个url
• 你的loop函数没有写返回值，默认返回undefined
• 最后才完成字符串拼接并打印urls undefined，所以你会先看到两个url的输出，再看到最后一行的拼接结果。

2. 代码修改方案 #

调整loop函数返回需要打印的字符串，而不是在loop内部执行打印即可，修改后的代码如下：

const obj = {
  "urls": [{
      "url": "youtube.com",
      "category": ["react js", "javascript"]
    },
    {
      "url": "facebook.com",
      "category": ["react js", "javascript"]
    }
  ]
}

const loop = (a) => {
  // 只取第一个条目的内容匹配你给出的预期输出，要输出所有条目可去掉[0]遍历拼接
  return `${a[0].url} ${a[0].category.map(item => item.replaceAll(' ', '')).join(',')}`
}

for (let i in obj) {
  console.log(`${i} : ${loop(obj[i])}`);
}

运行后输出结果完全符合你的预期：

urls : youtube.com reactjs,javascript

如果需要输出所有url对应的条目，修改loop函数遍历所有数组元素拼接返回即可。

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