有没有试过直接把 log 作为回调函数?

# 1. 直接在回调中使用 console.log

假如有这么一个函数,我们会对服务器返回的数据进行加工,并且传递给回调函数:

function getName(callback) {
    // 假设这个对象是从服务器请求回来的数据
    const wingman = {
        name: 'wingman',
        url: 'www.wingman.com'
    }
    // 我们会使用一个回调来处理他的返回结果
    callback(wingman)
}
1
2
3
4
5
6
7
8
9

当我需要确定传递的参数时。一般会里面添加一个 console.log 来检查:

function getName(callback) {
    // 假设这个对象是从服务器请求回来的数据
    const wingman = {
        name: 'wingman',
        url: 'www.wingman.com'
    }
    // 我们会使用一个回调来处理他的返回结果
    callback(wingman)
}

getName(v => console.log(v))
1
2
3
4
5
6
7
8
9
10
11

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

getName(console.log)
1

上面的效果看起来。好像没什么不一样?当你有多个参数传入时,结果就变得不一样了!

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2. 使用实时表达式

DevToolsConsole 面板中引入了一个非常漂亮的附加功能,这是一个名为 Live expression 的工具

只需按下 "眼睛" 符号,你就可以在那里定义任何 JavaScript 表达式。 它会不断更新,表达的结果将永远存在 😃:

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM