V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
fulvaz
V2EX  ›  JavaScript

哈, 我觉得这道题拿来做面试题不错

  •  
  •   fulvaz · 2018-05-24 21:51:50 +08:00 · 8970 次点击
    这是一个创建于 2135 天前的主题,其中的信息可能已经有所发展或是发生改变。

    加班准备走...

    在 twitter 上看到了个有意思的问题

    我觉得如果有人说自己熟悉 es6 的话, 可以用这个来打脸

        let x = 0;
        async function test() {
            x += await 2;
            console.log(x)
        };
        test();
        x+=1;
        console.log(x);
    

    这里输出了什么? 又是为什么呢?

    答案:

    https://www.youtube.com/watch?time_continue=278&v=bfxglBVSNDI

    ps: 用这种题目做面试题估计又会被人说是造火箭吧. 我倒是觉得面试造火箭没啥错, 万一哪天在拧火箭的螺丝呢?

    原文: https://twitter.com/jaffathecake/status/999269332889763840

    49 条回复    2018-06-09 15:57:29 +08:00
    ericls
        1
    ericls  
       2018-05-24 22:05:26 +08:00 via iPhone
    这个当面试题? 你为啥不问茴香豆的几种写法?
    shuizhengqi
        2
    shuizhengqi  
       2018-05-24 22:15:03 +08:00
    @ericls 4 种
    menc
        3
    menc  
       2018-05-24 22:16:01 +08:00   ❤️ 2
    @ericls 茴 ,回,囘,囬,
    whileFalse
        4
    whileFalse  
       2018-05-24 22:17:19 +08:00   ❤️ 2
    谁要写出这样的代码,并且用它的特性正确地实现了想要的功能,


    就地打死
    ericls
        5
    ericls  
       2018-05-24 22:18:13 +08:00 via iPhone   ❤️ 18
    @menc 这题你就答错了 你每一个都少了 香豆 两个字
    yu099
        6
    yu099  
       2018-05-24 22:20:17 +08:00 via Android   ❤️ 1
    绝对打回去重写
    murmur
        7
    murmur  
       2018-05-24 22:35:38 +08:00
    写这种代码的人建议枪毙 15 分钟
    odirus
        8
    odirus  
       2018-05-24 22:36:39 +08:00
    @ericls #5
    chairuosen
        9
    chairuosen  
       2018-05-24 22:53:27 +08:00   ❤️ 7
    这个问题换个问法可能会合适一些。“我告诉你输出是 1,2,你来分析为什么。”
    问输出什么,好像在考你知不知道这个坑,不知道的永远不知道,我知道所以你 Low ?
    问为什么输出这个,是在考解决问题的能力,即使没有踩过这个坑,也能靠自己能力分析出来。
    fulvaz
        10
    fulvaz  
    OP
       2018-05-24 23:17:57 +08:00   ❤️ 1
    @ericls
    @shuizhengqi
    @whileFalse
    @yu099
    @murmur
    @chairuosen

    楼上的各位, 如果你们认真看了视频, 或者直接拉到最后, 你会发现这是现实中存在的问题, 而不是 js 游戏
    yangbin9317
        11
    yangbin9317  
       2018-05-25 01:25:45 +08:00   ❤️ 1
    其实我有点奇怪竟然有人会不知道答案
    bobsam
        12
    bobsam  
       2018-05-25 02:12:33 +08:00 via iPhone
    实际中不会有这种代码的,这主要是考察 async,await 的知识点,还有异步调用。答不出没关系,这只是说明你基础不扎实,那既然这样我就换个知识点考察。如果答出来了,我就会问你实际应用时,这种情况会是怎样,我会要求你说出一个实际例子了。因为你了解知识点,但是你没应用,那也只是靠背,没啥意思。
    ericls
        13
    ericls  
       2018-05-25 03:13:54 +08:00 via iPhone
    @fulvaz 参考 10 楼

    或者换一个问法 告诉输出的前提下 给你 2 分钟时间 不限方式 搞明白为什么

    能力不是给你一堆代码 让你给出结果 而是给你输入 给你输出 让你实现 还有在过程中 可能有输出和预期有差别的时候 怎么 debug 怎么搞明白为什么
    murmur
        14
    murmur  
       2018-05-25 08:28:38 +08:00
    @fulvaz 直接拉到最后作者说了一句不要把异步和同步混用
    然后再回到那个真的问题,也就是所谓的计算目录文件大小
    首先所有的 file 方法都有 sync 的,这样就避免了 sync 和 async 混用的问题
    然后学的不多的,或者不喜欢语法糖的,会用 promise.all->then 或者 promise 数组 reduce 执行,这样也不存在例子里的问题
    这个题最恶心之处是他考的 JS 奇葩的执行方式,x += await 2;这句的 2 在 await,即便是没用过 await 的也能猜出跟 timeout 一个套路的考题,但是这个题更恶心之处在于 2 在 await,但是 x 不会重新执行
    murmur
        15
    murmur  
       2018-05-25 08:35:35 +08:00
    另外就视频里的那个问题
    生产怎么解决?
    本着 npm 万能和不造轮子的原则
    google 输入 npm directory size
    我发现第一个是 get-folder-size 周下载 1w 多 最近还在更新
    问题完美解决
    就是这样
    node 生态发展这么多年 当你一个很简单很普通跟业务不搭边能用语言描述出来的需求 一定有人造了轮子 而且比你的语法糖更好
    SergeGao
        16
    SergeGao  
       2018-05-25 09:38:26 +08:00
    async 是 es2017 标准,所以应该不算 es6 吧?
    notreami
        17
    notreami  
       2018-05-25 09:52:17 +08:00
    后端菜鸟觉得应该是
    1
    1
    murmur
        18
    murmur  
       2018-05-25 09:57:32 +08:00
    @SergeGao 2016 年,3 阶段草稿是应该算 es2017 吧
    不过对于前端来说只要 babel 能搞定的都叫 es6...实际上是这样的..多新的特性都有人往生产上用
    zj299792458
        19
    zj299792458  
       2018-05-25 10:00:04 +08:00 via iPhone
    es6 是啥,看不懂……
    lauix
        20
    lauix  
       2018-05-25 10:17:13 +08:00   ❤️ 1
    第一想法 是 1,2。第二个想法是 1,3。 看了下答案,我第二想法貌似是正确的。
    pheyer
        21
    pheyer  
       2018-05-25 10:21:52 +08:00   ❤️ 1
    这题应该这么考才对:
    let x = 0;
    async function test() {
    console.log(x);
    x += await 2;
    console.log(x)
    };
    test();
    x+=1;
    console.log(x);
    答案是多少?
    Garwih
        22
    Garwih  
       2018-05-25 10:34:38 +08:00
    @lauix #20 然而答案是 1,2
    lauix
        23
    lauix  
       2018-05-25 10:46:26 +08:00
    @Garwih 那还是我第一想法不错
    nino
        24
    nino  
       2018-05-25 10:47:18 +08:00
    这个题有点坑
    cstome
        25
    cstome  
       2018-05-25 11:16:58 +08:00
    前端面试——总有一道题能问到你。
    SergeGao
        26
    SergeGao  
       2018-05-25 11:21:42 +08:00
    @pheyer 不是很明白最后输出的为啥是 2 呀,我本来以为是 3 才对...
    miketeam
        27
    miketeam  
       2018-05-25 11:25:12 +08:00 via iPhone   ❤️ 2
    先进的文化总是在寻找共识,协调一致。垃圾文化老是在装逼秀智商
    bigggge
        28
    bigggge  
       2018-05-25 11:51:35 +08:00
    相当于这样吧

    let x = 0;

    function* test () {
    x += yield 2;
    console.log(x);
    }

    let t = test();
    Promise.resolve(t.next().value)
    .then(v => {
    t.next(v);
    });
    x += 1;
    console.log(x);
    murmur
        29
    murmur  
       2018-05-25 12:22:53 +08:00
    @SergeGao x += async2 这句只阻塞了后面 前面的 x 没有重新计算 进了函数体的时候 x 是 0 然后 async2 阻塞 去运行函数外面的第一个 console 然后回来继续执行 x 没有重新计算 所以 0+2 还是 2

    这种东西没踩过一次坑谁会用这么恶心的特性
    murmur
        30
    murmur  
       2018-05-25 12:23:19 +08:00
    更正 async->await
    binux
        31
    binux  
       2018-05-25 12:28:42 +08:00   ❤️ 3
    你确定这不是未定义行为?如果 += 是一个原子操作呢?
    例如编译成非 async 时,+= 是原子操作,展开成 a = await 2; x += a; 了呢?
    cjyang1128
        33
    cjyang1128  
       2018-05-25 12:36:23 +08:00
    @ericls
    @menc

    说实话,孔乙己原文问的是回字有几种写法,而不是茴香豆的茴有几种写法。茴香豆的茴只有一种写法,但是来回的回有很多种写法。
    leekafai
        34
    leekafai  
       2018-05-25 12:39:37 +08:00
    楼上兴奋吐槽的可以先进去视频看看,视频里面是有应用场景的。
    murmur
        35
    murmur  
       2018-05-25 13:01:20 +08:00
    @leekafai 场景已经回了 他那个计算文件大小的 npm 随便抓一个包搞定 省事靠谱还优雅 所以其他的场景呢?
    gongbaodd
        36
    gongbaodd  
       2018-05-25 16:29:43 +08:00
    我发现了一个更有意思的是事情,babel 编译之后执行结果就不一样了
    John60676
        37
    John60676  
       2018-05-25 17:34:11 +08:00   ❤️ 2
    natural
        38
    natural  
       2018-05-25 18:00:02 +08:00
    求别遇到一个有坑的就想着拿来当面试题
    gjquoiai
        39
    gjquoiai  
       2018-05-25 21:10:23 +08:00   ❤️ 1
    我觉得楼主理解错造火箭的意思了,你这是问螺丝有几个旋儿
    xiaojie668329
        40
    xiaojie668329  
       2018-05-25 21:15:58 +08:00 via iPhone
    这个有啥吐槽的,基本的考你对 async await 的理解程度。上面还一堆打死人的也是醉了。
    xqin
        41
    xqin  
       2018-05-25 22:22:40 +08:00
    不用 += 就可以得 1, 3
    ```
    let x = 0;
    async function test() {
    x = (await 2) + x;
    console.log(x)
    };
    test();
    x+=1;
    console.log(x);
    ```

    youtube 那个朋友的问题, 换成
    ```
    totalSize = (await getSize(file)) + totalSize
    ```
    就可以解决.

    把 await 放面.
    xqin
        42
    xqin  
       2018-05-25 22:37:07 +08:00
    另外这个问题, 本身并不是 await 引起的, 而是 赋值语句 计算值 是从左向右的这个过程产生的效果.

    具体可参考这个:
    https://twitter.com/KyleDavidE/status/999625457816555520

    ```
    let val = 0;

    function inc1(){
    val++;
    console.log(val);
    return 2;
    }

    function inc2(){
    val += inc1();
    console.log(val);
    }

    inc2();
    ```

    ---

    ```
    let val = 0;

    function inc1(){
    val++;
    console.log(val);
    return 2;
    }

    function inc2(){
    val = inc1() + val;
    console.log(val);
    }

    inc2();
    ```
    xqin
        43
    xqin  
       2018-05-25 22:40:43 +08:00
    再者这个问题和 es6 一毛钱关系都没有, 所以拿这个题来打脸, 并不是打的 es6 这个点, 而是 js 基础知识.
    murmur
        44
    murmur  
       2018-05-25 22:56:24 +08:00
    @xqin 那你用 es5 的语法来解释下为什么 x+=await 2 这句吧

    let x = 0;
    function test() {
    x += 2;
    console.log(x)
    };
    setTimeout(test, 0);
    x+=1;
    console.log(x);

    这是 js 基础的理解版 1 和 3 的答案 也就是能考虑到 await 的 2 个阻塞 x 重新计算了
    但是你从 es5 的哪一条能解释清楚 await2 阻塞了但是回来的时候 x 的值并没有重新计算
    murmur
        45
    murmur  
       2018-05-25 22:59:55 +08:00
    @xqin 没看到上面的回复 打扰了
    rabbbit
        46
    rabbbit  
       2018-05-26 00:15:13 +08:00
    这么理解对吗?
    byztl
        47
    byztl  
       2018-05-26 15:01:48 +08:00 via iPhone
    let 不是常量吗?
    0x11901
        48
    0x11901  
       2018-05-26 23:25:21 +08:00
    第一感觉是 1,3
    打开浏览器 console 试了下是 1、2

    估计这就是我为什么讨厌 js 的原因
    Exin
        49
    Exin  
       2018-06-09 15:57:29 +08:00
    哎,倒在了 `+=` 上面
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1280 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 17:48 · PVG 01:48 · LAX 10:48 · JFK 13:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.