如何在 TypeScript 中将元素添加到数组

作者

目录

How to add Elements to an Array in TypeScript

  1. 在 TypeScript 中将元素添加到数组
  2. 在 TypeScript 中将元素添加到数组的开头
  3. 在 TypeScript 中合并数组
  4. 在 TypeScript 中的索引处向数组添加一个或多个元素

在 TypeScript 中向数组添加元素

在 TypeScript 中向数组添加元素：

  1. 正确输入数组，例如const arr: number[] = [].
  2. push()在数组上调用方法，例如arr.push(myValue).
  3. 该push方法将一个或多个元素添加到数组的末尾。
索引.ts
const arr: number[] = [];

// ✅ Add to end of array
arr.push(2);

// ✅ Add to beginning of array
arr.unshift(1);

console.log(arr); // 👉️ [1, 2]

// ✅ Merge arrays
const result = arr.concat([3, 4]);
console.log(result); // 👉️ [1, 2, 3, 4]

// ✅ Merge arrays with spread (...)
const merged = [...arr, ...[3, 4]];
console.log(merged); // 👉️ [1, 2, 3, 4]

// ✅ Add one or more elements at specific index
const arr2: string[] = ['a', 'd', 'e'];

arr2.splice(1, 0, 'b', 'c');

// 👇️ ['a', 'b', 'c', 'd', 'e']
console.log(arr2);

第一个示例演示如何使用Array.push
方法将元素添加到 TypeScript 数组的末尾
。

该push方法采用一个或多个值并将它们添加到数组的末尾。

索引.ts
const arr: number[] = [];

arr.push(1, 2, 3);

console.log(arr); // 👉️ [1, 2, 3]
请注意，为了能够将元素添加到 TypeScript 中的数组，数组和元素必须具有兼容的类型。

当你用值声明一个数组时，TypeScript 能够推断出数组的类型。

索引.ts
// 👇️ const arr: number[]
const arr = [1, 2, 3];

TypeScript 能够推断出数组的类型是number[]. 这意味着数组只包含类型的元素，number您只能
number向数组添加元素。

如果你声明一个空数组并且没有显式地键入它，TypeScript 不知道数组将包含什么类型的元素，所以它给它一个类型
any[]。

索引.ts
// 👇️ const arr: any[]
const arr = [];

这意味着您可以将any类型的元素添加到数组中。

应该避免这种行为，因为它会禁用类型检查。

始终确保将空数组显式键入与要添加到数组的元素类型兼容的类型。

在不太可能出现的情况下，您有一个混合数组，例如 ofnumbers和
strings，在键入数组时使用
联合类型
。

索引.ts
const arr: (number | string)[] = [1, 'a'];

arr.push(2, 'b');

console.log(arr); // 👉️ [1, 'a', 2, 'b']

这是一个如何键入对象数组的示例。

索引.ts
const arr: { name: string; age: number }[] = [];

arr.push({ name: 'Tom', age: 30 });

console.log(arr); // 👉️ [{name: 'Tom', age: 30}]
如果您不知道如何键入特定值，请声明一个包含该值的变量并将鼠标悬停在它上面。TypeScript 将推断其类型并告诉您应如何输入变量。

如果需要在特定索引处添加或更改数组元素，请使用括号表示法。

索引.ts
const arr: string[] = ['hello'];

arr[1] = 'world';

console.log(arr); // 👉️ ['hello', 'world']

如果指定索引处的数组元素不存在，则向数组添加一个元素，否则更新特定索引处元素的值。

在 TypeScript 中将元素添加到数组的开头

在 TypeScript 中将元素添加到数组的开头：

  1. 正确输入数组，例如const arr: number[] = [].
  2. unshift()在数组上调用方法，例如arr.unshift(myValue).
  3. 该unshift方法将一个或多个元素添加到数组的开头。
索引.ts
const arr: number[] = [3, 4];

arr.unshift(1, 2);

console.log(arr); // 👉️ [1, 2, 3, 4]

Array.unshift方法与
方法
相反push()。

它不是将一个或多个元素添加到末尾，而是将它们添加到数组的开头。

在 TypeScript 中合并数组

另一种向数组添加元素的常用方法是合并多个数组。

使用扩展语法 (…) 合并 TypeScript 中的两个数组，例如
const merged = [...[1, 2], ...[3, 4]];. 扩展语法 (…) 将数组的值解包到一个新数组中并保留元素的顺序。

索引.ts
// ✅ Merge arrays with spread (...)
const merged = [...[1, 2], ...[3, 4]];
console.log(merged); // 👉️ [1, 2, 3, 4]

我们2使用
扩展语法 (…)将数组解压缩为第三个数组。

使用扩展语法 (…) 时，将保留解压缩数组的顺序。

索引.ts
const merged = [...[3, 4], ...[1, 2]];
console.log(merged); // 👉️ [3, 4, 1, 2]

您可能还会看到concat用于合并两个或多个数组的方法。

索引.ts
const result = [1, 2].concat([3, 4], [5, 6]);

console.log(result); // 👉️ [1, 2, 3, 4, 5, 6]

根据我的经验，
Array.concat
方法不如传播语法 (…) 那样常用。

在 TypeScript 中的索引处向数组添加一个或多个元素

使用该splice()方法将一个或多个元素添加到特定索引处的数组，例如arr.splice(1, 0, 'b', 'c'). 该splice方法通过删除、替换或向数组添加新元素来更改原始数组的内容。

索引.ts
const arr: string[] = ['a', 'd', 'e'];

arr.splice(1, 0, 'b', 'c');

// 👇️ ['a', 'b', 'c', 'd', 'e']
console.log(arr);

我们将以下参数传递给该splice方法：

  1. start index – 开始更改数组的索引
  2. delete count – 我们要从数组中删除多少个元素，从起始索引开始
  3. 要添加到数组的一个或多个值，从起始索引开始

我们不想删除任何元素，我们0作为删除计数传递。

上面的代码片段：

  1. 在索引处开始更改数组1
  2. 0从数组中移除元素
  3. 将字符串b和添加c到数组

–