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 等数取整数部分

// 测试类型值 >>> 的结果

时间: 2024-10-04 22:52:10

Array.prototype.forEach数组遍历的相关文章

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

forEach() 方法对数组的每个元素执行一次提供的函数. 注意: 没有返回一个新数组 并且 没有返回值! 应用场景:为一些相同的元素,绑定事件处理器! const arr = ['a', 'b', 'c']; arr.forEach(function(element) { console.log(element); }); arr.forEach( element => console.log(element)); 语法 callback为数组中每个元素执行的函数,该函数接收三个参数: cu

数组方法 Array.prototype

Object.prototype 数组的值是有序的集合,每一个值叫做元素,每一个元素在数组中都有数字位置编号,也就是索引,js中数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或者其他数组 长度范围:1====2的23方-1 new Array(100)//undifind*100 arr[5]=10; arr.length//6 push() unshift() shift() pop() var Arr=[1,true,undifind,{x:1},[1,2,3]]; A

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

前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一

JS几种数组遍历方式以及性能分析对比(转 未经测试,先mark)

前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种

浅谈JS的数组遍历方法

用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; _.each(arr, function(el) { console.log(el); }); 上面的代码会依次输出1, 2, 3, 4, 5,是不是很有意思,遍历一个数组连for循环都不用自己写了._.each()方法遍历数组非常好用,但是它的内部实现一点都不难.下面就一起来看看到底是如何实现_

二维数组遍历

问题描述:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 算法分析:可以直接遍历,不过时间复杂度太高,因为有序,可以从左下角查找,也可以从右上角查找. public class Array { //二维数组遍历 public boolean Find(int [][] array,int target) { for(int i = 0; i < array.length; i

JavaScript中的数组遍历forEach()与map()方法以及兼容写法

原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是我

将函数的实际参数转换成数组的方法,习惯用Array.prototype.slice.call(arguments)

实际参数在函数中我们可以使用 arguments 对象获得 (注:形参可通过 arguments.callee 获得),虽然 arguments 对象与数组形似,但仍不是真正意义上的数组. 我们可以通过数组的 slice 方法将 arguments 对象转换成真正的数组. 方法一:通过Array.prototype属性调用slice方法 var args = Array.prototype.slice.call(arguments); Array 本身是没有 slice 方法,它的方法在 Arr

类数组转数组Array.prototype.slice.call(arrayLike)

转换方式:Array.prototype.slice.call(arrayLike) 附:(http://www.jianshu.com/p/f8466e83cef0) 首先Array.prototype.slice.call(arrayLike)的结果是将arrayLike对象转换成一个Array对象.所以其后面可以直接调用数组具有的方法.譬如 Array.prototype.slice.call(arrayLike).forEach(function(element,index){  //可