TypeScript对象数组|极客教程

TypeScript对象数组

在 TypeScript 中，我们经常需要处理对象数组。对象数组是指包含多个对象的数组，每个对象都有相同的属性结构，但是具体的属性值可能不同。

创建对象数组

首先，让我们看看如何创建对象数组。我们可以使用以下方式定义一个对象数组：

// 定义一个接口表示对象的结构
interface Person {
    name: string;
    age: number;
}

// 创建对象数组
let people: Person[] = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 40 }
];

上面的代码中，我们首先定义了一个名为 Person 的接口，表示一个具有 name 和 age 属性的对象。然后我们使用该接口定义了一个对象数组 people，其中包含了三个具体的人员信息。

访问对象数组元素

我们可以使用下标来访问对象数组中的元素，也可以使用循环来遍历数组中的每个对象。

// 访问数组元素
console.log(people[0]); // { name: 'Alice', age: 30 }

// 遍历数组
for (let person of people) {
    console.log(person.name, person.age);
}

运行上面的代码，将输出：

{ name: 'Alice', age: 30 }
Alice 30
Bob 25
Charlie 40

修改对象数组元素

我们可以通过下标直接修改对象数组中的元素。

// 修改数组元素
people[1].age = 26;

console.log(people[1]); // { name: 'Bob', age: 26 }

添加和删除对象数组元素

我们可以使用 push 方法向对象数组中添加新的元素，使用 splice 方法来删除数组中的元素。

// 添加新元素
people.push({ name: 'David', age: 35 });

// 删除元素
people.splice(2, 1); // 删除索引为2的元素

console.log(people); // [ { name: 'Alice', age: 30 }, { name: 'Bob', age: 26 }, { name: 'David', age: 35 } ]

对象数组的过滤和查找

我们可以使用 filter 方法对对象数组进行过滤，使用 find 方法来查找符合条件的元素。

// 过滤元素
let filteredPeople = people.filter(person => person.age > 30);

console.log(filteredPeople); // [ { name: 'David', age: 35 } ]

// 查找元素
let foundPerson = people.find(person => person.name === 'Bob');

console.log(foundPerson); // { name: 'Bob', age: 26 }

对象数组的映射

我们可以使用 map 方法来对对象数组中的每个元素进行映射，得到一个新的数组。

// 映射元素
let ages = people.map(person => person.age);

console.log(ages); // [ 30, 26, 35 ]

总结

通过本文的介绍，我们了解了如何在 TypeScript 中操作对象数组，包括创建、访问、修改、添加、删除、过滤、查找和映射等操作。对于项目中需要处理大量对象数据的情况，对象数组是一种非常便捷和灵活的数据结构，能够帮助我们高效地处理复杂的业务逻辑。

TypeScript对象数组