React/TypeScript中如何遍历RaRecord数组提取指定嵌套字段？

我手里有一堆RaRecord对象，每个对象里都嵌套了extended子对象。现在想把所有RaRecord里extended的element值提取出来，拼成一个stock数组，但不想写两层循环，有没有简单的办法？

示例数据 #

const raRecords = [
  {sku: 1, name: 'TB', extended: {status: 'YES', element: 2} },
  {sku: 2, name: 'EB', extended: {status: 'No', element: 4} },
  {sku: 3, name: 'SB', extended: {status: 'No', element: 6} }
];

期望结果 #

const stock = [2, 4, 6];

用数组的map()方法就行，完全不用两层循环：

const stock = raRecords.map(record => record.extended.element);

这个方法逻辑很直接：map()会挨个遍历raRecords里的每个对象，每次取出当前对象的extended.element值，最后把所有这些值自动拼成新数组返回，就是你要的stock。

如果担心有些RaRecord可能没有extended属性或者element字段，怕报错的话，可以加个可选链和空值合并处理：

const stock = raRecords.map(record => record.extended?.element ?? null);

这样遇到缺失字段的情况，会用null填充，你也可以换成自己需要的默认值，比如0或者空字符串。

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