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

[fulvaz]

加班准备走...

在 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

[ericls]

这个当面试题？ 你为啥不问茴香豆的几种写法？

[shuizhengqi]

@ericls 4 种

[menc]

@ericls 茴 ，回，囘，囬，

[whileFalse]

谁要写出这样的代码，并且用它的特性正确地实现了想要的功能，


就地打死

[ericls]

@menc 这题你就答错了 你每一个都少了 香豆 两个字

[yu099]

绝对打回去重写

[murmur]

写这种代码的人建议枪毙 15 分钟

[odirus]

@ericls #5

[chairuosen]

这个问题换个问法可能会合适一些。“我告诉你输出是 1，2，你来分析为什么。”
问输出什么，好像在考你知不知道这个坑，不知道的永远不知道，我知道所以你 Low ？
问为什么输出这个，是在考解决问题的能力，即使没有踩过这个坑，也能靠自己能力分析出来。

[fulvaz]

@ericls
@shuizhengqi
@whileFalse
@yu099
@murmur
@chairuosen

楼上的各位, 如果你们认真看了视频, 或者直接拉到最后, 你会发现这是现实中存在的问题, 而不是 js 游戏

[yangbin9317]

其实我有点奇怪竟然有人会不知道答案

[bobsam]

实际中不会有这种代码的，这主要是考察 async,await 的知识点，还有异步调用。答不出没关系，这只是说明你基础不扎实，那既然这样我就换个知识点考察。如果答出来了，我就会问你实际应用时，这种情况会是怎样，我会要求你说出一个实际例子了。因为你了解知识点，但是你没应用，那也只是靠背，没啥意思。

[ericls]

@fulvaz 参考 10 楼

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

能力不是给你一堆代码 让你给出结果 而是给你输入 给你输出 让你实现 还有在过程中 可能有输出和预期有差别的时候 怎么 debug 怎么搞明白为什么

[murmur]

@fulvaz 直接拉到最后作者说了一句不要把异步和同步混用
然后再回到那个真的问题，也就是所谓的计算目录文件大小
首先所有的 file 方法都有 sync 的，这样就避免了 sync 和 async 混用的问题
然后学的不多的，或者不喜欢语法糖的，会用 promise.all->then 或者 promise 数组 reduce 执行，这样也不存在例子里的问题
这个题最恶心之处是他考的 JS 奇葩的执行方式，x += await 2;这句的 2 在 await，即便是没用过 await 的也能猜出跟 timeout 一个套路的考题，但是这个题更恶心之处在于 2 在 await，但是 x 不会重新执行

[murmur]

另外就视频里的那个问题
生产怎么解决？
本着 npm 万能和不造轮子的原则
google 输入 npm directory size
我发现第一个是 get-folder-size 周下载 1w 多 最近还在更新
问题完美解决
就是这样
node 生态发展这么多年 当你一个很简单很普通跟业务不搭边能用语言描述出来的需求 一定有人造了轮子 而且比你的语法糖更好

[SergeGao]

async 是 es2017 标准,所以应该不算 es6 吧?

[notreami]

后端菜鸟觉得应该是
1
1

[murmur]

@SergeGao 2016 年，3 阶段草稿是应该算 es2017 吧
不过对于前端来说只要 babel 能搞定的都叫 es6...实际上是这样的..多新的特性都有人往生产上用

[zj299792458]

es6 是啥，看不懂……

[lauix]

第一想法 是 1，2。第二个想法是 1，3。 看了下答案，我第二想法貌似是正确的。

[pheyer]

这题应该这么考才对：
let x = 0;
async function test() {
console.log(x);
x += await 2;
console.log(x)
};
test();
x+=1;
console.log(x);
答案是多少？

[Garwih]

@lauix #20 然而答案是 1，2

[lauix]

@Garwih 那还是我第一想法不错

[nino]

这个题有点坑

[cstome]

前端面试——总有一道题能问到你。

[SergeGao]

@pheyer 不是很明白最后输出的为啥是 2 呀,我本来以为是 3 才对...

[miketeam]

先进的文化总是在寻找共识，协调一致。垃圾文化老是在装逼秀智商

[bigggge]

相当于这样吧

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]

@SergeGao x += async2 这句只阻塞了后面 前面的 x 没有重新计算 进了函数体的时候 x 是 0 然后 async2 阻塞 去运行函数外面的第一个 console 然后回来继续执行 x 没有重新计算 所以 0+2 还是 2

这种东西没踩过一次坑谁会用这么恶心的特性

[murmur]

更正 async->await

[binux]

你确定这不是未定义行为？如果 += 是一个原子操作呢？
例如编译成非 async 时，+= 是原子操作，展开成 a = await 2; x += a; 了呢？

[binux]

这货它就是未定义行为！你用 babel 编译一下结果就是 1，3 了
https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=AQ4GwUwF2APYC8wAMBuAUKYBDAzgTwDsBjYAMwFcSoBLAe0OCglygAoBKYAb0y1HgBqJNgDu2GjABMGfqGINcdSADowdAOZtYHPiAC-s0M1acjIWMICM54AsJLV6rToxA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=

[cjyang1128]

@ericls
@menc

说实话，孔乙己原文问的是回字有几种写法，而不是茴香豆的茴有几种写法。茴香豆的茴只有一种写法，但是来回的回有很多种写法。

[leekafai]

楼上兴奋吐槽的可以先进去视频看看，视频里面是有应用场景的。

[murmur]

@leekafai 场景已经回了 他那个计算文件大小的 npm 随便抓一个包搞定 省事靠谱还优雅 所以其他的场景呢？

[gongbaodd]

我发现了一个更有意思的是事情，babel 编译之后执行结果就不一样了

[John60676]

@binux @gongbaodd https://github.com/babel/babel/issues/8027 看看这

[natural]

求别遇到一个有坑的就想着拿来当面试题

[gjquoiai]

我觉得楼主理解错造火箭的意思了，你这是问螺丝有几个旋儿

[xiaojie668329]

这个有啥吐槽的，基本的考你对 async await 的理解程度。上面还一堆打死人的也是醉了。

[xqin]

不用 += 就可以得 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]

另外这个问题, 本身并不是 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]

再者这个问题和 es6 一毛钱关系都没有, 所以拿这个题来打脸, 并不是打的 es6 这个点, 而是 js 基础知识.

[murmur]

@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]

@xqin 没看到上面的回复 打扰了

[rabbbit]

这么理解对吗?

[byztl]

let 不是常量吗？

[0x11901]

第一感觉是 1，3
打开浏览器 console 试了下是 1、2

估计这就是我为什么讨厌 js 的原因

[Exin]

哎，倒在了 `+=` 上面