持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

本文翻译自Github原文： 30 Days Of JavaScript: Console Object Methods

打印对象方法

console.log()

我们用console.log()打印的结果展示在浏览器调试模式的consoletab控制台下，我们可以替换值或者用%c打印出不同样式的日志.

在浏览器控制台可以看到打印结果

console.log('30 Days of JavaScript')

控制台打印为

30 Days of JavaScript

替换数字或者变量。

console.log('%d %s of JavaScript', 30, 'Days')

补充：%d占位符，对应的第一个参数30替换。%s展位符用按配置占位符顺序的第二个字符串Days替换

30 Days of JavaScript

我们可以给日志加样式，赋值下面代码，粘贴在浏览器控制台下查看看输出结果

console.log('%c30 Days Of JavaScript', 'color:green') // log output is green

console.log(
  '%c30 Days%c %cOf%c %cJavaScript%c',
  'color:green',
  '',
  'color:red',
  '',
  'color:yellow'
) // log output green red and yellow text

console.warn()

我们用console.warn()来打印出警告⚠️的日志。例如，通知或警告某些包已经过时，或者不好的写法。复制以下代码并将其粘贴到浏览器控制台上以查看警告消息

console.warn('This is a warning')
console.warn(
  'You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!'
)
console.warn('Warning is different from error')

console.error()

我们用console.error()来打印出抛出的错误信息，或使用的错误信息。

console.error('This is an error message')
console.error('We all make mistakes')

console.table()

console.table()方法，将data数据以table形式展示在控制台上。将表格形式的数据显示为表格。 console.table()接受一个必传参数data，必须是对象数组，以及另外一个可选参数columns。让我们首先从一个简单的数组开始。下面的代码显示了带有两列的表。索引列显示索引和值列以显示名称

const names = ['Asabeneh', 'Brook', 'David', 'John']
console.table(names)

我们还查看打印的结果。上面例子将创建具有两个columns的table：一个列包含键key的索引列，另外一个value(对象的值) 的列。

const user = {
  name: 'Asabeneh',
  title: 'Programmer',
  country: 'Finland',
  city: 'Helsinki',
  age: 250
}
console.table(user)

赋值到浏览器控制台，查看后面例子的结果，

const countries = [  ['Finland', 'Helsinki'],
  ['Sweden', 'Stockholm'],
  ['Norway', 'Oslo']
]
console.table(countries)

const users = [
  {
    name: 'Asabeneh',
    title: 'Programmer',
    country: 'Finland',
    city: 'Helsinki',
    age: 250
  },
  {
    name: 'Eyob',
    title: 'Teacher',
    country: 'Sweden',
    city: 'London',
    age: 25
  },
  {
    name: 'Asab',
    title: 'Instructor',
    country: 'Norway',
    city: 'Oslo',
    age: 22
  },
  {
    name: 'Matias',
    title: 'Developer',
    country: 'Denmark',
    city: 'Copenhagen',
    age: 28
  }
]
console.table(users)

console.time()

在程序开始使用console.time来记录，相关操作执行时间。每个定时器将具有独特名称。可以运行多大10,000个计时器。当以相同名称调用Console.TimeEnd（）浏览器将输出该名称的定时器包裹的代码执行的时间，输出的时间以毫秒计时

const countries = [
  ['Finland', 'Helsinki'],
  ['Sweden', 'Stockholm'],
  ['Norway', 'Oslo']
]

console.time('Regular for loop')
for (let i = 0; i < countries.length; i++) {
  console.log(countries[i][0], countries[i][1])
}
console.timeEnd('Regular for loop')

console.time('for of loop')
for (const [name, city] of countries) {
  console.log(name, city)
}
console.timeEnd('for of loop')

console.time('forEach loop')
countries.forEach(([name, city]) => {
  console.log(name, city)
})
console.timeEnd('forEach loop')

Finland Helsinki
Sweden Stockholm
Norway Oslo
Regular for loop: 0.34716796875ms
Finland Helsinki
Sweden Stockholm
Norway Oslo
for of loop: 0.26806640625ms
Finland Helsinki
Sweden Stockholm
Norway Oslo
forEach loop: 0.358154296875ms

根据上述打印结果，可以看到常规循环速度比foreach循环慢。

console.info()

在浏览器显示info类型的日志

console.info('30 Days Of JavaScript challenge is trending on Github')
console.info('30 Days Of fullStack challenge might be released')
console.info('30 Days Of HTML and CSS challenge might be released')

console.assert()

Console.Assert（）方法如果断言为false，则将错误消息打印在控制台。如果断言是真，什么也不会发生。第一个参数是断言表达式。如果此表达式为false，则将显示一个断言失败的错误消息。

console.assert(4 > 3, '4 is greater than 3') // no result
console.assert(3 > 4, '3 is not greater than 4') // Assertion failed: 3 is not greater than 4

for (let i = 0; i <= 10; i += 1) {
  let errorMessage = `${i} is not even`
  console.log('the # is ' + i)
  console.assert(i % 2 === 0, { number: i, errorMessage: errorMessage })
}

console.group()

console.group()可以帮助分组不同的日志组。复制以下代码并将其粘贴到浏览器控制台上查看打印结果。

const names = ['Asabeneh', 'Brook', 'David', 'John']
const countries = [  ['Finland', 'Helsinki'],
  ['Sweden', 'Stockholm'],
  ['Norway', 'Oslo']
]
const user = {
  name: 'Asabeneh',
  title: 'Programmer',
  country: 'Finland',
  city: 'Helsinki',
  age: 250
}
const users = [  {    name: 'Asabeneh',    title: 'Programmer',    country: 'Finland',    city: 'Helsinki',    age: 250  },  {    name: 'Eyob',    title: 'Teacher',    country: 'Sweden',    city: 'London',    age: 25  },  {    name: 'Asab',    title: 'Instructor',    country: 'Norway',    city: 'Oslo',    age: 22  },  {    name: 'Matias',    title: 'Developer',    country: 'Denmark',    city: 'Copenhagen',    age: 28  }]

console.group('Names')
console.log(names)
console.groupEnd()

console.group('Countries')
console.log(countries)
console.groupEnd()

console.group('Users')
console.log(user)
console.log(users)
console.groupEnd()

console.count()

它打印了调用Console.Count（）的次数。接受字符串参数。对于统计方法调用的次数非常有用。在下面的示例中，Console.Count（）方法将运行三次

const func = () => {
  console.count('Function has been called')
}
func()
func()
func()

Function has been called: 1
Function has been called: 2
Function has been called: 3

console.clear()

Console.Clear（）清洁浏览器控制台。

练习

Exercises:Level 1

以table形式打印国家数组
以table形式打印国家对象
使用 console.group() 来给日志分组

Exercises:Level 2

10 > 2 * 10 用 console.assert()来打印
用 console.warn()打印警告⚠️日志
用 console.error()打印错误⚠❌日志

Exercises:Level 3

1.检查以下循环之间的速度差： while, for, for of, forEach

30天的JavaScript：打印对象方法