Vue.js中移除对象null值与空字符串属性的实现方法

调用API提交对象数据时，项目中存在多个状态字段，不需要每次请求都传递全量字段，需要在提交前移除对象中值为null或空字符串的属性，仅保留有效值提交。原有代码直接透传Vuex store中的state.data对象，未做任何空值过滤处理。
原有代码如下：

export default {
  methods: {
    sendData() {
      axios
        .post("api", this.$store.state.data)
        .then((response) => console.log(response))
        .catch((error) => console.log(error));
      console.log(this.$store.state.data);
    },
  },
  mounted() {
    this.sendData();
  },
};

核心思路是在提交前对源对象做清洗过滤，注意不要直接修改Vuex中存储的原state对象，避免污染全局状态，基于原对象生成过滤后的新副本再传给接口即可。

核心过滤方法 #

单层对象适用（绝大多数业务场景） #

用Object.entries遍历对象键值对，过滤掉值为null、空字符串的项，再重新组装成新对象：

const filterEmptyVal = (obj) => {
  return Object.fromEntries(
    Object.entries(obj).filter(([_, value]) => {
      return value !== null && value !== ''
    })
  )
}

嵌套对象适用 #

如果提交的数据存在多层嵌套结构，可以使用递归版本的过滤方法：

const filterEmptyValDeep = (obj) => {
  if (typeof obj !== 'object' || obj === null) return obj
  if (Array.isArray(obj)) {
    return obj.map(item => filterEmptyValDeep(item)).filter(item => item !== null && item !== '')
  }
  return Object.fromEntries(
    Object.entries(obj)
      .map(([key, value]) => [key, filterEmptyValDeep(value)])
      .filter(([_, value]) => value !== null && value !== '')
  )
}

改造后的完整业务代码 #

把过滤逻辑整合到原有请求方法中，工具方法可以直接写在组件内，也可以抽到公共utils文件里全局复用：

export default {
  methods: {
    filterEmptyVal(obj) {
      return Object.fromEntries(
        Object.entries(obj).filter(([_, value]) => value !== null && value !== '')
      )
    },
    sendData() {
      // 基于原store数据生成过滤后的提交副本，不修改原状态
      const submitData = this.filterEmptyVal(this.$store.state.data)
      axios
        .post("api", submitData)
        .then((response) => console.log(response))
        .catch((error) => console.log(error));
      console.log('过滤后提交的数据：', submitData);
    },
  },
  mounted() {
    this.sendData();
  },
};

注意事项 #

• 默认过滤逻辑只会剔除null和空字符串，不会影响0、false这类业务上常用的合法假值，如果需要额外过滤undefined，直接在判断条件里补充value !== undefined即可。
• 不要直接对this.$store.state.data做删除属性的操作，Vuex的state要求始终通过mutation修改，直接篡改原对象会导致状态变更不可追踪，引发难以排查的问题。
• 如果业务需要过滤嵌套对象内的空值，把代码里的filterEmptyVal替换成递归版本的filterEmptyValDeep即可。

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