对比一下两种写法:

原始代码:

const checkedItemsCount = computed(() => {
    let total = 0
    categories.map(category => {
        total += category.items.filter(item => item.check).length;
    });
    return total
});

优化后的代码:

const checkedItemsCount = computed(() => {
    return state.categories.reduce((total, category) => 
        total + (category.items?.filter(item => item.check)?.length ?? 0), 0
    )
})

主要区别:

  1. 空值安全性
  • 原始代码:直接访问 category.items,如果 itemsundefined 会报错
  • 优化代码:使用 ?.?? 操作符处理可能的空值,更安全
  1. 性能差异
  • 原始代码:使用 map 但没有使用其返回值,实际上应该用 forEach
  • 优化代码:使用 reduce 直接进行累加,减少了中间变量
  1. 函数式编程
  • 原始代码:使用命令式编程,维护外部变量 total
  • 优化代码:使用函数式编程,无副作用,更容易测试和维护
  1. 代码健壮性
// 原始代码可能出错的情况:
categories = undefined  // 报错
category.items = undefined  // 报错

// 优化代码能处理的情况:
state.categories = undefined  // 返回 0
category.items = undefined  // 返回 0
  1. 内存使用
  • 原始代码:需要额外的 total 变量
  • 优化代码:直接在 reduce 过程中计算,无需额外变量

建议使用优化后的写法,因为它:

  • 更安全(处理了空值情况)
  • 更高效(减少了不必要的操作)
  • 更易维护(函数式编程风格)
  • 更简洁(代码更少但功能更强)

标签: none

添加新评论

阅读量:353