如何用JavaScript的groupBy()在HTML中展示分组后的数组？

嘿，这个问题我太熟悉了！你之所以看到[object Object]而不是预期的分组结构，是因为直接把JavaScript对象和字符串拼接时，JS会自动调用对象的toString()方法——而默认情况下，这个方法返回的就是[object Object]，完全看不出内部结构。

快速解决方法 #

要把对象的真实内容展示出来，你需要用JSON.stringify()把对象转换成可读性强的JSON字符串，再搭配<pre>标签来保留格式，让结构清晰直观。修改你设置div.innerHTML的代码：

div.innerHTML = 'groupedByLocation: <pre>' + JSON.stringify(groupedByLocation, null, 2) + '</pre>';

• <pre>标签会保留字符串的换行和缩进，避免内容挤成一团；
• JSON.stringify的第三个参数2表示用2个空格缩进，让分组的层级关系一目了然；第二个参数null表示我们不需要过滤任何属性，全部展示。

顺便优化控制台输出 #

你控制台那行代码console.log('groupedByLocation' + groupedByLocation)也会出现同样的问题，建议改成用逗号分隔，这样控制台能直接展开对象查看细节：

console.log('groupedByLocation', groupedByLocation)

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>JSON Test</title>
</head>
<body>
 <div id="myData"></div>

 <script>
const events = [{
 time: '12:00', location: 'mall'
}, {
 time: '9:00', location: 'store'
}, {
 time: '9:00', location: 'mall'
}, {
 time: '12:00', location: 'store'
}, {
 time: '12:00', location: 'market'
},]

Array.prototype.groupBy = function(prop) {
 return this.reduce(function(groups, item) {
 const val = item[prop]
 groups[val] = groups[val] || []
 groups[val].push(item)
 return groups
 }, {})
}

const groupedByLocation = events.groupBy('location')
console.log('groupedByLocation', groupedByLocation)

var mainContainer = document.getElementById("myData");
var div = document.createElement("div");
div.innerHTML = 'groupedByLocation: <pre>' + JSON.stringify(groupedByLocation, null, 2) + '</pre>';
mainContainer.appendChild(div);
 </script>
</body>
</html>

这样修改后，页面上就能清晰显示你期望的分组结构啦！

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