咨询JavaScript中x[y]方括号访问用法及数组计数代码逻辑

1. x[y] 结构运行机制 #

x[y]是JavaScript中标准的方括号属性访问语法，执行时的逻辑顺序如下：

• 第一步：计算中括号内y的取值，除了Symbol类型会直接作为属性标识外，其他类型的取值会被自动转换为字符串，作为要访问的属性名
• 第二步：在x对象的自身可访问属性、原型链上查找是否存在匹配的属性名
• 第三步：如果找到对应属性就返回它的取值，没有找到则返回undefined

2. 示例代码逻辑拆解 #

你提供的代码作用是统计数组中每个元素的出现频次，完整代码如下：

let arr = ['a','b','b','c','c','c']
let obj = {}

arr.forEach((element) => {
    if (obj[element]){
        obj[element]++
    }else{
        obj[element] = 1
    }
})
console.log(obj) //{a: 1, b: 2, c: 3}

if代码块运算逻辑 #

遍历数组每个元素时的判断逻辑完全基于obj[element]的返回值真假：

• 当某个元素第一次被遍历时，空对象obj上没有对应名称的属性，obj[element]返回undefined，属于JS中的假值，因此进入else分支：给obj新增该元素为名的属性，赋值为1，完成首次计数初始化
• 当该元素后续再次被遍历时，obj上已经存在对应属性，且取值是大于等于1的正整数，属于JS中的真值，因此进入if分支：将对应属性的取值加1，完成计数累加

我们可以用遍历过程验证：

1. 第一个元素a：obj['a']为undefined，走else，obj变为{a:1}
2. 第二个元素b：obj['b']为undefined，走else，obj变为{a:1, b:1}
3. 第三个元素b：obj['b']为1（真值），走if，值加1变为2，obj变为{a:1, b:2}
4. 第四个元素c：obj['c']为undefined，走else，obj变为{a:1, b:2, c:1}
5. 第五个元素c：obj['c']为1（真值），走if，值加1变为2
6. 第六个元素c：obj['c']为2（真值），走if，值加1变为3
   最终输出的obj就是各元素的频次统计结果。

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