大多数情况下,我们都要对数组进行遍历,然后经常用到的两个方法就是forEach和map方法。

先来说说它们的共同点

相同点

  • 都是循环遍历数组中的每一项
  • forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item(当前每一项),index(索引值),arr(原数组)
  • 匿名函数中的this都是指向window
  • 只能遍历数组
  • 都不会改变原数组

区别

map方法

1.map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。

2.map方法不会对空数组进行检测,map方法不会改变原始数组。

3.浏览器支持:chrome、Safari1.5+、opera都支持,IE9+,

array.map(function(item,index,arr){},thisValue)

var arr = [0,2,4,6,8];
var str = arr.map(function(item,index,arr){
console.log(this); //window
console.log("原数组arr:",arr); //注意这里执行5次
return item/2;
},this);
console.log(str);//[0,1,2,3,4]

若arr为空数组,则map方法返回的也是一个空数组。

forEach方法

1.forEach方法用来调用数组的每个元素,将元素传给回调函数

2.forEach对于空数组是不会调用回调函数的。

Array.forEach(function(item,index,arr){},this)
var arr = [0,2,4,6,8];
var sum = 0;
var str = arr.forEach(function(item,index,arr){
sum += item;
console.log("sum的值为:",sum); //0 2 6 12 20
console.log(this); //window
},this)
console.log(sum);//20
console.log(str); //undefined

无论arr是不是空数组,forEach返回的都是undefined。这个方法只是将数组中的每一项作为callback的参数执行一次。

数组中的forEach和map的区别的更多相关文章

  1. 数组遍历方法forEach 和 map 的区别

    数组遍历方法forEach 和 map 的区别:https://www.cnblogs.com/sticktong/p/7602783.html

  2. js中的forEach和map的区别

    我们先来看两者之间的相同之处 var arr = ['a','b','c','d']; arr.forEach(function(item,index,arr){ //item表示数组中的每一项,in ...

  3. forEach和map的区别,简单写了IE低版本的原形封装

    今天有点'不务正业',旧的没有写完又开新的,没办法 -0- 今天遇到这个特感兴趣嘛入正题了 forEach 和 map 的区别 参考:http://blog.csdn.net/boysky0015/a ...

  4. JS中forEach和map的区别

    共同点: 1.都是循环遍历数组中的每一项. 2.forEach()和map()里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中 ...

  5. vue 数组遍历方法forEach和map的原理解析和实际应用

    一.前言 forEach和map是数组的两个方法,作用都是遍历数组.在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例. 二.代码 1. 相同点 都是数组的方法 都用来遍历数组 ...

  6. 数组的方法 forEach filter map slice splice

    目前一些数组的实用的方法 1 arr.splice(i,n) 删除从i(索引值)开始之后的那个元素.返回值是删除的元素,改变原数组: 参数: i 索引值      n 个数 let arr = [1, ...

  7. C++中的hash_map和map的区别

    hash_map和map的区别在哪里?构造函数.hash_map需要hash函数,等于函数:map只需要比较函数(小于函数). 存储结构.hash_map采用hash表存储,map一般采用红黑树(RB ...

  8. js 数组API之forEach、map的用法

    forEach语法: arr.forEach(function(value, index, array){--}) 实例: // forEach ,,,,]; arr.forEach(function ...

  9. js删除数组中元素 delete 和splice的区别

    例如我有一个数组: var array = ["aa","dd","cc","aa"] ,我想删除这个数组的“dd”元素 ...

随机推荐

  1. TypeError: expected string or buffer的解决方法

    错误种类:TypeError: expected string or buffer 具体错误解释:这是因为返回的变量不是字符类型,而导致此错误 具体解决方法:在具体程序段前加if判断语句,判断程序返回 ...

  2. PHP序列化、反序列化常用的魔术方法

    __wakeup() //使用unserialize时触发__sleep() //使用serialize时触发__destruct() //对象被销毁时触发__call() //在对象上下文中调用不可 ...

  3. Django 1.10中文文档-第一个应用Part3-视图和模板

    本教程上接Django 1.10中文文档-第一个应用Part2-模型和管理站点.我们将继续开发网页投票这个应用,主要讲如何创建一个对用户开放的界面. 概览 视图是Django应用中的一“类”网页,它通 ...

  4. 前端—css

    css css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css的四种引入方式: 1.行内式   ...

  5. xxx_initcall相关知识

    参考文件include/linux/init.h /* * Early initcalls run before initializing SMP. * * Only for built-in cod ...

  6. 【sam复习】用sam实现后缀排序

    没错,一定是无聊到一定境界的人才能干出这种事情. 这个无聊的zcysky已经不满足于用后缀平衡树求sa了,他想用sam试试. 我们回顾下sam的插入过程,如果我们从最后一个state沿着suffix ...

  7. 4.Python3标准库--算法

    (一)functools:管理函数的工具 import functools ''' functools模块提供了一些工具来管理或扩展和其他callable对象,从而不必完全重写 ''' 1.修饰符 f ...

  8. awk处理之案例六:awk根据条件插入文本

    编译环境 本系列文章所提供的算法均在以下环境下编译通过. [脚本编译环境]Federa 8,linux 2.6.35.6-45.fc14.i686 [处理器] Intel(R) Core(TM)2 Q ...

  9. hdu 1041(递推,大数)

    Computer Transformation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/ ...

  10. Simplify Path——简单经典的预处理

    Given an absolute path for a file (Unix-style), simplify it. For example,path = "/home/", ...