js基础速成13-Console 对象方法

Console 对象方法

在本节中，我们将介绍 console 及其对象方法。对于绝对初学者来说，通常不知道该使用 console.log()、document.write() 还是 document.getElementById()。

我们使用 console 对象的方法在浏览器控制台显示输出，使用 document.write 在浏览器文档（视口）上显示输出。这两种方法仅用于测试和调试目的。console 方法是浏览器上最流行的测试和调试工具。当我们希望使用 JavaScript 与 DOM 交互时，会使用 document.getElementById()。我们将在另一节中介绍 DOM。

除了著名的 console.log() 方法，console 还提供了其他更多方法。

console.log()

我们使用 console.log() 在浏览器控制台显示输出。我们可以替换值，也可以使用 %c 来设置日志输出的样式。

• 在浏览器控制台显示输出

  console.log('30 Days of JavaScript')
  

  30 Days of JavaScript
  

• 替换

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

  30 Days of JavaScript
  

• CSS

  我们可以使用 CSS 来设置日志消息的样式。复制以下代码并粘贴到浏览器控制台以查看结果。

  console.log('%c30 Days Of JavaScript', 'color:green') // 日志输出为绿色
  console.log(
    '%c30 Days%c %cOf%c %cJavaScript%c',
    'color:green',
    '',
    'color:red',
    '',
    'color:yellow'
  ) // 日志输出为绿色、红色和黄色文本
  

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() 方法在控制台中以表格形式显示数据。它将表格数据以表格形式显示。console.table() 接受一个必需的参数 data，它必须是数组或对象，以及一个可选的额外参数 columns。

让我们首先从一个简单的数组开始。以下代码显示一个包含两个列的表格：一个索引列用于显示索引，一个值列用于显示名称。

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

让我们也看看对象的结果。这将创建一个包含两个列的表格：一个索引列包含键，另一个值列包含对象的值。

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

根据上述输出，常规的 for 循环比 for of 或 forEach 循环慢。

console.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() 方法如果断言为假，则向控制台写入错误消息。如果断言为真，则不执行任何操作。第一个参数是断言表达式。如果该表达式为假，则会显示“Assertion failed”错误消息。

console.assert(4 > 3, '4 is greater than 3') // 没有结果
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() 清空浏览器控制台。

console.clear()