JavaScript 去除对象中值为空(undefined、null)的字段

例如有一个对象 obj，其中字段 age,name 为“空”值(undefined、null)

            let obj = {
                id: '123',//保留
                age: undefined, //去除
                name: null,//去除
            }
        

如何去除这两个字段，使 obj 最终为 { id: '123' }

实现

            Object.keys(obj).forEach((k) => obj[k] == null && delete obj[k]);
        

这个方式会改变原始对象

说明

这里判断用的是两个等号 ==，而不是三个等号，因为在 JS 中

            undefined == null;  // true
            undefined === null; // false
        

所以用两个等号就能同时过滤掉 undefined 与 null 了

当然，如果你只想过滤掉 null 而保留 undefined 的话就使用三个等号 ===

不改变原始对象

下面显示了不改变原始对象的用法，它会返回一个新的对象

            let newObj = Object.keys(obj)
                .filter((k) => obj[k] != null)
                .reduce((a, k) => ({ ...a, [k]: obj[k] }), {});
        

与上面不能使用三个等号一样，此处使用 != 而不是 !==

演示

1.封装成函数使用（改变原始对象版）

            // 移除对象的空属性
            function removeEmpty(obj) {
                Object.keys(obj).forEach((k) => obj[k] == null && delete obj[k]);
            }

            // 包含 null 与 undefined 的对象
            let data = { k1:"hello", k2:null, k3:undefined };

            removeEmpty(data);

            // 最后空字段被移除，只剩 k1 字段
            console.log(data); //输出 { k1: 'hello' }
        

2.同时递归移除子对象的空属性（不改变原始对象）

            // 移除对象的空属性
            function removeEmpty(obj) {
                return Object.entries(obj)
                    .filter(([_, v]) => v != null)
                    .reduce((a, [k, v]) => 
                        ({ ...a, [k]: v === Object(v) ? removeEmpty(v) : v })
                    ,{});
            }

            // 包含 null 与 undefined 的对象
            let data = { 
                k1:"hello", 
                k2:null, 
                k3:undefined,
                subObj:{
                    sub_k1:"hello", 
                    sub_k2:null, 
                    sub_k3:undefined,
                }
            };

            let newData = removeEmpty(data);

            // 最后对象中包括子对象的空字段被移除
            console.log(newData); //{ k1:"hello", subObj:{ sub_k1:"hello"} }
        

其他方式

ES10/ES2019 语法（不改变原对象）：

            Object.fromEntries(Object.entries(obj).filter(([k, v]) => v != null))