如何获取对象数组首个元素的color属性？JavaScript/TypeScript对象数组操作

你给出的示例数组中，数组索引从0开始计数，第一个元素对应索引0，可以直接通过属性访问符.获取color值：

// 确定数组非空时可以直接使用
const firstColor = cars[0].color;
// 输出结果为 purple
console.log(firstColor);

安全访问写法（避免报错） #

如果存在数组为空、第一个元素为undefined的场景，直接访问cars[0].color会抛出TypeError，推荐用以下写法做兼容：

• ES2020+、TypeScript 通用的可选链写法：

// 数组为空或第一个元素无color属性时返回undefined，不会报错
const firstColor = cars[0]?.color;

• 带兜底默认值的写法：

// 异常场景下返回自定义兜底值，比如'unknown'
const firstColor = cars[0]?.color ?? 'unknown';

• 兼容低版本JS的判断写法：

let firstColor = 'unknown';
if (cars.length > 0 && cars[0].color) {
  firstColor = cars[0].color;
}

• 元素访问：和普通数组逻辑一致，按索引从0开始访问指定位置元素，末尾元素可用数组[数组.length - 1]访问，所有访问操作建议增加数组长度校验或可选链防护
• 遍历操作：可以用内置高阶函数完成常见处理：
  • 遍历生成新数组：map()，比如获取所有车辆颜色数组：const allColors = cars.map(item => item.color)
  • 筛选符合条件的元素：filter()，比如筛选所有载客量大于5的车辆：const bigCars = cars.filter(item => item.capacity > 5)
  • 查找第一个符合条件的元素：find()，比如查找第一个红色车辆：const redCar = cars.find(item => item.color === 'red')
  • 遍历执行操作不需要返回值：forEach()
• TypeScript 类型约束：建议提前定义数组元素的接口类型，避免属性写错、类型不匹配的问题，示例如下：

// 定义单条车辆数据的类型
interface Car {
  color: string;
  type: string;
  registration: Date;
  capacity: number;
}
// 标注数组的类型
const cars: Car[] = [
  // 你的数组内容
]

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