Vue/JS如何判断两个对象的所有属性值是否均为null

实现方案 #

你可以把单个对象的判空逻辑抽离为公共复用函数，再在computed中同时校验两个对象即可，既没有冗余代码，可读性也更高：

const startField = ref({ date: null, month: null, year: null })
const endField = ref({ date: null, month: null, year: null })

// 抽离公共判断逻辑，后续其他地方也可复用
const isAllPropsNull = (obj) => Object.values(obj).every(x => x === null)

const isEmpty = computed(() => {
    // 两个对象的所有属性都为null时才返回true
    return isAllPropsNull(startField.value) && isAllPropsNull(endField.value)
})

如果你不想额外定义独立函数，也可以用数组批量校验的简洁写法，后续新增需要校验的同类对象时不需要修改判断逻辑：

const isEmpty = computed(() => {
    // 把所有要校验的响应式对象放入数组批量判断
    return [startField.value, endField.value].every(obj => 
        Object.values(obj).every(x => x === null)
    )
})

两种实现都兼容后续给startField、endField新增属性的场景，不需要调整判断代码。

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