为何我的JavaScript for of循环无法实现输入框大小写转换？

我需要写一段JS脚本，实现输入框失去焦点时，将输入内容的所有大写字母转小写、小写字母转大写的功能。用普通for循环时功能正常，但换成for of循环后完全失效，这是为什么？

可正常运行的普通for循环代码： #

function changeCase() {
  const element = document.getElementById("string");
  const array = element.value.split("");
  for (let i = 0; i < array.length; i++) {
    array[i] = (array[i].toLowerCase() == array[i]) ? array[i].toUpperCase() : array[i].toLowerCase();
  }
  element.value = array.join("");
}

Enter a string: <input type="text" id="string" onchange="changeCase()">

无法生效的for of循环代码： #

function changeCase() {
  const element = document.getElementById("string");
  const array = element.value.split("");
  for (let char of array) {
    char = (char.toLowerCase() == char) ? char.toUpperCase() : char.toLowerCase();
  }
  element.value = array.join("");
}

Enter a string: <input type="text" id="string" onchange="changeCase()">

原因分析 #

问题核心在于for of循环的变量特性：

• 普通for循环中，array[i]直接指向数组的对应元素，修改它就是直接修改原数组的内容；
• 而for of循环里的char是原数组元素的值副本，不是对原数组元素的引用。修改char变量时，只是改变了这个副本的值，原数组里的元素完全没被改动，最后array.join("")自然还是原来的内容。

修正后的for of循环实现 #

有两种常见的修正方式：

方法1：用map生成新数组（更简洁）

直接通过map遍历数组并返回转换后的新元素，不用修改原数组：

function changeCase() {
  const element = document.getElementById("string");
  const reversedCaseArray = element.value.split("").map(char => 
    char.toLowerCase() === char ? char.toUpperCase() : char.toLowerCase()
  );
  element.value = reversedCaseArray.join("");
}

方法2：用entries()获取索引，修改原数组

如果一定要用for of循环修改原数组，可以通过array.entries()同时拿到索引和元素，再通过索引修改原数组：

function changeCase() {
  const element = document.getElementById("string");
  const array = element.value.split("");
  for (const [index, char] of array.entries()) {
    array[index] = char.toLowerCase() === char ? char.toUpperCase() : char.toLowerCase();
  }
  element.value = array.join("");
}

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