JS中为何{}+{}输出[object Object][object Object]？如何避免？

一、你的代码核心问题 #

1. 循环边界错误 #

你的循环条件写的是 i <= ids.length，但数组索引从0开始，ids.length 是3，这会让i取到0、1、2、3四个值。当i=3时，ids[3] 和 types[3] 都是 undefined，导致payload里多塞了一个 {"id":undefined, "type":undefined} 的空对象，这就是输出里第四个 [object Object] 的来源。把循环条件改成 i < ids.length 就能解决。

2. 字符串拼接的类型转换问题 #

用 'result is ' + payload 时，JS会自动把数组转成字符串。数组转字符串是调用 toString() 方法，把每个元素转成字符串后用逗号分隔；而对象默认的 toString() 方法会返回 "[object Object]"，所以多个对象拼接就变成了一串 [object Object],[object Object]...。

二、为什么 {} + {} 会输出 "[object Object][object Object]" #

JS里的 + 运算符只要有一边是字符串，就会把另一边也转成字符串做拼接。这里两个 {} 都是对象，参与运算时会先调用 toString() 转成 "[object Object]"，然后两个字符串直接拼接，就得到了这个结果。

注意：少数环境下 {} + {} 会被解析成代码块加表达式，结果是 NaN，但日常写代码或控制台直接输入时，基本都是字符串拼接的结果。

三、如何避免这种情况 #

想要正确展示对象内容，常用这几种方法：

• 直接用console.log多参数打印：console.log('result is ', payload)，控制台会直接展示数组的结构，不会强制转成字符串。
• 用JSON.stringify转成格式化字符串：console.log('result is ' + JSON.stringify(payload, null, 2))，第二个参数null是过滤规则，第三个参数2是缩进空格，输出的字符串会带格式，可读性更强。
• 手动遍历拼接：如果要自定义输出格式，可以循环数组把每个对象转成字符串再拼接，比如：

  let output = payload.map(item => JSON.stringify(item)).join(',\n');
  console.log('result is :\n' + output);
  

修正后的完整代码 #

var ids = [10,20,30];
var types= ['PIZZA','HAMBURGER','AVOCADO'];
var payload=[];

for(let i = 0; i < ids.length; i++){
    var id= ids[i];
    var type= types[i];
    var couple={"id":id ,"type":type};
    console.log(couple);
    payload.push(couple);
}
           
// 方法1：直接打印数组结构
console.log('result is ', payload);
// 方法2：输出格式化的JSON字符串
console.log('result is ' + JSON.stringify(payload, null, 2));

内容的提问来源于stack exchange，提问作者AndreaCavallo.class