JS中map()与forEach()的区别和用法
相同点:
1.都是循环遍历数组中的每一项
2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组)
3.匿名函数中的this都是指向window
4.只能遍历数组
不同点:
map()
map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值
也就是map()进行处理之后返回一个新的数组
⚠️注意:map()方法不会对空数组进行检测
map方法不会改变原始数组
var arr = [0,2,4,6,8];
var str = arr.map(function(item,index,arr){
console.log(this); //Window
console.log(this);
console.log(item);
console.log('原数组arr:',arr); // 会执行五次
return item/2;},this);console.log(str); //[0,1,2,3,4]
forEach
forEach方法用于调用数组的每个元素,将元素传给回调函数
⚠️注意: forEach对于空数组是不会调用回调函数的 ,
没有返回一个新数组&没有返回值
应用场景:为一些相同的元素,绑定事件处理器!
不可链式调用
var arr = [0,2,4,6,8]
var sum =0;
var str = arr.forEach(item,index.arr){sum+= item;console.log("sum的值为:",sum);})
JS中map()与forEach()的区别和用法的更多相关文章
- JS中map与forEach的区别
很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法, 我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数 ...
- JS中map和foreach的区别以及some和every的用法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- JS中Map和ForEach的区别
定义 forEach()方法: 针对每一个元素执行提供的函数. map()方法: 创建一个新的数组,其中每一个元素由调用数组中的每一个元素执行提供的函数得来. 区别 forEach()方法不会返回执行 ...
- JavaScript中Map和ForEach的区别
译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...
- ES5中, map 和 forEach的区别
forEach和map区别在哪里知道吗? // forEach Array.prototype.forEach(callback(item, index, thisArr), thisArg) // ...
- JS中map、forEach、filter、reduce等Array新增方法的区别
数组在各个编程语言中的重要性不言而喻,但是在之前的JavaScript中数组虽然功能已经很强大,但操作方法并不完善,在ECMAScript5中做了适当的补充. Array.isArray(elemen ...
- JS中for和forEach的区别
https://thejsguy.com/2016/07/30/javascript-for-loop-vs-array-foreach.html
- JS中apply和call的区别和用法
Javascript中有一个call和apply方法,其作用基本相同,但是它们也有略微不同的地方. JS手册中对call方法的解释是: call方法:调用一个对象的一个方法,以另一个对象替换当前对象. ...
- Js中Map对象的使用
Js中Map对象的使用 1.定义 键/值对的集合. 2.语法 mapObj = new Map() 3.备注 集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 4.属性 ...
随机推荐
- JDK1.8集合之HashMap
目录 简介 内部实现 类的属性 Node数组 重要方法 put()和putVal()方法 get()和getNode()方法 resize()方法 容量设置为2的幂的优点 计算Hash时候 扩容时候 ...
- re正则
#转义字符和原生字符 import re # # # 转义 # text = 'apple price is $299' # ret = re.search('\$\d+',text) # print ...
- web前端css(一)
一 css的引入方式: 1) 行内样式: <p style=”color: green”>我是一个段落</p> 2) 内接样式: <style ty ...
- c++复杂桶排序Java版
c++复杂桶排序Java版 题目和我的前几个排序一样 这次是Java版的 代码 + 注释 package com.vdian.qatest.supertagbiz.test.niu; /** * Cr ...
- springboot之mybatisplus,mp的简单理解
这是一张简单的service的继承图.可以看到我们的执行类,即XxxServiceImpl的继承关系. 从上到下,ServiceImpl和BaseMapper是一个依赖关系,ServiceImpl和I ...
- MyBatis OGNL表达式用法
From<MyBatis从入门到精通> <!-- 4.7 OGNL用法 MyBatis常用的OGNL表达式: e1 or e2: e1 and e2 e1 == e2; e1 != ...
- 性能测试-实例讲解VU、RPS、RT公式换算
概述 今天看到一篇文章讲解VU.RPS.RT,中间有一个公式如下图 并发数 = RPS * 响应时间 于是我在本地做了几次实验,试图验证一下公式的准确性 实验网站 www.baidu.com 第一次 ...
- VS2010 winform开发笔记---combox的SelectedIndexChanged事件及级联问题
DisplayMember绑定需要显示的数据表字段, 而ValueMember绑定需要获取选择的项的值. 然后通过 combo.SelectedValue就可以取得选中项的值了. DisplayMem ...
- 跨站脚本攻击(存储型xss)笔记(二)
测试目标字段:页面下方的红色框位置. 由于编辑状态是编辑器,所以有可能出现跨站! 我插了个input然而并没有当代码执行 可能有些测试人员就认为被过滤掉了,因为尝试了各种尖括号.js事件.转义.编码等 ...
- Lucene05-分词器
Lucene05-分词器 1.概念 Analyzer(分词器)的作用是把一段文本中的词按规则取出所包含的所有词.对应的是Analyzer类,这是一个抽象类,切分词的具体规则是由子类实现的,所以对于不同 ...