从 TypeScript 中的数组中删除元素

使用该splice()方法从数组中删除元素，例如
arr.splice(1, 2). 该splice方法通过删除、替换或添加新元素来更改原始数组的内容，并返回包含已删除元素的数组。

索引.ts


const arr: string[] = ['one', 'two', 'three', 'four'];

const index = arr.indexOf('two');
console.log(index); // 👉️ 1

if (index !== -1) {
  arr.splice(index, 1);
}

// 👇️ ['one', 'three', 'four']
console.log(arr);

我们传递给
Array.splice
方法的参数是：

起始索引– 开始更改数组的索引
删除计数——我们要从数组中删除多少个元素，从起始索引开始

我们明确地检查该indexOf方法没有返回，因为如果传入的值不包含在数组中，该方法返回。 -1indexOf-1

这是相同的示例，但使用命名变量使内容更具可读性：

索引.ts


const arr: string[] = ['one', 'two', 'three', 'four'];

const startIndex = arr.indexOf('two');
const deleteCount = 1;

if (startIndex !== -1) {
  arr.splice(startIndex, deleteCount);
}

// 👇️ ['one', 'three', 'four']
console.log(arr);

该splice方法更改原始数组的内容并返回包含已删除元素的数组。

在 TypeScript 中从数组中删除对象

从 TypeScript 数组中删除一个对象：

使用findIndex()方法获取对象的索引。
使用splice()方法从数组中删除对象。
该splice方法将从数组中删除对象并返回删除的对象。

索引.ts


const arr: { id: number }[] = [{ id: 1 }, { id: 4 }, { id: 8 }];

const indexOfObject = arr.findIndex((object) => {
  return object.id === 4;
});

console.log(indexOfObject); // 👉️ 1

if (indexOfObject !== -1) {
  arr.splice(indexOfObject, 1);
}

// 👇️ [{id: 1}, {id: 8}]
console.log(arr);

我们传递给
Array.findIndex
方法的函数会被数组中的每个对象调用。

在每次迭代中，我们检查id对象的属性值是否等于4。如果是，我们返回true并获取匹配对象的索引。

如果没有满足条件的对象，则该findIndex 方法返回-1。

这就是我们在删除之前明确检查是否找到匹配对象的原因。

与上一个示例一样，我们传递给该splice()
方法的第二个参数是删除计数（从提供的索引开始从数组中删除多少个元素）。

从数组中删除最后一个元素

使用该pop()方法从数组中删除最后一个元素，例如
arr.pop(). 该pop方法从数组中删除并返回最后一个元素并更改数组的长度。如果在空数组上调用，该pop方法返回undefined。

索引.ts


const arr: string[] = ['one', 'two', 'three'];

const removed = arr.pop();
console.log(removed); // 👉️ 'three'

// 👇️ ['one', 'two']
console.log(arr);

Array.pop方法不接受任何参数，

并从数组中删除并返回最后一个元素。

从数组中删除第一个元素

使用该shift()方法从数组中删除第一个元素，例如
arr.shift(). 该方法从数组中删除并返回第一个元素并更改数组的长度。当在空数组上调用时，该shift方法返回undefined。

索引.ts


const arr: string[] = ['one', 'two', 'three'];

const removed = arr.shift();
console.log(removed); // 👉️ 'one'

// 👇️ ['two', 'three']
console.log(arr);

Array.shift方法与

非常相似Array.pop，但它适用于数组的第一个元素。

从数组中过滤掉不满足条件的元素

使用该filter()方法从数组中过滤出满足条件的元素。该filter方法创建并返回一个新数组，该数组仅包含满足由提供给filter
回调函数实现的条件的元素。

索引.ts


const arr: string[] = ['one', 'two', 'two', 'three'];

const newArr: string[] = arr.filter((element) => {
  return element !== 'two';
});

// 👇️ ['one', 'three']
console.log(newArr);

我们传递给
Array.filter
方法的函数会针对数组中的每个元素进行调用。

如果函数返回真值，则数组元素将添加到返回的数组中。

该filter方法不会更改原始数组的内容，而是返回一个新数组。

当您只需要满足特定条件的数组中的元素时，filter 方法很有用，例如，仅从包含奇数和偶数的数组中获取奇数。

切勿对数组使用删除运算符

delete运算符用于从对象中删除属性，但是您可能会看到开发人员将其与数组一起使用。

索引.ts


const arr: string[] = ['one', 'two', 'three'];

delete arr[1];

console.log(arr); // 👉️ ['one', , 'three']

console.log(arr.length); // 👉️ 3

delete 运算符
删除数组元素，但它不会更新数组的元素
length。

即使我们删除了一个元素，数组的长度仍然是. 即使删除数组中的最后一个元素也是如此。 3

如果您看到数组上使用了 delete 运算符，那么他们实际上是想使用该
splice方法。

–

从 TypeScript 中的数组中删除元素

目录

Remove Element(s) from an Array in TypeScript