TypeScript 100天（第7天）

目录

什么是数组？

声明数组

声明空数组

向我们的数组添加元素

删除数组条目

将条目插入数组

结论

---

在这篇文章中，我们将介绍在TypeScript中使用数组的大部分基础知识。我们将学习如何创建空数组和填充数组，以及如何在数组中添加和删除条目。

首先，我想为延迟处理这篇文章表示歉意。发生了很多事情，但我没有忘记写这个系列。在第6天，我们学习了如何使用继承和抽象类来展示我们如何为“对象”建模。在这篇文章中，我们将开始研究使用数组来管理多个条目。

什么是数组？

我们可以将数组视为一种方便的方式来创建我们可以轻松使用的“事物”集合。回到我的乐器示例，我们可以将吉他上的琴弦视为“琴弦”数组（这里是音乐弦，而不是文本弦）。在吉他上，每根弦都有特定的宽度，具体取决于该弦的调音高度。现在，如果我们想在代码中引用这些变量，我们可以选择创建单独的变量，例如string1、string2等等。当我们有7 string、8 string甚至12 string吉他时，这变得非常麻烦并且限制了我们。

使用数组，我们只需要一个数组，我们只需将单个string添加到其中。

声明数组

我们可以通过多种不同的方式创建数组。如果我们预先知道数组的内容，那么创建和填充数组的简单方法就是这样。

const strings: number[] = [10, 13, 17, 26, 36, 46];

我在这里指定了类型，但这不是绝对必要的。我们可以省略number[]部分，这仍然会创建一个数字数组，如下所示：

const strings = [10, 13, 17, 26, 36, 46];

TypeScript足够聪明，知道这是一个数字数组，因此它不允许我们向这个数组添加不同的类型。

现在，我确实提到了还有其他声明数组的方法。TypeScript还为我们提供了使用泛型类型来创建数组的能力。暂时不要担心泛型是什么，我们将在本系列的后面更详细地介绍泛型。无论如何，声明相同填充数组的另一种方法如下所示。

const genericString: Array<number> = [10, 13, 17, 26, 36, 46];

Array<number>是数组的泛型类型，在功能上与上面的原始数组声明相同。

声明空数组

我们并不总是知道要放入数组中的内容。在很多情况下，我们希望在声明它们之后将条目添加到我们的数组中。如果我们使用[]数组的语法，那么我们将像这样声明我们的数组：

const emptyStrings: number[] = [];

如果我们想使用Array<>语法，我们有两种选择。第一个选择是使用。

const emptyGenericStrings: Array<number> = [];

或者，由于这是一种类型，我们可以使用如下new()语法：

const emptyGenericStrings2: Array<number> = new Array<number>();

向我们的数组添加元素

显然，当我们创建一个空数组（在大多数情况下甚至是一个预先填充的数组）时，我们希望能够在需要时向其中添加条目。无论我们以哪种方式创建数组，无论是使用Array<>语法还是作为[]类型，我们都使用完全相同的方法向其中添加元素。我们使用的关键字是push，它看起来像这样：

emptyGenericStrings.push(30);

如果我们想一次添加多个元素，我们可以使用相同的命令：

emptyGenericStrings.push(40,50,60);

无论我们选择一次添加一个条目，还是一次性添加多个元素，这些元素都会添加到列表的末尾。这意味着在我们的第一个条目之后，我们的列表数组看起来像这样：

添加了我们的第一个条目的数组

现在，如果我们在数组中添加push另一个条目，它将如下所示：

包含两个条目的数组

删除数组条目

随着时间的推移，条目变得陈旧或不必要，因此我们不再需要将它们保留在我们的数组中。如果我们想删除最后一个条目，我们使用pop命令。

假设我们从这个数组开始。

包含4个元素的数组

当使用pop命令时，我们只剩下前三个元素，如下所示：

 弹出后剩余3个元素的数组

看过一些可爱的图表来展示pop操作的作用，我们将如何实际使用它？就像下面这样简单：

const popString = [ 30, 40, 50, 60 ];
popString.pop();

好吧，这很简单，但是我们如何从列表的其他地方删除单个条目？这稍微复杂一些。我们需要做的是使用该indexOf函数找到我们要删除的记录的索引，然后使用该splice函数删除该元素。在本例中，我们创建了一个string数组，然后我们将删除该item2条目。

const sliceStrings = [ "item1", "item2", "item3", "item4", "item5" ];
const index = sliceStrings.indexOf("item2");
sliceStrings.splice(index, 1);

调用中的第二个参数splice告诉代码要删除多少条目。如果我们想删除item2和item3，我们可以使用splice(index, 2)来实现这一点。

注意：该splice函数返回您已从数组中删除的条目。

假设我们想从一个数组中删除多个条目。我们将如何做这件事？有多种方法可以实现这一目标。对于这些示例，我们将稍微增加一些趣味性，并展示数组不仅适用于基本类型。让我们创建一个可以添加到数组中的吉他类型。类型由型号名称和吉他的string数量组成。

interface Guitar {
    model: string,
    strings: number
}
let guitars: Guitar[] = [];

我们将创建一个辅助方法来简化将条目添加到我们的数组中，然后添加一些条目。

function guitar(model: string, strings: number = 6): Guitar {
    return { model: model, strings: strings};
}
guitars.push(guitar('Fender Stratocaster'));
guitars.push(guitar('Gibson Les Paul Anniversary'));
guitars.push(guitar('Fender Villager', 12));
guitars.push(guitar('Dreadnought 12 String Acoustic', 12));

我现在要做的是移除任何没有六弦的吉他。我们可以使用的第一种方法是过滤数组，以便它只给我们想要的条目。我们必须将过滤后的版本复制回原始数组，以便它覆盖它。

guitars = guitars.filter((gtr) => gtr.strings === 6);

现在，虽然我们可以这样做，但这不是我真正推荐的。另一种方法是迭代（循环）数组并删除相关条目。为此，我们必须从最后一个条目开始，然后回到第一个条目，拼接我们想要删除的条目。如果我们从数组的开头开始，我们会冒丢失相邻条目的风险。

for (let i = guitars.length -1; i >= 0; i--) {
    if (guitars[i].strings !== 6) {
        guitars.splice(i, 1);
    }
}

从length -1开始可能有点奇怪。本能地，我们会认为我们将从length开始，但由于历史原因，数组实际上是从位置开始0而不是1。这意味着我们必须在这里考虑一个偏移量，这就是为什么这是-1。

将条目插入数组

我想在这篇文章中讨论的最后一个常见的数组操作是如何将一个条目插入到数组中的某个位置，而不是添加到末尾。做到这一点的能力很简单。我们将使用该splice函数，这一次告诉它删除0元素。这个函数非常通用，因为它给了我们一个额外的参数来指定我们想要添加的元素。如果我想在列表的第二个位置插入另一把吉他，我只需执行以下操作：

guitars.splice(1, 0, guitar('Ibanez Jem 777'));

结论

因此，我们有它。我们已经介绍了在TypeScript中使用数组的大部分基础知识。我们知道如何创建空数组和填充数组，以及学习如何在数组中添加和删除条目。在下一篇文章中，我们将不再单纯在控制台中工作，而是开始使用TypeScript作为Web应用程序的伴侣。

与往常一样，随附的代码可在Github上找到。

https://www.codeproject.com/Articles/5325318/100-Days-of-TypeScript-Day-7