React中解构filter结果为何出现键为0的对象？如何优化？

为什么会出现{0: 目标对象}的结构？ #

因为filter()方法的返回值永远是一个数组——哪怕只筛选出一个元素，它也会被包裹在数组里。当你对这个数组使用对象扩展运算符{...filteredResult}时，JavaScript会把数组当作「类数组对象」处理：数组的索引（比如0）会成为新对象的键，对应索引位置的数组元素则是键的值，最终就生成了{0: 目标对象}这种结构。

无需下标访问的优化写法 #

1. 使用find()方法（推荐） #

find()方法会遍历数组，返回第一个符合条件的元素，找不到匹配项时返回undefined，完全契合你获取单个对象的需求，而且性能比filter()更好（找到匹配项就停止遍历，不用扫完整个数组）：

// 筛选目标对象
const targetBill = billsArray.find(bill => bill.bill_number === selectedBillNumber);

// 传递props给子组件（加判断避免传递undefined）
{targetBill && <ChildComponent {...targetBill} />}

2. 处理无匹配项的兜底方案 #

如果不确定是否存在匹配的账单，可以给find()加默认值，避免子组件接收到undefined导致报错：

const targetBill = billsArray.find(bill => bill.bill_number === selectedBillNumber) || {};

<ChildComponent {...targetBill} />

3. （不推荐但可行）解构数组获取第一个元素 #

如果你坚持要用filter()，可以直接在解构时获取数组的第一个元素，不用写下标：

// 从filter结果中解构出第一个元素
const [targetBill] = billsArray.filter(bill => bill.bill_number === selectedBillNumber);

<ChildComponent {...targetBill} />

不过这种写法依然会遍历整个数组，性能不如find()，只适合必须用filter()的场景。

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