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数组遍历的更多相关文章

  1. 数组的方法之(Array.prototype.forEach() 方法)

    forEach() 方法对数组的每个元素执行一次提供的函数. 注意: 没有返回一个新数组 并且 没有返回值! 应用场景:为一些相同的元素,绑定事件处理器! const arr = ['a', 'b', ...

  2. Array.prototype.forEach()&&Array.prototype.map()

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach https ...

  3. 数组方法 Array.prototype

    Object.prototype 数组的值是有序的集合,每一个值叫做元素,每一个元素在数组中都有数字位置编号,也就是索引,js中数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或者 ...

  4. 来自数组原型 Array.prototype 的遍历函数

    1. Array.prototype.forEach() forEach() 是一个专为遍历数组而生的方法,它没有返回值,也不会改变原数组,只是简单粗暴的将数组遍历一次  参数: callback() ...

  5. 数组遍历 map()、forEach() 及 字符串切割 split() / 字符串截取 slice()、substring()、substr()

    JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代 ...

  6. JS几种数组遍历方式以及性能分析对比

    前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...

  7. 浅谈JS的数组遍历方法

    用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; ...

  8. JS数组遍历方法

    常用数组遍历方法: 1.原始for循环 var a = [1,2,3]; for(var i=0;i<a.length;i++){ console.log(a[i]); //结果依次为1,2,3 ...

  9. JS 中的数组遍历方式效率比较

    JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代码如下: ; j < ...

随机推荐

  1. [LintCode]各位相加

    描述: 给出一个非负整数 num,反复的将所有位上的数字相加,直到得到一个一位的整数. 给出 num = 38. 相加的过程如下:3 + 8 = 11,1 + 1 = 2.因为 2 只剩下一个数字,所 ...

  2. Web API(二):Web API概述

    一.什么是API API(Application Programming Interface)即应用程序编程接口,是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能 ...

  3. 浅谈Log4j和Log4j2的区别

    相信很多程序猿朋友对log4j都很熟悉,log4j可以说是陪伴了绝大多数的朋友开启的编程.我不知道log4j之前是用什么,至少在我的生涯中,是log4j带我开启的日志时代. log4j是Apache的 ...

  4. 01 Developing Successful Oracle Application

    本章提要-------------------------------本章是概述性章节1. 介绍了了解数据库内部结构对于开发的重要性2. 介绍了如何才能开发好的数据库应用程序------------- ...

  5. jquery实现简单瀑布流代码

    测试环境:ie8 ff13.0.1  chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 <!DOCTYP ...

  6. MFC中的UpdateData()

    UpdateData()是MFC的窗口函数,用来刷新数据的,参数只有一个,默认为TRUE 简单的说: UpdateData(TRUE) == 将控件的值赋值给成员变量, UpdateData(FALS ...

  7. ffmpeg avformat_open_input返回失败的解决办法

    用ffmpeg做的第一个程序,参考网上的代码,就出现了一些问题,其中avformat_open_input返回失败. 下面是我在网上收集到的失败信息的相关解决: /////////////////// ...

  8. css -- outline轮廓

    outline:#00ff00 solid thick; 边框参数: 样式: none:默认,无轮廓 dotted:点状轮廓 dashed:虚线轮廓 solid:实现轮廓 double:双线轮廓,宽度 ...

  9. 根据多表条件更新表.............. 一条sql语句.............

    CREATE TABLE a( NAME INT, age int ); CREATE TABLE b( height INT, weight int ); ,); ,); SELECT * FROM ...

  10. apache Storm学习之三-消息可靠性

    4.1 简介 storm可以确保spout发送出来的每个消息都会被完整的处理.本章将会描述storm体系是如何达到这个目标的,并将会详述开发者应该如何使用storm的这些机制来实现数据的可靠处理. 4 ...