JavaScript中数组toString()与直接赋值innerHTML的差异疑问

虽然两段代码的输出结果看起来一致，但背后的逻辑和适用场景还是有区别的：

• 调用方式不同
  第一段是显式调用数组的toString()方法，主动把数组转换成逗号分隔的字符串；第二段是JS在将数组赋值给innerHTML（要求接收字符串类型）时，自动触发隐式类型转换，底层还是调用了数组的toString()方法，所以最终结果一致。

• 其他场景下的表现不同
  如果脱离innerHTML这个场景，两者的行为就不一样了。比如直接在控制台打印：

  console.log(fruits); // 输出数组本身的结构：["Banana", "Orange", "Apple", "Mango"]
  console.log(fruits.toString()); // 输出字符串：Banana,Orange,Apple,Mango
  

  另外，如果数组的toString()方法被重写，两种写法都会使用重写后的逻辑，但显式调用的意图更明确。

• 代码可读性差异
  显式调用toString()能清晰传达你的意图：就是要把数组转成字符串再赋值。而直接赋值数组的写法，对于JS新手来说可能会困惑“为什么数组直接放进去就变成了逗号串”，可读性稍弱。

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