除了 console.log() 之外：JavaScript 中格式化控制台输出的 3 种方法

作为 JavaScript 开发人员，我们直观地使用它console.log()来调试、打印变量并记录当前操作的结果，以确保我们走在正确的编程路径上。

确实，console.log()看起来足够强大，但您是否知道Console API中还有其他很酷的方法可以让您的生活更轻松？

最近，我在一个教程中偶然发现了console.table()，这促使我研究了一下除了普通的console.log()之外的其他方法。以下是我添加到我的调试工具包中的 3 个格式化工具：

1.`console.table()`

顾名思义，console.table()将输出打印在格式良好的表格中，而不是一串文本中console.log()。

假设我们有一个对象数组，每个对象包含多个键值对：

const inventors = [
  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
]

它们的外观如下console.table(inventors)：

┌─────────┬─────────────┬───────────────┬──────┬────────┐
│ (index) │    first    │     last      │ year │ passed │
├─────────┼─────────────┼───────────────┼──────┼────────┤
│    0    │  'Albert'   │  'Einstein'   │ 1879 │  1955  │
│    1    │   'Isaac'   │   'Newton'    │ 1643 │  1727  │
│    2    │  'Galileo'  │   'Galilei'   │ 1564 │  1642  │
│    3    │   'Marie'   │    'Curie'    │ 1867 │  1934  │
│    4    │ 'Johannes'  │   'Kepler'    │ 1571 │  1630  │
│    5    │ 'Nicolaus'  │ 'Copernicus'  │ 1473 │  1543  │
│    6    │    'Max'    │   'Planck'    │ 1858 │  1947  │
│    7    │ 'Katherine' │  'Blodgett'   │ 1898 │  1979  │
│    8    │    'Ada'    │  'Lovelace'   │ 1815 │  1852  │
│    9    │ 'Sarah E.'  │    'Goode'    │ 1855 │  1905  │
│   10    │   'Lise'    │   'Meitner'   │ 1878 │  1968  │
│   11    │   'Hanna'   │ 'Hammarström' │ 1829 │  1909  │
└─────────┴─────────────┴───────────────┴──────┴────────┘

2.`console.group()`和`console.groupEnd()`

这对控制台方法允许你创建输出的层级结构。如果你有一组相关数据，可以将它们包装在console.group()和中console.groupEnd()，如下所示：

console.group('Meat')
console.log('Chicken')
console.log('Pork')
console.log('Beef')
console.groupEnd('Meat')

console.group('Veggies')
console.log('Corn')
console.log('Spinach')
console.log('Carrots')
console.groupEnd('Veggies')

console.group('Fruits')
console.log('Apple')
console.log('Banana')
console.log('Tomato')
console.groupEnd('Fruits')

...您将看到一组漂亮的分组输出（请随意在 Chrome 或 Firefox 控制台上尝试，在我看来它看起来更漂亮）：

Meat
  Chicken
  Pork
  Beef
Veggies
  Corn
  Spinach
  Carrots
Fruits
  Apple
  Banana
  Tomato

3.`console.dir()`

这个功能可能有用，也可能没用，取决于你使用的浏览器。本质上，console.dir()它会打印出指定 JavaScript 项目内的属性的层级列表。

例如，打开浏览器控制台并尝试console.dir()传入以下对象：

const food = {
  'Meat': {
    'Chicken': ['grilled', 'fried'],
    'Pork': ['BBQ', 'steamed'],
    'Beef': ['medium', 'rare']
  },
  'Veggies': {
    'Corn': ['white', 'yellow'],
    'Spinach': ['regular', 'baby-size'],
    'Carrots': ['regular', 'bite-size']
  },
  'Fruits': {
    'Apple': ['green', 'red'],
    'Banana': ['raw', 'ripe'],
    'Tomato': ['big', 'small']
  },
}

在 Chrome 控制台中，您可以看到console.dir(food)比更容易识别数据类型console.log(food)。而在 Firefox 中，两个输出看起来相同。

尽管如此，如果您单击输出开头的三角形，console.dir()和都会console.log()显示格式良好的 JavaScript 对象，并按属性类型及其值整齐地组织起来。

如果您已经熟悉这三种方法，我建议您查看以下资源，试验文章中提到的每种方法，然后告诉我您计划定期使用哪些方法。

调试愉快！

资源：

文章来源：https://dev.to/liaowow/beyond-console-log-3-ways-to-format-console-outputs-in-javascript-236p

除了 console.log() 之外：JavaScript 中格式化控制台输出的 3 种方法

除了 console.log() 之外：JavaScript 中格式化控制台输出的 3 种方法

1.console.table()

2.console.group()和console.groupEnd()

3.console.dir()

资源：

1.`console.table()`

2.`console.group()`和`console.groupEnd()`

3.`console.dir()`