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. [JavaScript]JS调用PHP和PHP调用JS的方法举例

    http://blog.csdn.net/pleasecallmewhy/article/details/8592571 body { background: #C7EDCC !important; ...

  2. kill 的常用信号

    kill命令用于终止指定的进程(terminate a process),是Unix/Linux下进程管理的常用命令.通常,我们在需要终止某个或某些进程时,先使用ps/pidof/pstree/top ...

  3. 重点:怎样正确的使用QThread类(注:包括推荐使用QThread线程的新方法QObject::moveToThread)

    背景描述: 以前,继承 QThread 重新实现 run() 函数是使用 QThread唯一推荐的使用方法.这是相当直观和易于使用的.但是在工作线程中使用槽机制和Qt事件循环时,一些用户使用错了.Qt ...

  4. struts 标签 牛逼之处

    <s:hidden>标签的value属性的类型是String类型,所以把<s:property value="#session.LOGIN_USER"/>当 ...

  5. am335x 10.1"电容touch 不能识别

    /**************************************************************** * am335x 10.1"电容touch 不能识别 * ...

  6. C# 过滤sql特殊字符方法集合

    1./// <summary>    /// 过滤不安全的字符串    /// </summary>    /// <param name="Str" ...

  7. 在windows下编译x264

    最近因为各种原因,对流媒体的学习,突然中断在了编码这块.今天难得静下心来,从新拿起了代码. 对encode这边,因为之前虽然也接触了,也找了两个例子,但目前还没真正开始,所以先从编译x264这个库开始 ...

  8. 多种方法实现div两列等高(收集整理)

    HTML骨架 <div id="header">头部</div> <div id ="container"> <div ...

  9. js学习之--Bootstrap Modals(模态框)

    http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html http://outofmemory.cn/bootstrap/tutor ...

  10. EF修改对象里面的值。。。(对象字段多的时候)

    后台代码 public ActionResult Edit(my m)//my实体类 { testEntities t = new testEntities();//数据库上下文 t.my.Attac ...