如何同时判断变量等于null和undefined的情况下，赋值0

我爱加班、、2024-06-07 10:33

例如，res?.data?.data === null ? 0 : res?.data?.data

当res?.data?.data === undefined时，如何修改判断条件让它值为undefined时显示0

要修改条件判断，使得当res?.data?.data为null或undefined时都返回0，您可以使用逻辑或操作符（||）来简化三元运算符。逻辑或操作符在null或undefined的情况下会返回第一个真值，否则返回其右侧的表达式。

下面是修改后的代码：

javascript 复制代码

const reporting = res?.data?.data === null || res?.data?.data === undefined ? 0 : res?.data?.data;

解释一下这段代码：

res?.data?.data === null || res?.data?.data === undefined：这部分检查res.data.data是否为null或undefined。
如果res.data.data是null或undefined，条件为真，表达式返回0。
如果res.data.data不是null且不是undefined，条件为假，表达式返回res.data.data的值。

这样，无论res?.data?.data是null还是undefined，reporting都将是0。如果它是其他值，reporting将是那个值。

在Vue组件中，通常您会希望reporting是响应式的。因此，如果您在Vue 3的setup函数中，您应该使用ref来创建一个响应式变量：

javascript 复制代码

import { ref } from 'vue';

export default {
  setup() {
    // 假设res是从API响应或props中获取的
    const res = ref(null); // 请根据实际情况初始化

    // 使用ref创建响应式的reporting
    const reporting= ref(
      res.value?.data?.data === null || res.value?.data?.data === undefined ? 0 : res.value?.data?.data
    );

    // 返回包含icon和label的对象数组
    const reportingItem = ref([
      { icon: '', label: `报道: ${reporting.value}` }
    ]);

    return {
      reportingItem,
    };
  },
};

这样，reporting就是一个响应式的变量，它将根据res.data.data的值动态更新。如果res.data.data变为null或undefined，reporting将自动更新为0。