这个Javascript代码输出为[object,Object],而不是[f,dog]

时间:2017-05-20 09:54:17

标签: javascript ecmascript-6 javascript-objects angularjs-filter

此Javascript代码将输出显示为[object,Object],而不是[f,dog]。

 <html>
     <body>
      <button onclick="myFunction()">Try it</button>
      <p id="demo"></p>
       <script>
        var animals = [{name:'f', species :'dog'},{name:'f1', species :'dog1'}];
        function isSog(animal) {

            if(animal.species==='dog') return animal;
        }
        function myFunction() {
            document.getElementById("demo").innerHTML = animals.filter(isSog);
        }
       </script>
      </body>
    </html>

5 个答案:

答案 0 :(得分:0)

在分配给innerHTML之前,您需要将您获得的数组(在filter方法之后)转换为字符串。以下是一个例子,我打电话给JSON.stringify

你可以这样做:

document.getElementById("demo").innerHTML = JSON.stringify(animals.filter(isSog));

或者您可以选择任何其他您想要的格式。您将不得不对返回的数组进行进一步处理。

对于像您这样的简单案例,您可以执行以下操作:

&#13;
&#13;
var animals = [{
  name: 'f',
  species: 'dog'
}, {
  name: 'f1',
  species: 'dog1'
}];

function isSog(animal) {

  if (animal.species === 'dog') return animal;
}

var retObj = animals.filter(isSog);
document.getElementById("demo").innerHTML = "[" + retObj[0].name + "," + retObj[0].species + "]";
&#13;
<p id="demo"></p>
&#13;
&#13;
&#13;

请注意,如果返回的数组较大,则循环并创建字符串将是正确的选项。

答案 1 :(得分:0)

这是因为您尝试将对象输出为字符串。并且它没有用户定义的toString()方法,而是回退到为您提供[object Object]的默认方法。您可以像这样添加该方法以执行有用的操作,例如,它可以返回动物的名称:

     var animals = [{name:'f', species :'dog', toString: function() {
       return this.name}
    }, {name:'f1', species :'dog1', toString: function() {
       return this.name}
    }];
   
    function isSog(animal) {
        if(animal.species==='dog') return animal;
    }
    console.log('' + animals.filter(isSog)); // forcing string conversion as you do in your code

答案 2 :(得分:0)

.filter返回一个新数组。您不能输出这样的引用类型。您需要指定要从DOM输出的内容。在你的情况下:

var newArr = animals.filter(isSog);
var str = '';
if(newArr.length > 0){
    for(var i = 0; i < newArr.length; i++){
        str += "[" + newArr.name + ", " + newArr.species + "] <br>"
    }
}
document.getElementById("demo").innerHTML = str;

答案 3 :(得分:0)

这是因为从filter方法返回的数组是一个对象。在HTML中显示该对象时,它将转换为字符串。如果您运行方法animals.toString(),您将看到我的意思。因此,如果要显示预期结果,您将自己构建一个字符串,看起来就像您想要的那样,或者您可以使用JSON.stringify将数组转换为String。

答案 4 :(得分:0)

function isSog(animal) {

            if(animal.species==='dog') return animal;
        }
function myFunction() {
    document.getElementById("demo").innerHTML = animals.filter(isSog);
        }

isSog函数返回对象动物。这就是你得到结果[object,Object]的原因。

function myFunction() {
     document.getElementById("demo").innerHTML = JSON.stringify(animals.filter(isSog));
        }

希望这有帮助