JavaScript中使用++和+1统计数组元素次数结果不同是什么原因？

两者结果不同的根本原因是后置自增运算符++的执行逻辑和+1运算存在本质区别，具体如下：

1. 后置自增x++的执行规则 #

• 先返回变量的当前值作为整个表达式的结果
• 再对变量本身执行+1操作

2. 错误代码的执行过程拆解 #

你第一段代码中map[i] = map[i]++的执行逻辑如下：
当第二次遍历到元素5时，此时map[5]的初始值为1，代码执行步骤：

1. 计算右侧map[i]++：先取出map[5]的当前值1，作为该表达式的返回值，随后将map[5]的值修改为2
2. 执行赋值操作：将表达式返回的1重新赋值给map[5]，刚修改完成的2被直接覆盖，最终map[5]的值还是1

对应错误代码块：

let arr = [3, 5, 5];
let map = {};

for (let i of arr) {
  if(map[i]){
    map[i] = map[i]++ // 存在覆盖问题
  }else{
    map[i] = 1
 }
}
console.log(map); // 输出 {3: 1, 5: 1}

3. 正确代码的执行过程拆解 #

map[i] = map[i] + 1的执行逻辑没有中间覆盖步骤：
当第二次遍历到元素5时：

1. 计算右侧map[i] + 1，直接得到结果2
2. 将2赋值给map[5]，结果符合预期

对应正确代码块：

let arr = [3, 5, 5];
let map = {};

for (let i of arr) {
  if(map[i]){
    map[i] = map[i]+1 // 直接赋值计算结果
  }else{
    map[i] = 1
  }
}
console.log(map); // 输出 {3: 1, 5: 2}

4. 优化写法 #

如果想使用++运算符简化代码，不需要额外写赋值操作，直接写map[i]++即可，也可以使用前置自增++map[i]，两种写法都能得到正确结果：

// 优化后写法1
if(map[i]){
  map[i]++
}

// 优化后写法2
if(map[i]){
  map[i] = ++map[i]
}

内容的提问来源于stack exchange，提问作者user1142130