5种在javascript中向浏览器控制台窗口打印数组的方法

本教程讲述了如何将javascript对象的数组显示到控制台日志中进行调试。这也包括如何将原始值打印到控制台。

在javascript中，我们有一个控制台对象，有以下东西用于打印

• 控制台日志
• console.dir
• console.table

如果你有一个包含对象或基元的数组，用console.log打印，它总是给出[object,object]，这对调试是没有帮助的。

let employees = [{ "id": 1, "name": "kiran" }, {  
    "id": 2,  
    "name": "franc"  
}]  
console.log(employees);  

输出结果

[object,object]

让我们看看在javascript中打印数组的例子

如何在javascript中打印原始类型的数组

在这里，我们有像数字、字符串这样的基元数组。

我们可以通过多种方式使用javascript的循环和对象方法来做到这一点

使用循环的for

下面的例子解释了各种情况。

• 使用方括号内联创建字符串数组
• 使用 console.log 一次性打印数组 - [ '一', '二', '三' ] 。
• 使用for的循环来迭代并使用控制台语句来打印

let stringArray = ["one", "two", "three"];  
console.log(stringArray);  
for (let str of stringArray) {  
    console.log(str);  
}  

输出是

one  
two  
three  

使用带有回调函数的forEach

使用数组的每个方法来迭代每个元素，并应用回调函数

let stringArray = ["one", "two", "three"];  
  
stringArray.forEach(function(str) {  
    console.log(str);  
});  

使用map方法的对象键

对象是java脚本中的一个类，它的keys方法接受字符串数组，返回可列举属性的字符串数组，map中的回调函数为每个元素调用。

Object.keys(stringArray).map(str => console.log(stringArray[str]))  

在javascript中打印对象的数组到控制台

一个数组可以包含多个对象。每个对象都包含用{}括起来的键和值对。

我们有多种方法可以显示对象数组

SON.stringfy

使用JSON.stringfy来打印json字符串格式的对象。JSON在每个浏览器中都可用。

let employees = [{ "id": 1, "name": "kiran" }, {  
    "id": 2,  
    "name": "franc"  
}]  
console.log(employees);  
console.log(JSON.stringify(employees));  

输出

[ { id: 1, name: 'kiran' }, { id: 2, name: 'franc' } ]  
[{"id":1,"name":"kiran"},{"id":2,"name":"franc"}]

使用console.table

控制台对象有一个在最新的javascript中引入的表格方法。

它打印出漂亮的表格格式，每个对象在一个数组中代表每一行。

它支持所有的浏览器，也支持从V10+版本开始的节点。

let employees = [{ "id": 1, "name": "kiran" }, {  
    "id": 2,  
    "name": "franc"  
}]  
console.table(employees);  

输出

┌─────────┬────┬─────────┐
│ (index) │ id │  name   │
├─────────┼────┼─────────┤
│    0    │ 1  │ 'kiran' │
│    1    │ 2  │ 'franc' │
└─────────┴────┴─────────┘

总结

打印数组给出的对象，对于调试是没有帮助的，这涵盖了将数组打印到控制台的多种方法。