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

2020-03-19 本文已影响0人代艳霞

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

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

<body>
<div class="small-img-look"></div>
<script src="zepto.min.js"></script>
<script>
    var items=[
        {url:"//baidu.com", title:"111对象转字符串", id:1,},
        {url:"//baidu.com", title:"222对象转字符串", id:2,},
        {url:"//baidu.com", title:"333对象转字符串", id:3,},
        {url:"//baidu.com", title:"444对象转字符串", id:4,},
    ];
    function userobj(items0){
        var HTML = "";
        HTML+='<p class="detial-title">'+items0.title+'</p>';
        $(".small-img-look").html(HTML);
    }

    userobj(items[0]);

</script>
</body>

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

传对象参数

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

传参的类型

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

<body>

<ul class="list"></ul>
<div class="big-img-look"></div>

<script src="zepto.min.js"></script>
<script>
    var items=[
        {url:"//baidu.com", title:"111对象转字符串", id:1,},
        {url:"//baidu.com", title:"222对象转字符串", id:2,},
        {url:"//baidu.com", title:"333对象转字符串", id:3,},
        {url:"//baidu.com", title:"444对象转字符串", id:4,},
    ];
function getList() {
        var timeHTML = "";
        for (var i = 0; i < items.length; i++) {
            timeHTML+= "<li  onclick='coverImg("+items[i] + ")'>";
            timeHTML+= items[i].title;
            timeHTML+= '</li>';
        }
        $(".list").html(timeHTML);
    }
function coverImg(currentItems) {
    var HTML = "";
    HTML+='<p class="detial-title">'+currentItems.title+'</p>';
    $(".big-img-look").html(HTML);
}

getList();

</script>
</body>

我们以字符串的方式拼接元素，在行内添加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+= "<li  onclick='coverImg("+items[i]+ ")'>";
  修改为
  timeHTML+= "<li  onclick='coverImg("+JSON.stringify(items[i]) + ")'>";

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

对象转json

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

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

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

猜你喜欢

热点阅读