浅谈JavaScript中forEach与each
forEach是ES5中操作数组的一种方法,主要功能是遍历数组,例如:
var arr = [1,2,3,4];
arr.forEach(alert);
等价于:
var arr = [1, 2, 3, 4];
for (var k = 0, length = arr.length; k < length; k++) {
alert(array[k]);
}
forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身
因此:
[].forEach(function(value,index,array){
//code something
});
等价于:
$.each([],function(index,value,array){
//code something
})
写一个例子;
var arr = [1,2,3,4];
arr.forEach(function(value,index,array){
array[index] == value; //结果为true
sum+=value;
});
console.log(sum); //结果为 8
map:map即是 “映射”的意思 用法与 forEach 相似,用法即:
[].map(function(value,index,array){
//code
})
另一个例子
当你有一个如下数组时:
var users = [
{
lastName: 'Li',
firstName: 'Lei'
},
{
lastName: 'Han',
firstName: 'Meimei'
}
];
现在我希望你处理这个数组,给其中每一个对象加一个fullName字段,就把lastName和firstName拼一起就行(简单吧)。
当你用相对原始的语法处理时,可能是这样的:
for(var i = 0; i < users.length; i++){
var user = users[i];
user.fullName = user.lastName + user.firstName;
}
代码是对的,但却不好(优秀),为什么?原因有2
- 创建了与主业务无关的for loop
- 创建了与主业务无关的变量i
用forEach的好处是什么?答案就是解决了上面那2个缺陷,代码如下:
users.forEach(function(user, index, arr){
user.fullName = user.lastName + user.firstName;
});
这里,你只需要关注主业务(fullName的生成),无需关注遍历的过程及方法。