forEach、for+i、map的用法及区别
|
array.forEach(callback[, thisObject]);
下面是参数的详细信息:
1、 callback : 函数测试数组的每个元素。
2、thisObject : 对象作为该执行回调时使用.
forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环。
Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。
[].forEach(
function
(value, index, array) {
// ...
});
$.each([],
function
(index, value, array) {
// ...
});
array.map(callback,[ thisObject]);
[].map(
function
(value, index, array) {
// ...
});
map方法的作用不难理解,“映射”嘛,也就是原数组被“映射”成对应新数组。var
data=[1,3,4]
var
Squares=data.map(
function
(val,index,arr){
console.log(arr[index]==val);
// ==> true
return
val*val
})
console.log(Squares);
// ==> [1, 9, 16]
var arr = new Array(1000);
arr[0] = 1;
arr[99] = 3;
arr[999] = 5;
// for循环
for (var i = 0, l = arr.length; i < l; i++) {
console.log('arr[%s]', i, arr[i]);
}
console.log('i :' , i);
// ...
// arr[0] 1
// ...
// arr[99] 3
// ...
// arr[999] 5
// i : 1000
// for - in 循环
var count = 0;
for(var j in arr){
count ++ ;
if(arr.hasOwnProperty(j)){
console.log('arr[%s]', j, arr[j]);
}
}
console.log('count : ', count);
// arr[0] 1
// arr[99] 3
// arr[999] 5
// i : 1000
forEach循环:
var arr = new Array(1000);
Array 在 Javascript 中是一个对象, Array 的索引是属性名。
arr[0] = 1;
arr[99] = 3;
arr[999] = 5; var count = 0;
arr.forEach(function(value, index) {
count++;
console.log(typeof index);
console.log(index, value);
});
console.log('count', count);
// number
// 0 1
// number
// 99 3
// number
// 999 5
// count 3
事实上, Javascript 中的 “array” 有些误导性, Javascript 中的 Array 并不像大部分其他语言的数组。首先, Javascript 中的 Array 在内存上并不连续,其次, Array 的索引并不是指偏移量。
实际上, Array 的索引也不是 Number 类型,而是 String 类型的。我们可以正确使用如 arr[0] 的写法的原因是语言可以自动将 Number 类型的 0 转换成 String 类型的 "0" 。
所以,在 Javascript 中从来就没有 Array 的索引,而只有类似 "0" 、 "1" 等等的属性。有趣的是,每个 Array 对象都有一个 length 的属性,导致其表现地更像其他语言的数组。
但为什么在遍历 Array 对象的时候没有输出 length 这一条属性呢?那是因为 for-in 只能遍历“可枚举的属性”, length 属于不可枚举属性,实际上, Array 对象还有许多其他不可枚举的属性。 map可以做链式操作,forEach不可以,
for不用担心兼容性的问题,还有可以break跳出循环,是基础循环,可以有for...in,foo...of,for(let i=0;i<len;i++)等。可以用continue和break控制
forEach是for(let i=0;i<len;i++)的缩写,不支持continue和break,可以return来控制循环,forEach是不能退出循环本身的
map循环当前可循环对象,并且返回新的可循环对象,而forEach没有返回值
forEach只有在火狐和谷歌浏览器中Array有这个方法,在IE中就米有,需要用prototype手动添加这个方法
forEach、for+i、map的用法及区别的更多相关文章
- JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别
JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别 :https://blog.csdn.net/hyupeng1006/a ...
- Collection List Set和Map用法与区别
labels:Collection List Set和Map用法与区别 java 散列表 集合 Collection 接 口的接口 对 象的集合 ├ List ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
- java8Stream map和flatmap的区别
map和flatmap的区别 map只是一维 1对1 的映射 而flatmap可以将一个2维的集合映射成一个一维,相当于他映射的深度比map深了一层 , 所以名称上就把map加了个flat 叫flat ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- MyBatis从入门到精通(第4章):MyBatis动态SQL【foreach、bind、OGNL用法】
(第4章):MyBatis动态SQL[foreach.bind.OGNL用法] 4.4 foreach 用法 SQL 语句中有时会使用 IN 关键字,例如 id in (1,2,3).可以使用 ${i ...
- [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别
原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul> <li title='苹果'>苹果</li> ...
- WordPress翻译中 __()、_e()、_x、_ex 和 _n 的用法及区别
编译函数 WordPress使用了下面几个函数来方便语言本地化. __() _e() _x() _ex() _n() 以上所列的函数是用来包含所需翻译的字符串的,根据字符串的不同参数和输出类型,需要使 ...
- typedef和#define的用法与区别
typedef和#define的用法与区别 typedef和#define的用法与区别 一.typedef的用法 在C/C++语言中,typedef常用来定义一个标识符及关键字的别名,它是语言编译过程 ...
随机推荐
- World Cup(思维+模拟)
Description Allen wants to enter a fan zone(球迷区) that occupies a round square and has nn entrances. ...
- Beta版冲刺前准备
[团队概要] 团队项目名:小葵日记 团队名:日不落战队 队员及角色: 队员 角色 备注 安琪 前端工程师 队长 佳莹 前端工程师 智慧 后端工程师 章鹏 后端工程师 语恳 UI设计师 炜坤 前端工程师 ...
- 做更好的自己 ——读《我是IT小小鸟》有感
转眼间大一已经过了一大半了,到了大学,才发现初高中时父母所说的“到了大学你就轻松了···”都是骗人的.但我脑海里却一直被这个观点所支配,以至于我在大一上学期里无所事事,不知道干些什么.学习也没重视,分 ...
- 周总结<3>
经过了一周的学习,我们在html以及C语言方面又有的新的知识点的学习,包括计算机导论也学会了路由器的设置. html 鼠标事件 C 二叉树的遍历代码 计算机导论 路由器的设置 Html案例: < ...
- 奥特曼小分队之we are a team
团队名称:奥特曼小分队 团队博客链接:http://cnblogs.com/ATMXFD 团队负责跑腿的:李全清 http://www.cnblogs.com/QuanQingli/ 团队成员: 孙乐 ...
- TCP系列50—拥塞控制—13、Eifel探测下的拥塞撤销
一.概述 我们之前在SACK关闭场景下的拥塞撤销那篇文章中提到过Eifel探测算法(Eifel Detection Algorithm),最早在介绍DSACK和FRTO的时候我们就有提到过Eifel探 ...
- Alpha阶段敏捷冲刺 ADY8
一.举行站立式例会 今天也没有拍照片,人不齐. 二.团队报告 1.昨日已完成的工作 (1)创建一个test,并且将图片导入进去使其可以显示. 2.今日计划完成的工作 完成收尾工作.实现代码的连接. 3 ...
- 【Nginx】优化配置
nginx优化 突破十万并发 一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1. worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它 ...
- dat.gui 上手
dat.gui是款神器产品.一个调试利器.但是用起来很简单很简单 1:引用dat.gui.js. 2:实例化 this.gui = new dat.GUI(); 3:创建可设置一个数据对象.例如v ...
- Java容器深入浅出之String、StringBuffer、StringBuilder
对字符串的花式处理一直是现代应用系统的主要操作之一,也是对Java基础知识考察的重要方面.事实上,Java字符串类的底层是通过数组来实现的.具体来说,String类是固定长度的数组,StringBuf ...