深入探索前端 JsonUtils：一站式 JSON 处理利器

深入探索前端 JsonUtils：一站式 JSON 处理利器

引言

在前端开发领域，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于前后端数据交互、本地数据存储等诸多场景。然而，原生的 JSON 操作方法在面对复杂业务需求时，往往显得不够便捷与健壮。此时，一个功能完备的 JsonUtils 工具类便能大显身手。它犹如一位贴心的助手，为开发者提供了一系列高效、容错性强的 JSON 处理方法，涵盖解析、序列化、对象深度操作等各个方面，助力打造流畅的前端应用体验。接下来，让我们一同深入探究这个强大的工具类。

工具类概述

JsonUtils 是精心封装的前端工具类，位于 @/utils/JsonUtils 路径下，专注于解决 JSON 数据处理过程中的常见痛点。它以简洁易用的 API 形式，对外提供了包括安全解析、序列化、对象克隆、合并、扁平化处理等在内的丰富功能，无论是简单的数据格式转换，还是复杂的对象深度操作，都能轻松应对，极大提升了开发效率，减少了因 JSON 处理不当引发的各类问题。

核心方法详解

1. 安全的 JSON 解析 - parse

parse<T>(json: string, defaultValue: T | null = null): T | null {
    try {
        return JSON.parse(json) as T;
    } catch {
        return defaultValue;
    }
}

• 该方法旨在将 JSON 字符串安全地转换为对应的 JavaScript 对象。相较于原生的 JSON.parse，它额外提供了容错机制。当输入的 json 字符串格式非法时，不会直接抛出异常导致程序中断，而是优雅地返回预设的 defaultValue，有效避免了因数据格式问题引发的应用崩溃风险，确保程序稳定性。

2. 安全的 JSON 字符串化 - stringify

stringify(value: any, defaultValue: string = ""): string {
    try {
        return JSON.stringify(value) || defaultValue;
    } catch {
        return defaultValue;
    }
}

• 此方法用于将 JavaScript 对象转换为 JSON 字符串。同样考虑到异常情况，若在序列化过程中出现错误（如对象包含不可序列化的属性或方法），它不会使程序报错，而是按照设定返回 defaultValue，保障了数据序列化的可靠性，使得即使面对复杂或不规范的对象，也能顺利进行字符串化处理。

3. 深拷贝对象 - deepClone

deepClone<T>(obj: T): T {
    return JSON.parse(JSON.stringify(obj));
}

• 实现了对象的深度拷贝功能，这在前端开发中至关重要。通过先将对象序列化为 JSON 字符串，再反序列化回对象的巧妙方式，创建出一个全新的、与原对象完全独立的副本。如此一来，对克隆对象的任何修改都不会影响到原对象，有效避免了数据篡改风险，为复杂数据操作场景提供了坚实保障。

4. 合并多个对象（深度合并） - deepMerge

deepMerge<T>(...objects: Partial<T>[]): T {
    const isObject = (obj: any) => obj && typeof obj === "object";

    return objects.reduce((prev, obj) => {
        Object.keys(obj).forEach(key => {
            const pVal = prev[key];
            const oVal = obj[key];

            if (Array.isArray(pVal) && Array.isArray(oVal)) {
                prev[key] = Array.from(new Set([...pVal,...oVal]));
            } else if (isObject(pVal) && isObject(oVal)) {
                prev[key] = this.deepMerge(pVal, oVal);
            } else {
                prev[key] = oVal;
            }
        });

        return prev;
    }, {}) as T;
}

• 支持将多个对象进行深度合并，合并规则精细且智能。对于数组类型的属性，会去除重复元素后合并；对于普通对象属性，递归进行深度合并；对于简单值属性，则直接覆盖。这种合并方式贴合实际开发需求，能够轻松整合来自不同数据源或不同阶段的对象数据，生成一个完整且符合预期的目标对象。

5. 扁平化对象 - flatten

