Array.prototype.forEach数组遍历
forEach是Array新方法中最基本的一个,就是遍历,循环。先看以前是怎么遍历数组的
常用遍历
var arr = [1,2,3,4,5];
for(var i = 0; i < arr.length; i++){
console.log(arr[i]); // 1,2,3,4,5
}
排除null与undefined和不存在元素的遍历
var arr = [1,undefined,null,,5];
for(var i = 0; i < arr.length; i++){
if(!arr[i]) continue; // 跳过了null和undefined和不存在元素
console.log(arr[i]); // 1,5 //等同于
if(arr[i]){ // 跳过了null和undefined和不存在元素
console.log(arr[i]);
}
}
排除undefined和不存在元素的遍历
var arr = [1,undefined,null,,5];
for(var i = 0; i < arr.length; i++){
if(arr[i] === undefined) continue; // 跳过undefined和不存在元素
console.log(arr[i]); // 1,null,5 //等同于
if(arr[i] !== undefined){ // 跳过undefined和不存在元素
console.log(arr[i]);
}
}
跳过不存在的元素,如没有值的undefined元素
var arr = [1,undefined,null,,5];
for(var i = 0; i < arr.length; i++){
if(!(i in arr)) continue;
console.log(arr[i]); // 1,undefin,null,5 //等同于
if(i in arr){
console.log(arr[i]);
}
}
ECMAScript5中遍历数组元素的新方法,使用forEach()方法
/*
* ECMAScript5中遍历数组元素的新方法,使用forEach()方法
* @ 语法:arr.forEach(callback[, thisArg]);
* @ param callback // 回调函数
* @ param thisArg // 改变回调函数里面的this指向
* @ 语法:arr.forEach(function(value, index, array));
* @ param value // 数组的值
* @ param index // 数组的索引
* @ param array // 数组本身
*/ // forEach循环
var arr = [1,2,3,4,5];
arr.forEach(function(value,index, array){
console.log("第"+ index + "的值是:" + value + ",数组本身:" + array);
}); /* logs
第0的值是:1,数组本身:1,2,3,4,5
第1的值是:2,数组本身:1,2,3,4,5
第2的值是:3,数组本身:1,2,3,4,5
第3的值是:4,数组本身:1,2,3,4,5
第4的值是:5,数组本身:1,2,3,4,5
*/
forEach只跳过不存在的元素(不存在索引,但可以访问,如arr[3],值为undefined)
var arr = [1,null,undefined,,5];
arr.forEach(function(value,index, array){
console.log("第"+ index + "的值是:" + value);
}); /* logs
第0的值是:1
第1的值是:null
第2的值是:undefined
第4的值是:5
*/
forEach第二个参数改变回调函数里面的this指向
var arr = [1,2,3,4,5];
var arr2 = ["a","b","c","d","e"];
arr.forEach(function(value, index, array){
console.log("第"+ index + "的值是:" + value);
console.log(this); // 第二个参数改变回调函数里面的this指向 this = ["a", "b", "c", "d", "e"];
}, arr2);
polyfill
/*
* polyfill
* @ forEach()是ECMAScript5中的方法
*/
if(!Array.prototype.forEach){
Array.prototype.forEach = function(callback,thisArg){
var T, k;
if(this === null){
throw new TypeError("this is null or not defined")
}
var O = Object(this);
var len = O.length >>> 0;
if(typeof callback !== "function"){
throw new TypeError(callback + " is not a function");
}
if(arguments.length > 1){
T = thisArg;
}
k = 0;
while(k < len){
var kValue;
if(k in O){
kValue = O[k];
callback.call(T,kValue,k,O);
}
k++;
}
}
} var len = O.length >>> 0;
这么写确实比 var len = this.length || 0; (parseInt?)要好很多,在遇到意外的 this 时,它不会返回 { }、[ ] 等意外的值。(IE 6+ 支持)
1.所有非数值转换成0
2.所有大于等于 0 等数取整数部分 // 测试类型值 >>> 的结果
![]()
Array.prototype.forEach数组遍历的更多相关文章
- 数组的方法之(Array.prototype.forEach() 方法)
forEach() 方法对数组的每个元素执行一次提供的函数. 注意: 没有返回一个新数组 并且 没有返回值! 应用场景:为一些相同的元素,绑定事件处理器! const arr = ['a', 'b', ...
- Array.prototype.forEach()&&Array.prototype.map()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach https ...
- 数组方法 Array.prototype
Object.prototype 数组的值是有序的集合,每一个值叫做元素,每一个元素在数组中都有数字位置编号,也就是索引,js中数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或者 ...
- 来自数组原型 Array.prototype 的遍历函数
1. Array.prototype.forEach() forEach() 是一个专为遍历数组而生的方法,它没有返回值,也不会改变原数组,只是简单粗暴的将数组遍历一次 参数: callback() ...
- 数组遍历 map()、forEach() 及 字符串切割 split() / 字符串截取 slice()、substring()、substr()
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代 ...
- JS几种数组遍历方式以及性能分析对比
前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...
- 浅谈JS的数组遍历方法
用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; ...
- JS数组遍历方法
常用数组遍历方法: 1.原始for循环 var a = [1,2,3]; for(var i=0;i<a.length;i++){ console.log(a[i]); //结果依次为1,2,3 ...
- JS 中的数组遍历方式效率比较
JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代码如下: ; j < ...
随机推荐
- HTTP小结
http 一.HTTP协议简介 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交 ...
- MapReduce 学习(一)
首先我们先来欣赏一下MapReduce的执行过程吧,如下图,自己看,不解释了. Map 和 Reduce 的处理都是基于Key/Value来进行的,在Map中对文件的每一行进行处理,有两个输入参数,K ...
- iOS边练边学--xib文件初使用
一.Xib和storyboard对比 *共同点: 1>都用来描述软件界面 2>都用Interface Builder工具来编辑 3>本质都是转换成代码去创建控件 *不同点 1> ...
- 数据处理包plyr和dplyr包的整理
以下内容主要参照 Introducing dplyr 和 dplyr 包自带的简介 (Introduction to dplyr), 复制了原文对应代码, 并夹杂了个人理解和观点 (多附于括号内). ...
- ADSI Edit 工具
最近在弄.net的活动目录用到了工具ADSI Edit,网上找了点资料,一来自己记录下,二来分享给大家: 下载的压缩包里存在两个文件adsiedit.dll和adsiedit.msc 1.将adsie ...
- linux -- 终端执行可执行文件
有一个可执行文件:/media/home/1.sh 1.首先,得有权限 (1)如果已经是root用户(#),则不用做什么 (2)如果不是 $ sudo su pass your password:(这 ...
- html -- 实体
- python 脚本检测python 版本
通过sys 模块的sys_info可以返回当前python 的版本信息, 其返回值是一个元组, 比如(2, 6, 6, 'final', 0); 表示当前版本为2.6.6 , 我们可以利用这个变量的值 ...
- centos6下时间同步(ntp)操作
1.时间同步的重要性 时间同步可以保证业务的正常运行,比如数据同步,比如系统计划任务的批量执行.等. 2.查看自己的系统时间. [root@localhost ~]# date 3.系统修改时间 # ...
- SRCNN之后的深度学习超分辨率
SRCNN开山之作 IDN 信息蒸馏网络information distillation network(IDN) Fast and Accurate Single Image Super-Resol ...