- Published on
15-直接把 `log` 作为回调函数
- Authors
- Name
- Dendoink
- @Magiciaaaaaaaan
💡
问题 有没有试过直接把 log
作为回调函数?
console.log
1. 直接在回调中使用 假如有这么一个函数,我们会对服务器返回的数据进行加工,并且传递给回调函数:
function getName(callback) {
// 假设这个对象是从服务器请求回来的数据
const wingman = {
name: 'wingman',
url: 'www.wingman.com'
}
// 我们会使用一个回调来处理他的返回结果
callback(wingman)
}
当我需要确定传递的参数时。一般会里面添加一个 console.log
来检查:
function getName(callback) {
// 假设这个对象是从服务器请求回来的数据
const wingman = {
name: 'wingman',
url: 'www.wingman.com'
}
// 我们会使用一个回调来处理他的返回结果
callback(wingman)
}
getName(v => console.log(v))

但是你可以直接传入 console.log
来接受所有的参数:
getName(console.log)

上面的效果看起来。好像没什么不一样?当你有多个参数传入时,结果就变得不一样了!
function getName(callback) {
// 假设这个对象是从服务器请求回来的数据
const wingman = {
name: 'wingman',
url: 'www.wingman.com'
}
const wingman_FE = {
name: 'FE_wingman',
url: 'www.wingman.com'
}
// 我们会使用一个回调来处理他的返回结果
callback(wingman, wingman_FE)
}
getName(v => console.log(v))
getName(console.log)

2. 使用实时表达式
DevTools
在 Console
面板中引入了一个非常漂亮的附加功能,这是一个名为 Live expression
的工具
只需按下 "眼睛" 符号,你就可以在那里定义任何 JavaScript
表达式。 它会不断更新,表达的结果将永远存在 :-):

Related series
00-写在前面
March 2, 2021
01-Chrome 版本
March 2, 2021
02-复制 & 保存
March 2, 2021
03-快捷键和通用技巧
March 2, 2021
04-使用 Command
March 2, 2021
05-代码块的使用
March 2, 2021
06-console 中的 $
March 2, 2021
07-console.log 的 "bug" ?
March 2, 2021
08-异步的 console
March 2, 2021
09-Ninja console.log
March 2, 2021
10-自定义格式转换器
March 2, 2021
11-对象&方法
March 2, 2021
12-console.log 并不简单
March 2, 2021
13-打造一个终极 log
March 2, 2021
14-打印时间戳
March 2, 2021
15-直接把 `log` 作为回调函数
March 2, 2021
16-初窥 Network
March 2, 2021
17-Network 深入
March 2, 2021
18-Network 细节
March 2, 2021
19-元素面板的基本操作
March 2, 2021
20-元素面板调试技巧
March 2, 2021
21-元素面板里的编辑器
March 2, 2021
22-颜色选择器
March 2, 2021
23-Drawer 使用技巧
March 2, 2021
24-Drawer 动画调试
March 2, 2021
25-Drawer 性能优化
March 2, 2021
26-Workspace 使用技巧
March 2, 2021
27-自动美化输出
March 2, 2021
28-CSS 概览
March 2, 2021
29-Custom UI Themes
March 2, 2021
30-Source diff
March 2, 2021