为何数组元素计数输出结果不同？JS真值判断与类型转换分析

问题场景 #

原本想要实现的逻辑：遍历数组时，若count[item]为真值则自增，否则将其初始值设为1。但当给count.a设置非空字符串初始值时，最终a的统计结果为2，和预期的3不符，以下是两个对比示例：

示例1：初始值为0或"0" #

const letters = ["a", "b", "a", "b", "c", "d", "a"];

let count = {"a": 0}; // 0 或 "0"

letters.forEach(function (item){
   if (count[item]){
    count[item]++
   }else {
    count[item] = 1
   }
})

console.log(count)
// 结果：{a: 3, b: 2, c: 1, d: 1}

示例2：初始值为非空字符串 #

const letters = ["a", "b", "a", "b", "c", "d", "a"];

let count = {"a": "asdasd"}; // 或其他任意非空字符串

letters.forEach(function (item){
   if (count[item]){
    count[item]++
   }else {
    count[item] = 1
   }
})

console.log(count)
// 结果：{a: 2, b: 2, c: 1, d: 1}

原因解释 #

核心在于JavaScript的真值判断规则和自增操作的类型转换，我们一步步拆解示例2的执行流程：

1. 第一次处理"a"：

   • count["a"]的值是"asdasd"，非空字符串属于真值，所以进入if分支执行自增。
   • JavaScript对字符串执行++时，会先尝试将字符串转为数字。非数字格式的字符串转数字结果为NaN，因此count["a"]被赋值为NaN（数字类型的假值）。

2. 第三次处理"a"：

   • 此时count["a"]是NaN，NaN属于假值，所以进入else分支，将count["a"]设为1。

3. 第七次处理"a"：

   • count["a"]是1（真值），执行自增后变为2。

而示例1中初始值为0（假值），第一次处理"a"时会进入else设为1，之后两次处理"a"都是自增，最终得到3，符合预期。

总结：非空字符串的初始值触发了第一次自增，却因类型转换变成假值NaN，导致第三次处理"a"时重新初始化，最终只完成了一次自增，所以结果是2。

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