一些比较好的编程方式总结

发表于 分类于 阅读次数： 本文字数： 261 阅读时长 ≈ 1 分钟

属性检查

以下是 vue 中定义的一个获取表格数据的函数，注意获取表格数据时，需要判断表格数据是否存在，如果不存在，则使用空数组。

可选链运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
getTableData() {
  this.tableData = [];
  const params = {
    page: this.currentPage,
    size: this.currentPageSize
  };
  getCondition(getToken("productId"), params).then(res => {
    // 从响应中提取数据，如果数据不存在，则使用空数组
    // 可选链运算符使表达式更短，更简明
    const data = res.data?.data?.list || [];
    // 遍历数据并构造表格行对象
    for (const item of data) {
      const temp = {
        id: item.id,
        name: item.name,
        remark: item.remark,
        time: tampToTime(item.createDate)
      }
      this.tableData.push(temp);
    }
    this.total = this.tableData.length;
  });
},