使用js数组map方法对老代码进行优化

本文链接：https://blog.youkuaiyun.com/xishi66/article/details/111871719

博客围绕将人员列表中id显示为人员名称的功能展开，介绍了原JS代码及优化后的JS代码，利用已查询出的人员集合userList，把optlList里的id（如id1;id2;id3）转换为对应人员名称，如李四，张三，王二。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能描述

将途中人员列表（optlList）中的id(id1;id2;id3)显示人员的名称，显示成比如：李四，张三，王二，其中userList是已经查询出来的人员集合，

1、原JS：

function(response){
	for(var i=0; i<response.data.length; i++){
		if(response.data[i].optlList != null){
			if(response.data[i].optlList.indexOf(";") == -1){
				for(var j=0; j<userList.length; j++){
					if(userList[j].id == response.data[i].optlList){
						response.data[i].optlList = userList[j].name;
					}
				}
			}else{
				var nameList = "";
				var dataList = response.data[i].optlLst.indexOf(";");
				for(var k=0; k<dataList.length; k++){
					for(var j=0; j<userList.length; j++){
						if(userList(j).id == dataList(k)){
							nameList = userList[j].name+','+nameList;
							continue;
						}
					}
				}
				response.data[i].optlList = nameList;
			}
		}
	}
}

2、优化后js

function(response){
	return response.data.map(   //对集合进行map映射，以返回处理好后的集合
	function(item){     //此函数的参数就是map映射的集合的元素
		let nameList = [];
		if(item.optlList != null){
			nameList = item.optlList.split(";").map(   //对元素的optList按照";"进行拆分成一个新的集合，对新的集合进行map映射，映射处理后返回用户name的集合
			//对新集合map映射后的元素进行处理，其中userList.find(user => user.id == e)找到一个符合条件的元素即user，然后取出name组成name集合
			e => userList.find(user => user.id == e).name  
			);
		}
		item.optlList = nameList.toString(); //对name集合处理成以","隔开的字符串，如果想处理成其他符合隔开的字符串用join，比如nameList.join(";")用分号隔开的字符串
		return item;
	}
	)
}