Skip to content

JavaScript数据对象增加非空判断

  • 在日常开发过程中,对使用到的数据对象,应该增加一些非空判断,防止程序出错。
  • 对与使用||(或)进行判空的情况需要特别注意,||(或)只能判断undefinednull,对于0在使用||(或)判断时,JavaScript会判断成false,需要特别注意。

代码示例:

vue
<template>
  <!-- 容器 -->
  <div>
    <span class="bs-text-color">单位类型:{{agencyType}}</span>
  </div>
</template>
<script>
import fetch from '@/config/fetch';
import util from '@/assets/js/util';

export default {
  props: {
    agencyInfo: Object, //当前单位信息
  },
  data() {
    return {
      tableData: [], //表格数据
    };
  },
  created() {
    this.init();
  },
  methods: {
    /**
     * 初始化
     * 1、获取表格数据
     * 2、设置表格数据
     */
    async init() {
      try {
        this.$loading();
        let tableData = await this.getTableData();
        this.setTableData(tableData);
      } catch (err) {
        console.error(err);
        this.$message({
          type: 'error',
          message: err.msg,
        });
      } finally {
        this.$loadingClose();
      }
    },
    /**
     * 获取表格数据
     */
    getTableData() {
      return new Promise((resolve, reject) => {
        fetch
          .get('xxxxxxxxxxxx')
          .then(({ data }) => {
            // TODO此处可以对数据进行判空,防止后续在使用该数据时,如果data为null,可能会引起报错
            data = data || [];
            return resolve(data);
          })
          .catch(reject);
      });
    },
    /**
     * 设置表格数据
     * 1、精简表格行数据字段
     */
    setTableData(tableData) {
      // TODO:一般在使用数据时,也可以提前对数据做一下非空判断,可以防止在使用时,报错,例如此处做一下非空判断,可以防止在接下来的循环中报错。
      tableData = tableData || [];
      this.tableData = tableData.map((e) => {
        return _.pick(e, ['billId', 'billNo', 'agencyCode', 'agencyName']);
      });
    },
  },
  computed: {
    /**
     * 当前单位类型
     */
    agencyType() {
      // TODO:此处应该对props数据agencyInfo进行判空,因为如果agencyInfo没有传时,直接使用agencyInfo的属性会报错
      if (util.isNotEmptyObject(this.agencyInfo)) {
        return this.agencyInfo.agencyType;
      } else {
        return '';
      }
    },
  },
};
</script>