JavaScript中JSON清理问题：无法移除空值/Null/空白字符

嘿，我看了你的代码，发现你在清理JSON空值的时候踩了几个常见的坑，导致没法达到预期效果。咱们一步步拆解问题，然后给出可行的解决方案：

你的代码里的核心问题 #

• 引用类型判断错误：你用toRemove === []或者toRemove === {}来判断空数组/空对象是行不通的。数组和对象是引用类型，每个新实例的引用都不一样，永远不会全等。得用专门的方法来判断类型和空状态。
• 对象误用数组方法：splice是数组的方法，你遍历的是对象的属性，应该用delete obj[propName]来删除对象的属性，而不是splice。
• 没处理嵌套结构：你的数据里有多层嵌套的对象（比如company、address）和数组（比如invitations），你的函数只处理了第一层，没法深入清理嵌套里的空值。
• 空白字符判断不全：你只判断了单个空格" "，如果是多个空格、制表符这类空白字符，就覆盖不到了。

修正后的递归清理函数 #

我写了一个递归的清理函数，能处理所有嵌套的对象、数组，并且正确过滤掉所有你想移除的内容：

<!DOCTYPE html>
<html>
<head>
    <title> JSON Example </title>
    <style type="text/css">
        body { padding: 20px; font-family: Helvetica; }
        pre { background: #f4f4f4; padding: 10px; border-radius: 4px; }
    </style>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
        var data = {
            "first_name": "Sick",
            "last_name": "Nick",
            "email": "sick,nicke@address.com",
            "gender": null,
            "invitations": [
                { "from": "", "code": null }
            ],
            "company": {
                "name": "",
                "industries": []
            },
            "address": {
                "city": "Minnesota",
                "state": "MN",
                "zip": "14221",
                "street": " "
            }
        };

        // 递归清理空值、空结构的函数
        function clean(obj) {
            // 处理数组：先递归清理每个元素，再过滤掉无效元素
            if (Array.isArray(obj)) {
                return obj
                    .map(item => clean(item))
                    .filter(item => {
                        // 过滤掉undefined、null、空数组、空对象
                        if (item === undefined || item === null) return false;
                        if (Array.isArray(item) && item.length === 0) return false;
                        if (typeof item === 'object' && Object.keys(item).length === 0) return false;
                        return true;
                    });
            }
            // 处理非null的对象
            else if (typeof obj === 'object' && obj !== null) {
                const cleanedObj = {};
                for (const propName in obj) {
                    const cleanedValue = clean(obj[propName]);
                    // 判断值是否需要保留
                    const shouldKeep = !(
                        cleanedValue === null ||
                        cleanedValue === "" ||
                        /^\s+$/.test(cleanedValue) || // 匹配所有空白字符（空格、制表符等）
                        (Array.isArray(cleanedValue) && cleanedValue.length === 0) ||
                        (typeof cleanedValue === 'object' && Object.keys(cleanedValue).length === 0)
                    );
                    if (shouldKeep) {
                        cleanedObj[propName] = cleanedValue;
                    }
                }
                return cleanedObj;
            }
            // 处理基本类型（字符串、数字等）
            else {
                return obj;
            }
        }

        // 执行清理并渲染到页面
        const cleanedData = clean(data);
        document.getElementById('data').textContent = JSON.stringify(cleanedData, null, 2);
    </script>
    <p>清理后的结果：</p>
    <pre><span id="data"></span></pre>
</body>
</html>

函数逻辑说明 #

1. 数组处理：先递归清理数组里的每个元素，然后过滤掉那些清理后变成无效状态的元素（比如空数组、空对象、null）。
2. 对象处理：创建一个新的干净对象，遍历原对象的每个属性，递归清理属性值，只有当值是有效内容时，才把它加入新对象。
3. 空白字符处理：用正则/^\s+$/.test(cleanedValue)匹配所有由空白字符组成的字符串（包括多个空格、制表符等）。
4. 递归嵌套：不管你的数据嵌套多少层，函数都会深入到最底层进行清理。

运行这段代码后，你会得到一个完全清理掉所有无效内容的JSON对象，结果会显示在页面上。

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