flatten(obj: object, prefix: string = ""): Record<string, any> {
    return Object.keys(obj).reduce((acc, key) => {
        const pre = prefix.length? `${prefix}.` : "";
        if (
            typeof obj[key] === "object" &&
            obj[key]!== null &&
           !Array.isArray(obj[key])
        ) {
            Object.assign(acc, this.flatten(obj[key], pre + key));
        } else {
            acc[pre + key] = obj[key];
        }
        return acc;
    }, {});
}

• 能够将嵌套多层的复杂对象转换为单层扁平对象，其中嵌套的键名使用 “.” 连接。这在处理需要简化数据结构以便于存储、传输或特定算法处理的场景时极为实用，例如将复杂的配置对象扁平化后存入本地存储，减少存储层级，提升读写效率。

6. 解扁平化对象 - unFlatten

unFlatten(obj: Record<string, any>): object {
    const result = {};

    for (const key in obj) {
        const keys = key.split(".");
        keys.reduce((acc, current, index) => {
            if (index === keys.length - 1) {
                acc[current] = obj[key];
            } else {
                acc[current] = acc[current] || {};
            }
            return acc[current];
        }, result);
    }

    return result;
}

• 作为 flatten 的逆向操作，它能够将单层扁平对象还原为原本的嵌套对象结构，精准地依据键名中的 “.” 分割信息重建对象层级关系，为需要恢复原始数据结构的场景提供了解决方案，确保数据在不同结构需求下的灵活转换。

7. 从对象中提取指定路径的值 - getValueByPath

getValueByPath<T>(obj: any, path: string, defaultValue?: T): T | undefined {
    return path.split(".").reduce((acc, part) => {
        return acc && acc[part]!== undefined? acc[part] : defaultValue;
    }, obj);
}

• 提供了一种便捷的方式，依据给定的 “路径”（以 “.” 分隔的键名序列）从嵌套对象中精准获取指定的值。若路径不存在，可返回预设的 defaultValue，避免因取值失败引发的 undefined 异常，使得在处理复杂对象结构的数据检索时更加得心应手。

8. 设置对象指定路径的值 - setValueByPath

setValueByPath(obj: any, path: string, value: any): void {
    const parts = path.split(".");
    const lastKey = parts.pop()!;
    const target = parts.reduce((acc, part) : any => {
        acc[part] = acc[part] || {};
        return acc[part];
    }, obj);
    target[lastKey] = value;
}

• 与 getValueByPath 相辅相成，允许开发者在嵌套对象的指定路径上设置新值，通过拆分路径、逐层创建或定位目标对象的方式，精准地将给定 value 赋给目标位置，实现对复杂对象内部数据的灵活修改。

9. 移除对象中的空值属性 - removeEmpty

removeEmpty(obj: object): object {
    return Object.entries(obj).reduce((acc, [key, value]) => {
        if (value!== null && value!== undefined && value!== "") {
            acc[key] = value;
        }
        return acc;
    }, {});
}

• 在处理对象数据时，常常需要清理其中的空值属性（如 null、undefined、空字符串）以精简数据，removeEmpty 方法正为此而生。它遍历对象的键值对，过滤掉空值属性，返回一个仅包含有效数据的新对象，优化数据存储与传输效率。

10. 比较两个 JSON 对象是否相等 - isEqual

isEqual(obj1: any, obj2: any): boolean {
    return JSON.stringify(obj1) === JSON.stringify(obj2);
}

• 提供了一种简单而有效的方式来判断两个对象在 JSON 层面是否完全相等。通过将对象序列化为 JSON 字符串进行比较，避免了直接比较对象引用带来的误判，准确判断对象内容一致性，适用于诸如数据校验、状态对比等多种场景。

11. 序列化对象为查询字符串 - toQueryString

