JS使用展开运算符向数组追加非NULL值的更优语法求解

问题分析 #

你现在的写法其实存在隐藏问题：如果selectedId为null，表达式selectedId && selectedId会直接返回null，最终数组末尾会多一个无效的null元素，只是你当前的业务场景没触发这个问题而已。

推荐的优雅写法 #

以下几种写法可以按需选择：

1. 条件展开（最通用，无副作用）

const obj = {
  exclude: [...props.ids, ...(selectedId != null ? [selectedId] : [])]
}

原理是当selectedId非空时，展开一个仅包含它的单元素数组，否则展开空数组，不会额外生成无效元素。这里特意用!= null判断，可以同时兼容null和undefined两种空值场景，避免0、空字符串等合法假值被误判。

2. 后置过滤（适合确定数组内不存在需要保留的假值场景）

const obj = {
  exclude: [...props.ids, selectedId].filter(Boolean)
}

这种写法更简洁，但要注意如果你的业务里selectedId允许是0、''、false这类合法值，就不要用这个方法，否则会被filter误删。

3. 显式判断（可读性最高，适合后续要扩展逻辑的场景）

const excludeList = [...props.ids]
if (selectedId != null) {
  excludeList.push(selectedId)
}
const obj = {
  exclude: excludeList
}

如果后续要加多个条件追加、或者追加多个元素，这种写法维护成本最低，逻辑一目了然。

内容的提问来源于stack exchange，提问作者gene b.