ts：数组的常用方法（forEach、map）

一、主要内容说明

ts的数组forEach方法和map方法都有遍历数组的功能。就是数组里的每个元素都会经过一次我们设置的函数方法。举例如下：

let str:string=["元素1","元素2","元素3"];
str.forEach(A);A----函数功能

元素1、元素2、元素3都会分别经历一遍A的函数功能。

• forEach方法是遍历原数组，对原数组元素内容进行改变。且forEach不接受返回值，所以ruturn在里边不适用。
• map方法是遍历原数组，生成一个新数组，新数组是基于原数组元素而变化的，且原来的数组不会发生改变。map可以接受返回值，可以使用return返回的功能。

forEach方法和map方法都可以接受3个参数。下面我们就选forEach方法举例：

let str:string=["元素1","元素2","元素3"];
str.forEach(B,C,D);B----数组str的元素，如“元素1”C----数组str的元素索引，如第2个,可以设置D----本数组，可以不设置

我们很多时候只是对B，也就是数组的各个元素进行函数条件改变。C“索引”、D“数组名称”的参数可以看情况设置，D更类似于给数组命名，不设置D直接用原数组名输出也可。
我们可以使用箭头函数，设置输入三个参数，然后分别重新命名三个参数的名字。如下

// 定义一个数字数组
let numbers: number[] = [764, 765, 766];// 遍历数字数组
numbers.forEach((num, index, array) => {E})E----函数功能

我们可以让数组各个元素num进行E函数功能。index是索引，array表示数组本身，index和array也可以根据需要不进行命名使用的。在这里num，index，array是我们自己命名的名称，不喜欢这个名称也可以命名成其他样式，不会影响后面逻辑函数的运行。

二、例子

（一）、forEach方法（遍历数组）

forEach方法是遍历原数组，对原数组元素内容进行改变。且forEach不接受返回值，所以ruturn在里边不适用。我们可以使用系统的类型，如number、string类型的元素，也可以自定义类型使用，源码1后面使用接口interface方法设置了一个自定义类型Message。

1.源码1 （forEach方法）

// 定义一个数字数组
let numbers: number[] = [764, 765, 766];// 遍历数字数组
numbers.forEach((num, index, array) => {// 处理数值num = (num - 10 + 50) * 4 / 2;// 输出处理后的结果console.log(`索引：${index}。\n 经过处理后的数值：${num}。\n 原数组为：${array}`);
});console.log(" \n 分隔行----------------------- \n")// 定义一个消息接口
interface Message {name: string;  // 姓名age: number;   // 年龄height: number; // 身高
}// 定义一个消息对象数组
let mes: Message[] = [{ name: "小黄", age: 28, height: 168 },{ name: "小八", age: 20, height: 155 },{ name: "月儿", age: 25, height: 140 }
];// 遍历消息数组
mes.forEach((mess, index, array) => {// 如果年龄大于20，则输出相关信息if (mess.age > 20) {console.log(`索引：${index} \n 大于20岁载入的人员：${mess.name}。年龄为：${mess.age} \n 原数组${array}`);}
});

2.源码1运行效果

（二）、map方法（遍历数组）

map方法是遍历原数组，生成一个新数组，新数组是基于原数组元素而变化的，且变化后原来的数组不会发生改变。map可以接受返回值，可以使用return返回的功能。同样的，我们仍可以使用系统的类型，如number、string类型的元素，也可以自定义类型使用，源码2后面使用接口interface方法设置了一个自定义类型Message。

1.源码2（map方法）

// 定义一个数字数组
let numbers: number[] = [764, 765, 766];// 使用 map 方法处理数字数组，并返回新的数组
let new_numbers = numbers.map((num) => {// 处理数值return (num - 10 + 50) * 4 / 2;
});// 输出处理后的结果
new_numbers.forEach((num, index) => {console.log(`索引：${index}。\n 经过处理后的数值：${num}。\n 原数组为：${numbers}`);
});console.log(" \n 分隔行----------------------- \n")// 定义一个消息接口
interface Message {name: string;  // 姓名age: number;   // 年龄height: number; // 身高
}// 定义一个消息对象数组
let mes: Message[] = [{ name: "小黄", age: 28, height: 168 },{ name: "小八", age: 20, height: 155 },{ name: "月儿", age: 25, height: 140 }
];// 使用 map 方法获取大于20岁的人
let new_mes = mes.map((mess, index) => {// 如果年龄大于20，则返回该人员的信息if (mess.age > 20) {return `索引：${index} \n 大于20岁载入的人员：${mess.name}。年龄为：${mess.age} \n 原数组${JSON.stringify(mes)}`;}
})// 输出大于20岁的人
new_mes.forEach(msg => console.log(msg));

2.源码2的运行效果

三、结语

数组方法还有其他的使用方式，还有更复杂的。但是，若能先把基本框架的原理弄通，那么它再怎么变都不会离开本源运行原理的。大原理还不懂，就从小原理入手，由简入繁。
另外这个遍历的运行原理和for循环好像，都是遍历一个个单位量。说不定在某种情况下，for的输出也可以使用forEach或map方式来输出。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

四、定位日期

2024-10-27；
14:36；