如何在JavaScript/TypeScript中高效提取对象数组指定属性生成新数组？

嘿，刚接触JavaScript/TypeScript的话，这个需求其实非常常见，而且有个超简洁高效的实现方式——用数组的map()方法！这也是处理这类“从数组每个元素提取特定值”场景的最佳实践。

基础JavaScript实现 #

先拿你给出的数组结构举个实际例子：

// 原始数组
const people = [
  { name: "张三", address: "北京市朝阳区", tel: "138xxxx1234" },
  { name: "李四", address: "上海市浦东新区", tel: "139xxxx5678" }
];

// 提取所有name属性组成新数组
const names = people.map(person => person.name);

console.log(names); // 输出: ["张三", "李四"]

map()的逻辑很直白：它会遍历数组里的每一个对象，对每个对象执行你传入的回调函数，然后把回调返回的结果收集起来组成新数组。整个过程只需要遍历一次数组，时间复杂度是O(n)——这已经是最优效率了，毕竟你总得访问每个对象一次才能提取属性嘛。

TypeScript下的严谨实现 #

如果用TypeScript，我们可以先定义类型，让代码更安全，避免拼写错误或者取错属性的问题：

// 先定义对象的类型
interface Person {
  name: string;
  address: string;
  tel: string;
}

// 带类型约束的原始数组
const people: Person[] = [
  { name: "张三", address: "北京市朝阳区", tel: "138xxxx1234" },
  { name: "李四", address: "上海市浦东新区", tel: "139xxxx5678" }
];

// 提取name，TS会自动推导返回值类型为string[]
const names = people.map(person => person.name);

这样TypeScript会帮你校验每个对象是否确实存在name属性，提前规避潜在的类型错误。

处理可能的异常情况 #

如果担心数组里的某些对象可能缺失name属性（比如数据不完整），可以用**可选链运算符?.和空值合并运算符??**做容错处理：

const names = people.map(person => person?.name ?? "未知姓名");

这样即使某个对象没有name属性，也会用"未知姓名"填充，避免出现undefined破坏数组结构。

为什么这是高效的？ #

map()是数组的原生方法，底层已经做了性能优化，比你自己写for循环或者forEach手动收集数组要更简洁易读，而且效率上完全不输手动循环——甚至因为是引擎原生实现，在某些场景下会更快。

内容的提问来源于stack exchange，提问作者An-droid