使用 `for...in` 遍历 `textarea.value.split("\n")` 会返回数组索引而非实际行内容，导致序列化错误；应改用传统 `for` 循环、`for...of` 或 `foreach` 来访问每行字符串。
在处理从 <textarea> 提取多行键值对并重新序列化为 JSON 的场景中，一个常见误区是误用 for...in 循环遍历由 split("\n") 生成的字符串数组。由于 for...in 本意是枚举对象的可枚举属性名（对数组而言即数字索引 "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。
