ts:数组的常用方法(forEach、map)
ts:数组的常用方法(forEach、map)
- 一、主要内容说明
- 二、例子
- (一)、forEach方法(遍历数组)
- 1.源码1 (forEach方法)
- 2.源码1运行效果
- (二)、map方法(遍历数组)
- 1.源码2(map方法)
- 2.源码2的运行效果
- 三、结语
- 四、定位日期
一、主要内容说明
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;