使用ES6 TypeScript从全局数组中提取指定ID儿童的玩具数组

你的问题出在find方法的返回值上——它返回的是匹配到的整个儿童对象，而不是对象里的toys数组，所以直接赋值给this.toys肯定拿不到想要的结果。下面用ES6+TypeScript给你两种靠谱的实现方式，还兼顾了类型安全和边界情况处理：

首先，先给你的数据结构定义清晰的TypeScript接口，这能帮你避免很多类型错误：

// 定义玩具的类型
interface Toy {
  id: number;
  label: string;
}

// 定义儿童的类型
interface Kid {
  id: number;
  name: string;
  age: number;
  toys: Toy[];
}

方式一：分步处理（可读性强） #

先找到目标儿童，再提取玩具数组，同时处理找不到儿童的情况：

// 假设this.kids是Kid类型的数组，KidId是你要匹配的数字ID
const targetKid = this.kids.find(kid => kid.id === KidId);
// 如果找到儿童就取toys，没找到就返回空数组（避免后续报错）
this.toys = targetKid ? targetKid.toys : [];

方式二：简洁写法（ES6+语法糖） #

用可选链操作符?.和空值合并操作符??，一行搞定：

this.toys = this.kids.find(kid => kid.id === KidId)?.toys ?? [];

• ?.：如果find返回undefined（没找到对应ID的儿童），会直接短路，不会尝试访问undefined.toys而报错；
• ??：确保如果toys字段意外为空（比如数据不规范），最终返回一个空数组，保持类型一致。

额外提醒 #

要注意KidId的类型必须和kid.id一致（比如都是number类型），否则TypeScript会提示类型不匹配的错误，这也是提前定义接口的好处之一。

内容的提问来源于stack exchange，提问作者adicto.verde