toQueryString(params: Record<string, any>): string {
    return Object.entries(params)
       .reduce((parts: string[], [key, value]) => {
            if (Array.isArray(value)) {
                return parts.concat(
                    value.map(
                        item => `${encodeURIComponent(key)}=${encodeURIComponent(item)}`
                    )
                );
            }
            if (value!== null && value!== undefined) {
                parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
            }
            return parts;
        }, [])
       .join("&");
}

• 当需要将对象数据转换为 URL 查询字符串格式（用于后端交互、页面跳转传参等场景）时，toQueryString 发挥作用。它能智能处理对象中的数组、普通值属性，将其正确编码并拼接为符合 URL 规范的查询字符串，确保数据准确传递。

12. 解析查询字符串为对象 - parseQueryString

parseQueryString(queryString: string): Record<string, any> {
    const params = new URLSearchParams(queryString);
    const result = {};
    for (const [key, value] of params.entries()) {
        if (key in result) {
            if (!Array.isArray(result[key])) {
                result[key] = [result[key]];
            }
            result[key].push(value);
        } else {
            result[key] = value;
        }
    }
    return result;
}

• 作为 toQueryString 的逆向操作，该方法能够将 URL 查询字符串解析回 JavaScript 对象。它充分考虑到查询字符串中可能存在的同名参数（如 ?name=John&name=Doe），将其正确解析为数组或普通值，还原原始数据结构，方便前端后续处理。

使用示例

import { JsonUtils } from '@/utils/JsonUtils';

// 解析 JSON
const obj = JsonUtils.parse('{"name": "test"}');
console.log(obj);

// 序列化对象
const json = JsonUtils.stringify({ name: 'test' });
console.log(json);

// 深拷贝
const originalObj = { a: 1, b: { c: 2 } };
const copy = JsonUtils.deepClone(originalObj);
copy.b.c = 3;
console.log(originalObj.b.c);

// 深度合并对象
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { b: { d: 3 }, e: 4 };
const merged = JsonUtils.deepMerge(obj1, obj2);
console.log(merged);

// 扁平化对象
const nestedObj = { a: 1, b: { c: 2, d: { e: 3 } } };
const flattened = JsonUtils.flatten(nestedObj);
console.log(flattened);

// 解扁平化对象
const unflattened = JsonUtils.unFlatten(flattened);
console.log(unflattened);

// 提取指定路径的值
const complexObj = { a: { b: { c: 1 } } };
const value = JsonUtils.getValueByPath(complexObj, 'a.b.c');
console.log(value);

// 设置指定路径的值
const mutableObj = { a: { b: { c: 1 } } };
JsonUtils.setValueByPath(mutableObj, 'a.b.c', 2);
console.log(mutableObj);

// 移除空值属性
const dirtyObj = { a: 1, b: '', c: null, d: undefined, e: 0 };
const cleanObj = JsonUtils.removeEmpty(dirtyObj);
console.log(cleanObj);

// 比较两个对象是否相等
const objA = { a: 1, b: { c: 2 } };
const objB = { a: 1, b: { c: 2 } };
const isSame = JsonUtils.isEqual(objA, objB);
console.log(isSame);

// 序列化对象为查询字符串
const params = { name: 'test', age: 18, tags: ['a', 'b'] };
const queryString = JsonUtils.toQueryString(params);
console.log(queryString);

// 解析查询字符串为对象
const parsed = JsonUtils.parseQueryString(queryString);
console.log(parsed);

总结

JsonUtils 工具类以其丰富且实用的功能集，成为前端开发中处理 JSON 数据的得力助手。无论是基础的解析、序列化，还是复杂的对象深度操作、数据结构转换，它都能提供高效、容错的解决方案。通过合理运用这些方法，开发者能够更优雅地处理 JSON 数据，提升应用的健壮性与性能，减少因数据处理不当引发的潜在问题，为前端项目的顺利推进保驾护航。希望本文对您深入理解和熟练运用 JsonUtils 有所帮助，让您在前端 JSON 数据的海洋中畅游无阻。