为什么在JavaScript中使用forEach无法修改数组元素？

问题原因 #

• JS中基础类型是按值传递的，forEach遍历拿到的item只是数组元素的副本，你对item重新赋值不会改动原数组的内容，所以首字母大写的处理结果根本没有保存到数组里，最后拼接的还是拆分后的原始内容。
• 字符串是不可变类型，item.toLowerCase()执行后会返回新的小写字符串，你没有用变量接收这个返回值，这行代码没有实际效果。

修复方案 #

更推荐用map方法处理数组转换场景，修复后代码如下：

function camelize(str) {
  return str.split('-')
    .map((item, index) => {
      // 第一个单词直接转全小写返回
      if (index === 0) return item.toLowerCase()
      // 后续单词先转全小写，再首字母大写
      const lowerCaseItem = item.toLowerCase()
      return lowerCaseItem[0].toUpperCase() + lowerCaseItem.slice(1)
    })
    .join('')
}
console.log(camelize("background-color")) // 正确输出 backgroundColor

如果要保留原有的forEach写法，直接修改原数组对应下标的元素即可：

function camelize(str) {
  const strArr = str.split('-');
  strArr.forEach((item, index) => {
    if (index > 0) {
      const lowerCaseItem = item.toLowerCase()
      // 直接修改原数组对应位置的值
      strArr[index] = lowerCaseItem[0].toUpperCase() + lowerCaseItem.slice(1)
    }
  })
  return strArr.join('')
}

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