JavaScript统计数组字母数时无法更新对象计数器如何解决

问题原因 #

• 属性访问错误：使用点操作符alphabet.targetLetter访问时，JS会将targetLetter作为固定的属性名查找，不会读取变量targetLetter的实际值，需要改用方括号语法alphabet[targetLetter]动态获取属性。
• 遍历方式不当：for...in用于遍历对象属性，遍历数组时拿到的是索引而非元素，还存在遍历到原型属性的风险，改用for...of可直接拿到数组的每一项元素。
• 初始化语法错误：原代码中alphabet对象的... 'Z':0不是合法语法，无法直接简写生成26个字母的初始属性。

修正后的基础实现 #

完全贴合原有的逻辑，修正错误后可正常运行：

const bigLettersArr = [ "X","E","Q","M","L","L","L","B","X","C","A","F",
                        "X","W","B","W","A","F","D","Z","B","C","L","F",
                        "M","E","B","E","A","M","L","L","B","G","L","G",
                        "H","F","H","G","M","A","F","B","B","C","G","F",
                        "H","Z","B","L","L","H","J","L"]

// 自动生成A-Z所有字母初始计数为0的对象，无需手动逐个编写
const alphabet = Array.from({length: 26}, (_, index) => String.fromCharCode(65 + index))
.reduce((acc, cur) => {
    acc[cur] = 0
    return acc
}, {})

// 遍历数组计数
for (const targetLetter of bigLettersArr) {
    alphabet[targetLetter] += 1
}

console.log(alphabet)

更简洁的实现方案 #

如果不需要在结果中展示出现次数为0的字母，可以直接用数组reduce方法实现，无需提前初始化计数对象，代码更精简：

const bigLettersArr = [ "X","E","Q","M","L","L","L","B","X","C","A","F",
                        "X","W","B","W","A","F","D","Z","B","C","L","F",
                        "M","E","B","E","A","M","L","L","B","G","L","G",
                        "H","F","H","G","M","A","F","B","B","C","G","F",
                        "H","Z","B","L","L","H","J","L"]

const countResult = bigLettersArr.reduce((acc, letter) => {
    // 若字母首次出现，默认初始值为0再加1，否则直接在原有计数上加1
    acc[letter] = (acc[letter] || 0) + 1
    return acc
}, {})

console.log(countResult)

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