对象作为参数提示[object Object]

坑人的[object Object],有时候为了逻辑处理起来更方便，我们可能需要给某一个函数传一个对象，这样操作可以省去我们的数据遍历，但是每次操作都是报错[obj,obj],吃了几次亏，这次打算找一下原因，不然每次都要为了避免出现这样的错误而改为用其他方式来实现，这不是一个明智的选择。

首先给函数传一个对象作为参数，代码如下：

111对象转字符串

• items是一个数组，我们取它的第一个元素，items[0],传给函数userobj，现在我们看一下页面效果：

传对象参数

• 页面没有问题，正常显示。我们再看一下传的参数是不是一个对象，

传参的类型

通过调试和typeof判断items0的类型是一个object。这说明函数是可以传一个对象作为参数的。但是项目中，元素往往都是以字符串的形式拼接而成的，代码如下：

111对象转字符串
222对象转字符串
333对象转字符串
444对象转字符串

• 我们以字符串的方式拼接元素，在行内添加onclick事件，同时给函数coverImg传一个items[i]对象，当我们点击元素，想动态给big-img-look类增加子元素的时候，页面没有显示我们想要的效果，打开控制台有报错，如下图所示：

错误提示

• 点击控制台的错误提示，会进入到页面报错的地方，是在Script的位置，可这样的提示，我们无法找出问题的本质原因。排查问题，我们要一步一步的来，按照页面的逻辑，既然是点击的时候，触发coverImg函数，页面报错，初步判断有两种可能，第一：函数没有添加成功，第二：函数里面的逻辑出了问题，那让我们来一一排查，首先我们要看一下页面加载以后，onclick事件是否添加成功，

Object

• 看到页面显示的,首先onclick事件是添加成功了，但是我们给coverImg传的参数是个[object Object],而不是我们想象中的一个一个的{url:"//baidu.com", title:"111对象转字符串", id:1,}对象，原因出在哪里？其实这要从js语言的语法特性来说了：js对于+、-和*性操作符会在后台转换成不同的数据类型。对于+性操作符：如果两个操作数都是字符串，则将第二个操作数和第一个操作数拼接起来；如果只有一个操作数是字符串，则将另外一个操作数转换为字符串，然后再将两个字符串拼接起来；而对象转换为字符串，默认使用的是toString（）方法，MDN已经写的很清楚，对象调用toString（）返回的结果就是[object Object]如下图所示：

toString

所以按照我们页面的逻辑，我们是用字符串拼接的方式进行传参，而我们给函数coverImg传的是一个对象，对象被转换为[object Object],页面解析以后的结果也就是我们看到的coverImg([object Object]),那原因已经知道了，如何解决这个问题呢？很简单，为了避免对象自动调用toString()方法，我们需要在拼接之前。手动把对象转化为字符串，这样多个字符串就会进行拼接，而不需要后台进行类型转换了。为了保持对象的结构的完整性，我们可以用JSON.stringfy（）方法，把一个对象转换为JSON字符串，如下所示：

  timeHTML+= "
";
  修改为
  timeHTML+= "
";

• 打开页面，点击列表，如下图所示：

对象转json

此时页面才可以正常显示，从此再也不怕[object Object]了。