Appearance
JavaScript数据对象增加非空判断
- 在日常开发过程中,对使用到的数据对象,应该增加一些非空判断,防止程序出错。
- 对与使用
||(或)
进行判空的情况需要特别注意,||(或)
只能判断undefined
或null
,对于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>