数组循环遍历的时候,不要老想着for了,可以使用map,扩展了解更多区别
数组中map,forEach和for循环的区别
今天遇到了一点有意思的事情,同事用了map出了点问题,页面的路由重新进行了加载,所以今天我们说一些map forEach for的区别
遍历性能上来说
for循环遍历 < for…of遍历 < forEach遍历 < for…in遍历 < map遍历
1)经典的for循环:
for(var i = 0; i < arr.length; i++){ }
2)for...in
for(var i in arr){ }
3) forEach
arr.forEach(function(i){ })
4) map
arr.map(function(i){ })
5) ES6的语法 for...of
for(let i of arr){ }
forEach 和map的区别:
相同点:
(1)都是循环遍历数组中每一项
(2)forEach 和 map方法中每次执行匿名函数都支持3个参数:item(当前每一项的值) index(索引值) arr(原数组)
(3)匿名函数中的this都是指向window
(4)只能遍历数组
(5)都不会改变原数组
区别:
map方法:
(1)map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值
(2)map方法不会对空的数组进行检测,map方法不会改变原始数组
(3)chrome、Safari1.5+、opera都支持,IE9+
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对于空数组是不会调用回调函数的
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的参数执行一次。
原文地址:https://www.cnblogs.com/cn-oldboy/p/15263248.html
- ios学习——键盘的收起
- IOS学习7——cocoapod安装与使用教程
- 使用Docker环境快速搭建靶机环境
- Java标准I/O流编程一览笔录
- 十分钟学perl够用(客服MM都懂了)
- Java多线程并发编程一览笔录
- Tomcat6/7应用服务器-禁用RC4等弱密码套件
- mybaits3整合spring总结
- 如何使用Airgeddon找回WiFi密码
- 设计缺陷将导致亚马逊Echo变身成为监听设备
- Unity引擎与C#脚本简介
- Redis分布式缓存系统Lua脚本食用指引
- 基于复杂方案OWSAP CsrfGuard的CSRF安全解决方案(适配nginx + DWR)
- XMLHttpRequest对象如何兼容各浏览器使用?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [周末往期回顾]使用Django获取Linux性能数据并存放在redis中
- [周末往期回顾]使用Python将Oracle已使用过索引存入MySQL中
- [周末往期回顾]DB_CREATE_FILE_DEST,DB_CREATE_ONLINE_LOG_DEST_n
- 【DB宝18】在Docker中安装使用MySQL高可用之MGR
- [周末往期回顾]redis的介绍及安装
- [Oracle 日常管理]使用BBED定位数据位置
- [Oracle 日常管理]表的相关操作
- JsonPath实践(二)
- C# 使用OpenCV在一张图片里寻找人脸
- 【DB笔试面试858】在Oracle中,ipcs和ipcrm命令的作用有哪些?
- Qt音视频开发13-mpv录像存储
- Oracle参数解析(spfile)
- ROS2机器人笔记20-08-18
- C sharp实例:华盾武器门数据接收和解析
- JsonPath实践(三)