JavaScript中常见批量处理数组元素的方法

在我们实际编写JavaScript代码的时候,我们经常需要处理一堆堆的数据,他可能是一个数组,一个json,一个object。

而我今天就就讲一下如何对一个数组中的元素执行批量处理。

情景假设

某个企业网站上展示了公司人员列表,每个人员都至少包含了姓名,性别,年龄,岗位等信息,现在有个需求要给这个列表增加一个编辑功能。我的做法是,员工信息统一用一个数组维护,每个人的信息都是这个数组的成员。编辑人的信息就是编辑这个数组的信息,然后刷新人员列表。这样比较容易操作,加载和保存人员信息也比较好做。

人员数组:

var userList = [{name:"张三",age:25,six:"男"},{name:"李四",age:32,six:"男"},{name:"王五",age:21,six:"男"},{name:"张磊",age:28,six:"男"}];

需求:罗列用户

现在需要写个方法,罗列所有的人员姓名,保存到一个数组。
一般我们会这么写:

var nameList=[];
$(userList).each(function(){
  nameList.push(this.name);
});

我们使用jquery的each方法手动遍历数组。并取出每个成员的name保存到一个临时变量里面。

Map方法实现

而现在有个更简单的方法就是jquery的map方法。

map方法的原形:

$.map(object,callback)
.map(callback(index,item))

object:需要遍历的对象
callback:处理每个成员的回调处理方法,返回处理结果
对object中的每个成员调用callback处理,callback又会返回处理结果,map最终会整合这些处理结果并返回。

$(userList).map((index,user)=>user.name);

map配合箭头函数的写法,代码是不是很简单?

需求:用户查询

现在来个进阶的,现在这个用户列表需要有个搜索功能,比如按年龄搜索,排除大于某个年龄的人员。

$(userList).map((index,user)=>{if(user.age<22) {return user.name} else{ return null}});

reduce方法
接下来讲一下更牛逼的reduce方法
reduce原型

[].reduce(callbackfn(preValue,curValue,index,array)[, initialValue])

这是一个JavaScript原生方法。接受2个参数,第一个是回调方法,第二个是可选的初始值回调方法包含了四个参数,
preValue: 上一次调用回调返回的值,或者是提供的初始值(initialValue)
curValue: 数组中当前被处理的数组项
index: 当前数组项在数组中的索引值
array: 调用 reduce()方法的数组
reduce方法相比map方法,可自定义对遍历的数组成员进行组合,而不是map中直接变成一个jquery的数组对象。

var arr = [3, 4, 5, 6];
Array.prototype.sum = function () {
    var sumResult = 0;
    return this.reduce(function (preValue, curValue) {
        return sumResult = preValue + curValue;
    });
}
arr.sum();

上述代码给数组原形添加了一个sum方法,利用reduce方法,对数组的每一个成员执行了求和计算。preValue是之前值累加的结果,curValue是当前需要处理的数组成员。

当前这里还提一下reduceRight这个方法,这个方法的使用方法和reduce是一样的,只是reduceRight是从数组的末尾开始遍历的。

var arr = [4, 5, 6];
Array.prototype.ruduceRightSum = function () {
    for (var i = 0; i < 10000; i++) {
        return this.reduceRight(function (preValue, curValue) {
            return preValue + curValue;
        });
    }
}
arr.ruduceRightSum();


补充内容

新需求,我需要查询所有用户中,包含“张”这个字的所有人的完整信息。
这个需求不同于之前的情况(并不需要修改元素),只需要对数组做过滤。
[].filter(Fn(element, index, array))
数组的filter方法可以通过Fn对每个成员执行过滤处理,Fn返回true保留这个成员,返回false丢弃。
当然你也可以不用单独声明这个回调函数而改用箭头函数。
此方法一般用于筛选数据中的元素。

function SearchByName(element, index, array) {
    return (element.name.indexOf("张")!=-1);
}
userList.filter(SearchByName);
userList.filter((element)=>element.name.indexOf("张")!=-1);

新需求,人员信息添加工资字段,每个人的初始工资都是6K。

userList.forEach((user)=>user.wage=6000);

[].forEach(Fn) 用于循环遍历一个数组,传递每一个元素给回调函数Fn,Fn有三个参数,第一个是具体的元素,第二个是索引,第三个是正在处理的数组。
此方法一般用于批量处理数组的元素。