为什么我的 innerHTML 不返回数组对象？答案

【问题标题】：Why does my innerHTML not return the array objects?为什么我的 innerHTML 不返回数组对象？
【发布时间】：2020-01-30 17:43:01
【问题描述】：

为什么我可以将排序后的数组返回到我的 innerHTML，但是在执行数组对象时我只得到“[object Object]，[object Object]”，我该如何解决这个问题？

排序数组

let vals1 = [8, 3, 2, 5, 4];
vals1.sort();

var numbers = document.getElementById("divPlaceHolder1");
numbers.innerHTML = vals1;

结果：2,3,4,5,8

数组中的对象

let vals2 = [{
    x: 2,
    y: 10
},{
    x: 5,
    y: 6
}];

function compare(a, b) {
    return a.y - b.y;
}

var numbers2 = document.getElementById("divPlaceHolder2");
numbers2.innerHTML = vals2.sort(compare);

结果：[object Object],[object Object]
预期：0: {x: 5, y: 6}, 1: {x: 2, y: 10} 这是做 vals2.sort(compare);在浏览器控制台中。

HTML

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" contant="width=device-width, initial-scale=1.0" />
    <title>practice</title>
    <link rel="stylesheet" href="assets/main.css" />
</head>    
<body>

        <div id="divPlaceHolder1"></div>
        <div id="divPlaceHolder2"></div>

    <script src="assets/main.js"></script>
</body>
</html>

https://jsfiddle.net/q2jn60u3/

【问题讨论】：

使用JSON.stringify(obj)。
结果正是人们对脚本的期望。 .innerHTML 需要一个字符串，.sort() 返回一个数组。因此，浏览器在数组上调用.toString()，然后在其元素上调用.toString()。并且在对象上调用.toString() 返回[object Object]
也就是说...请添加您的预期输出。

标签： javascript html arrays sorting

【解决方案1】：

因为对象不是原始数据类型，不能通过html直接输出。你需要做类似 JSON.stringify(vals2)

【讨论】：

JSON.stringify(vals2)
谢谢我的意思

【解决方案2】：

改变

var numbers2 = document.getElementById("divPlaceHolder"); numbers2.innerHTML = vals2.sort(compare);

到

var numbers2 = document.getElementById("divPlaceHolder"); numbers2.innerHTML = JSON.stringify(vals2.sort(compare));

这应该返回您的项目数组。

let vals2 = [{
    x: 2,
    y: 10
},{
    x: 5,
    y: 6
}]

function compare(a, b) {
    return a.y - b.y;
}

var numbers2 = document.getElementById("divPlaceHolder");
numbers2.innerHTML = JSON.stringify(vals2.sort(compare));

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" contant="width=device-width, initial-scale=1.0" />
    <title>practice</title>
	<link rel="stylesheet" href="assets/main.css" />
</head>    
<body>
    <div id="divPlaceHolder"></div>

    <script src="assets/main.js"></script>
</body>
</html>

【讨论】：