闲逛摸鱼发现一道风趣的题，标题如下：

let i = 0;
function x() {
    i++;
    return 10;
}
i += x();
console.log(i) // 10 or 11

这道题我发沸点了，本来是不想拿出来单独写一篇文章的，由于太短了，可是我需要存在感，沸点没人看，所以仍是写一篇文章吧；

原沸点在这儿：/pin/7169568…

标题剖析

标题很简略，有用代码只要6行，依照流程剖析一下：

  1. 声明变量 i，赋值为 0
  2. 声明函数 x，函数内部 i 自增，回来 10
  3. i 加等于 x 的回来值

完毕，这个时分 i 的值是 10 仍是 11 呢？可以在浏览器中履行一下；

答案是：10

为什么是 10

js的代码履行大家都知道是从上到下，从左到右的（扫除异步、回调等），然后还有一些特殊的状况，比如函数声明提高、变量提高等，操作符的优先级等等，这些就不在这儿讲了;

这道题的关键在于函数x内部履行了一个i++，下面又有一个i += x()，这儿需要将履行进程拆解一下：

  1. 定义变量 i，赋值为 0
  2. 定义函数 x
    1. i 自增
    2. 回来 10
  3. i 加等于 x 的回来值
    1. i += x()
    2. i = i + x()
    3. i = 0 + x()
    4. i = 0 + 10
    5. i = 10

看到这儿应该就了解为什么是 10 了，由于js的履行机制是从左到右;

i += x()终究会被解说为i = i + x()，从左到右履行，是先取出i的值，然后再履行x()；

i不是一个引用类型，所以是直接拿到i的值0再履行x()，x()内部履行的i++并不会影响到现已获取到的i的值，所以终究的成果是10；

怎么让成果是 11

上面讲到了js的履行是从左到右的，咱们只需要i的取值在x()履行之后就可以了，如下：

let i = 0;
function x() {
    i++;
    return 10;
}
i = x() + i;
console.log(i) // 10 or 11

这样就可以了，由于i的取值是在x()履行之后，所以i的值是1，终究成果便是11了；

解惑

上面讲的是这道理的整体运作原理和流程，不能我说i += x()终究解说的成果便是i = i + x()，可是现实便是如此，下面截图来自MDN 表达式与运算符

一道JS题，让我更深刻的了解了JS的履行机制

可以看到终究的解说便是如此，从这儿可以看到上面解题的剖析是正确的，+=运算符或许便是一个语法糖，最后让成果变成11又引发我一个问题。

以前有一道题是这样的，怎么让a === 1 && a === 2 && a === 3建立，那么我改造一下，成为下面这种方式是否也是可以的呢？代码如下：

var a = 1;
var result = a++ === 1 && a++ === 2 && a++ === 3;
console.log(result);

或者现这种方式：

var a = 0;
var result = ++a === 1 && ++a === 2 && ++a === 3;
console.log(result);

上面这两种方式，终究result的成果都是true，感兴趣可以在控制台输出看看，非常风趣。

总结

确实是一道风趣的题，让我对js的履行机制有了更深的了解，用这道题剖析简略的剖析了一下js的履行机制，js的履行机制是自上而下，从左往右，内部会将一些语法进行拆解，对于非引用类型取值之后，取值的当地就固定了，不会产生修正。

本文正在参加「金石计划 . 瓜分6万现金大奖」