js多行json数据怎么处理

JavaScript多行JSON数据处理：从解析到实用技巧

在JavaScript开发中,JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其可读性和易解析性被广泛应用，实际场景中我们常遇到“多行JSON数据”——这些数据可能来自日志文件、API响应、文本框输入或数据库存储，格式上可能包含换行符、多余空格，甚至多个独立的JSON对象，如何高效处理这类数据，是开发者需要的技能，本文将系统介绍JavaScript处理多行JSON数据的方法，从基础解析到复杂场景应对，助你轻松应对各类数据格式挑战。

什么是多行JSON数据？

多行JSON数据并非JSON规范中的“标准类型”，而是指在呈现形式上跨越多行、可能包含额外字符的JSON数据，常见形式包括：

1. 单对象多行格式：一个完整的JSON对象因可读性需要被拆分为多行，

   {
     "name": "张三",
     "age": 25,
     "hobbies": [
       "阅读",
       "编程",
       "旅行"
     ]
   }

2. 多JSON对象数组/流：多个JSON对象连续存储，每行一个或通过特定分隔符（如逗号、换行符）分隔，

   {"id": 1, "value": "a"}
   {"id": 2, "value": "b"}
   {"id": 3, "value": "c"}

3. 带多余字符的JSON：包含注释、前后空行、BOM头等非标准JSON字符的数据，

   // 用户信息数据
   {
     "userId": 1001,
     "profile": {
       "city": "北京"
     }
   }
   /* 结尾注释 */

这些数据无法直接通过JSON.parse()解析，需先进行预处理。

基础处理：单对象多行JSON的解析

对于单个多行JSON对象（如示例1），核心问题是去除换行符和多余空格，还原为标准JSON字符串，以下是具体方法：

方法1：字符串替换 + JSON.parse()

通过正则表达式或字符串方法去除换行符（\n、\r）和缩进空格，再调用JSON.parse()解析。

const multiLineJson = `{
  "name": "张三",
  "age": 25,
  "hobbies": [
    "阅读",
    "编程",
    "旅行"
  ]
}`;
// 去除换行符和多余空格（保留字符串内的空格）
const normalizedJson = multiLineJson.replace(/\n|\r/g, '').replace(/\s+/g, ' ').trim();
console.log(normalizedJson); // 输出：{"name":"张三","age":25,"hobbies":["阅读","编程","旅行"]}
// 解析为JavaScript对象
const obj = JSON.parse(normalizedJson);
console.log(obj.name); // 输出：张三

注意：replace(/\s+/g, ' ')会压缩所有空白字符（包括制表符\t）为单个空格，需确保不影响字符串内容（如JSON值中的空格）。

方法2：使用JSON5库解析宽松格式

若JSON包含注释或更宽松的语法（如单引号、尾随逗号），标准JSON.parse()会报错，此时可使用JSON5（JSON的扩展超集）库，它支持解析这些非标准格式。

安装：

npm install json5

使用：

import JSON5 from 'json5';
const宽松Json = `{
  // 注释
  'name': "李四",  // 单引号
  age: 30,        // 无引号的键（需JSON5支持）
  hobbies: ["跑步", "游泳"],
}`;
const obj = JSON5.parse(宽松Json);
console.log(obj.name); // 输出：李四

进阶处理：多JSON对象/流数据的解析

当数据包含多个连续的JSON对象（如示例2），需先分割对象，再逐个解析，常见场景包括NDJSON（Newline Delimited JSON）和JSON Lines格式。

方法1：按行分割 + 逐行解析（适用于每行一个JSON对象）

若数据中每个JSON对象独占一行（如示例2），可通过split('\n')分割行，过滤空行后逐个解析。

const jsonLinesData = `{"id": 1, "value": "a"}
{"id": 2, "value": "b"}
{"id": 3, "value": "c"}
`;
// 按行分割，过滤空行，逐个解析
const objects = jsonLinesData.split('\n')
  .filter(line => line.trim()) // 过滤空行
  .map(line => JSON.parse(line.trim()));
console.log(objects); 
// 输出：[{id: 1, value: "a"}, {id: 2, value: "b"}, {id: 3, value: "c"}]

方法2：拼接为JSON数组（适用于多个对象需合并为数组）

若多个JSON对象需合并为一个数组（如[obj1, obj2, obj3]），可在前后添加[和]，用逗号分隔对象。

const multipleJsonObjs = `{"id": 1, "value": "a"}
{"id": 2, "value": "b"}
{"id": 3, "value": "c"}
`;
// 拼接为JSON数组格式
const jsonArrayString = '[' + multipleJsonObjs.split('\n').filter(line => line.trim()).join(',') + ']';
const objectsArray = JSON.parse(jsonArrayString);
console.log(objectsArray); 
// 输出：同方法1

方法3：使用流式解析（适用于大文件/高频数据）

当数据量较大（如GB级日志文件）或高频接收（如WebSocket实时流），逐行拼接或解析可能导致内存溢出，此时可采用流式解析，逐块读取并处理数据。

示例：Node.js中通过readline逐行解析大文件

const fs = require('fs');
const readline = require('readline');
const fileStream = fs.createReadStream('large_data.jsonl');
const rl = readline.createInterface({
  input: fileStream,
  crlfDelay: Infinity
});
const results = [];
rl.on('line', (line) => {
  if (line.trim()) {
    try {
      const obj = JSON.parse(line.trim());
      results.push(obj);
      // 实时处理（如写入数据库）
      // processObject(obj);
    } catch (err) {
      console.error('解析失败:', line, err);
    }
  }
});
rl.on('close', () => {
  console.log('解析完成，共', results.length, '条数据');
});

浏览器端：使用TextDecoderStream处理网络流

async function fetchAndParseJsonStream(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let buffer = '';
  const results = [];
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
    const lines = buffer.split('\n');
    buffer = lines.pop(); // 保留未完成的行
    for (const line of lines) {
      if (line.trim()) {
        try {
          results.push(JSON.parse(line.trim()));
        } catch (err) {
          console.error('解析失败:', line, err);
        }
      }
    }
  }
  return results;
}

复杂场景处理：带干扰字符的JSON数据

实际数据中常包含注释、BOM头、前后空行等干扰字符，需针对性预处理：

去除BOM头（Byte Order Mark）

某些文本文件（如Windows生成的UTF-8文件）会在开头添加BOM头（\uFEFF），导致JSON.parse()报错，可通过正则移除：

const jsonWithBOM = '\uFEFF{"name": "王五", "age": 28}';
const cleanJson = jsonWithBOM.replace(/^\uFEFF/, '');
const obj = JSON.parse(cleanJson);
console.log(obj.name); // 输出：王五

移除注释（需结合正则或工具库）

标准JSON不支持注释,但若数据含或注释，需先移除，可通过正则表达式简单处理（仅适用于简单注释）：

const jsonWithComments = `{
  // 用户名
  "name": "赵六",
  /* 年龄 */
  "age": 35,
}`;
// 移除单行和多行注释（正则可能不覆盖所有边界情况，建议用工具库）
const noComments