如何拼接对象数组中各元素的Closed属性值并兼容属性缺失场景

现有代码问题分析 #

• forEach方法本身没有返回值，将其执行结果赋值给totalClosed最终只会得到undefined
• 没有定义用于存储拼接结果的变量，也没有实现拼接逻辑，自然只能拿到单次循环的属性值
• 没有做空值兼容，遇到不存在details或Closed属性的对象会出现逻辑异常

实现方案 #

方案1：使用reduce方法（推荐写法） #

reduce是为迭代累加场景设计的原生数组方法，写法更简洁：

const totalClosed = data.reduce((result, currentItem) => {
  // 可选链判断兼容details/Closed不存在的场景
  const closedVal = currentItem?.details?.Closed
  // 仅有效值参与拼接，空值、undefined、null等自动跳过
  return result + (closedVal || '')
}, '')

示例数据运行后输出结果为121212，完全符合需求。
如果你的运行环境不支持ES2020的可选链语法，可以将currentItem?.details?.Closed替换为currentItem.details && currentItem.details.Closed兼容低版本环境。

方案2：修改现有forEach逻辑 #

如果你更习惯使用forEach，调整写法如下即可：

// 先定义空字符串存储拼接结果
let totalClosed = ''
data.forEach(function (arrayItem) {
  const closedVal = arrayItem?.details?.Closed
  if (closedVal) {
    totalClosed += closedVal
  }
})
// 运行后totalClosed即为最终拼接结果

内容的提问来源于stack exchange，提问作者Aren Trot