typescript array map|极客笔记

typescript array map

介绍

在使用 TypeScript 进行开发过程中，我们经常会用到数组。而 map 是数组提供的一个高阶函数，它可以用来遍历数组中的每一个元素，并将每个元素映射为新的元素。

在本文中，我们将详细介绍 TypeScript 数组的 map 方法，包括语法、用法、示例代码和代码运行结果。

语法

map 方法的语法如下所示：

array.map(callback(element, index, array))

其中：

array：要被遍历的数组。
callback：回调函数，用来处理每个元素的逻辑，它接收三个参数：
- element：当前被处理的元素。
- index：当前元素的索引。
- array：数组本身。

当 map 方法被调用时，它会依次遍历 array 中的每一个元素，并对每个元素调用 callback 函数进行处理。然后，将 callback 函数的返回值按照原始数组的顺序组成一个新的数组，并返回该新数组。

需要注意的是，map 方法不会改变原始数组，而是返回一个新的数组。

示例代码

下面我们通过几个示例代码来详细说明 map 方法的用法。

首先，我们定义一个简单的数组：

const nums = [1, 2, 3, 4, 5];

示例 1：将数组中的每个元素都加倍

const doubled = nums.map((num) => num * 2);

console.log(doubled);

运行结果：

[2, 4, 6, 8, 10]

在这个示例中，我们使用 map 方法遍历了 nums 数组的每个元素，并将每个元素都乘以 2。最后，返回一个新的数组 doubled，包含每个元素都加倍后的结果。

示例 2：将数组中的数字转为字符串

const strings = nums.map((num) => num.toString());

console.log(strings);

运行结果：

["1", "2", "3", "4", "5"]

在这个示例中，我们使用 map 方法将 nums 数组中的每个数字都转为字符串。最后，返回一个新的数组 strings，包含了转换后的字符串。

示例 3：获取数组中每个元素的索引

const indexes = nums.map((_, idx) => idx);

console.log(indexes);

运行结果：

[0, 1, 2, 3, 4]

在这个示例中，我们使用 map 方法获取了 nums 数组中每个元素的索引。使用 _ 表示忽略参数 element，只关注参数 index。最后，返回一个新的数组 indexes，包含了每个元素的索引值。

示例 4：使用数组的 `map` 方法进行链式操作

const doubledAndFiltered = nums
  .map((num) => num * 2)
  .filter((num) => num > 5);

console.log(doubledAndFiltered);

运行结果：

[6, 8, 10]

在这个示例中，我们首先使用 map 方法将 nums 数组中的每个元素都加倍，然后再使用 filter 方法过滤出值大于 5 的元素。最后，返回一个新的数组 doubledAndFiltered，包含了符合条件的元素。

结论

通过使用 TypeScript 的数组 map 方法，我们可以更加方便地对数组中的每个元素进行处理，从而生成一个新的数组。

在本文中，我们详细介绍了 map 方法的语法、用法和示例代码，并给出了代码运行结果。

typescript array map