js数组方法forEach与map的异同点

1 相同点

  1. 都是ES5的规范
  2. 不会直接改变原数组
  3. callback函数值有三个参数:currentVaule、index、array,另外一个参数可以指定当前调用对象thisArg

2 不同点

  1. forEach返回undefined,并且不可链式调用;map返回一个新数组
  2. 没有办法终止或者跳出forEach()循环,除非抛出异常,所以想执行一个数组是否满足什么条件,返回布尔值,可以用一般的for循环实现,或者用Array.every()或者Array.some();

3 栗子

定义一个数组:

var arr = [1, 2, 3, 4];

注意下面的示例代码每次操作前都是先将arr还原成[1, 2, 3, 4]再看结果的

  1. 返回值
var eachRes = arr.forEach(function(currentValue, index, arr) {
      return currentValue + 1;
});
var mapRes =  arr.map(function(currentValue, index, arr) {
      return currentValue + 1;
});
console.log(eachRes); //undefined
console.log(mapRes); //[2, 3, 4, 5]
console.log(arr); //[1, 2, 3, 4]
  1. 修改原数组
//forEach
arr.forEach(function(currentValue, index, arr) {
      if(currentValue === 2) {
          arr.pop();
      }
});
console.log(arr); //[1, 2, 3]
//map
arr.map(function(currentValue, index, arr) {
      if(currentValue === 2) {
          arr.pop();
      }
});
console.log(arr); //[1, 2, 3]
  1. 一个笔试题
['1', '2', '3', '4'].map(parseInt);  // [1, NaN, NaN, NaN]

这主要是因为 parseInt()默认有两个参数,第二个参数是进制数。当parsrInt没有传入参数的时候,而map()中的回调函数时候,会给它传三个参数,第二个参数就是索引,明显不正确,所以返回NaN了。详见JavaScript parseInt用法

function returnInt(element){
  return parseInt(element,10);
}
['1', '2', '3', '4'].map(returnInt);
// [1, 2, 3, 4]
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 4,246评论 0 6
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,221评论 0 13
  • 创建数组 arr.length--- title: js正则表达式categories: javascriptda...
    angelwgh阅读 1,412评论 0 2
  • 建立实体类 配置好SessionFactory之后,我们就可以开始建立一对一的单表映射了。首先需要建立一个实体类,...
    乐百川阅读 322评论 0 0
  • 你用连续不断的十二个小时 画来一个天亮 阳台上停滞着沉沉雾霭 寒气凉了脚心 天亮之后 白雾之后 你喜欢的太阳就要到...
    飞花落叶阅读 58评论 0 0