React中如何用Filter从JSON动态获取指定类型的首个可选值？

首先，你用map出现[null,"1"]的原因是：map会遍历数组里的每一项，当项的valueType不等于e时，你的回调函数没有返回有效内容（或返回了null），所以这些位置会填充undefined（或null），最终得到一个混合了空值和目标值的数组，这显然不是你想要的。

当然可以用filter实现需求，filter的作用是筛选出所有符合条件的项，返回一个新数组，之后我们只需要取这个数组的第一个元素，再提取它的首个possibleValues值就行：

// 基础写法，处理无匹配项的情况
const matchedItems = myjson.listOfOptions.filter(item => item.valueType === e);
const result = matchedItems.length > 0 ? matchedItems[0].possibleValues[0] : undefined;

或者用更简洁的链式调用（搭配可选链避免无匹配时的报错）：

const result = myjson.listOfOptions.filter(item => item.valueType === e)[0]?.possibleValues[0];

不过这里要提一句：用find方法会更高效、更直接。因为filter会遍历整个数组筛选所有匹配项，但你只需要第一个匹配的项，find方法找到第一个符合条件的项后就会停止遍历，性能更好：

// 用find获取第一个匹配项，再提取目标值
const matchedItem = myjson.listOfOptions.find(item => item.valueType === e);
const result = matchedItem ? matchedItem.possibleValues[0] : undefined;

// 或者用ES6可选链简化
const result = myjson.listOfOptions.find(item => item.valueType === e)?.possibleValues[0];

当e设为"integer"时，上面的代码都会返回你期望的"1"，不会出现数组形式的结果。

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