如何正确遍历 textarea 中按换行符分割的字符串数组

聖光之護 2026-01-20 00:00:00 次阅读

使用 `for...in` 遍历 `textarea.value.split("\n")` 会返回数组索引而非实际行内容，导致序列化错误；应改用传统 `for` 循环、`for...of` 或 `foreach` 来访问每行字符串。

在处理从提取多行键值对并重新序列化为 JSON 的场景中，一个常见误区是误用 for...in 循环遍历由 split("\n") 生成的字符串数组。由于 for...in 本意是枚举对象的<strong>可枚举属性名</strong>（对数组而言即数字索引 "0", "1", "2"…），而非数组元素本身，因此以下代码：

for (var line in textarea.value.split("\n")) {
    console.log(line); // 输出 "0", "1", "2", ... 而非 "key1: ", "key2: 0", ...
}

会导致 line 始终是字符串形式的索引，后续调用 line.split(": ") 实际是对 "0".split(": ") 这类操作，自然无法提取键值，最终生成错误的 JSON 结构（如 {"0": "", "1": ""}）。

✅ 正确做法是显式遍历数组元素。推荐以下任一方式：

方式 1：传统 for 循环（兼容性最佳）

const lines = textarea.value.trim().split("\n");
let jsonParts = [];
for (let i = 0; i < lines.length; i++) {
    const line = lines[i].trim();
    if (!line) continue; // 跳过空行
    const [key, ...rest] = line.split(": ");
    const value = rest.join(": ").trim(); // 处理值中含冒号的情况
    jsonParts.push(`"${key.trim()}": "${value}"`);
}
const json = `{${jsonParts.join(",")}}`;

方式 2：for...of 循环（语义清晰，ES2015+）

const lines = textarea.value.trim().split("\n");
const jsonParts = [];
for (const line of lines) {
    const trimmed = line.trim();
    if (!trimmed) continue;
    const [key, ...rest] = trimmed.split(": ");
    jsonParts.push(`"${key.trim()}": "${rest.join(": ").trim()}"`);
}
const json = `{${jsonParts.join(",")}}`;

方式 3：函数式写法（简洁，适合现代环境）

const json = `{${
  textarea.value
    .trim()
    .split("\n")
    .filter(line => line.trim())
    .map(line => {
      const [key, ...rest] = line.trim().split(": ");
      return `"${key.trim()}": "${rest.join(": ").trim()}"`;
    })
    .join(",")
}}`;

⚠️ 注意事项：

始终对输入做 .trim() 处理，避免首尾空白干扰解析；
使用 filter(line => line.trim()) 排除空行或纯空白行；
若值中可能包含 ": "（如 "description": "foo: bar"），需用 split(": ") 的扩展解构（[key, ...rest]）并重拼 rest，而非简单取 keyval[1]；
for...in 不应用于数组遍历——它是为对象属性设计的，数组应优先使用 for, for...of, forEach, map 等。

掌握这一区别，可避免大量因循环语义误解引发的低级但难排查的序列化 bug。