`
wsj123
  • 浏览: 154232 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JavaScript数组操作——遍历方法的兼容

    博客分类:
  • JS
阅读更多
JavaScript数组操作——遍历方法的兼容

1.1概述
        ECMA Script5中数组方法如indexOf()、forEach()、map()、filter()、some()不支持IE6~8。
1.2兼容写法
        以下兼容性写法均可兼容至IE6。
1.2.1indexOf()方法兼容
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(ele) {
var len = this.length; //获取数组长度
var fromIndex = Number(arguments[1]) || 0; //检查值为数字的第二个参数是否存在,默认值为0
//当第二个参数小于0时,为倒序查找,相当于查找索引值为该索引加上数组长度后的值
if(fromIndex < 0) { fromIndex += len; }
//从fromIndex起循环数组
      while(fromIndex < len) {
         //检查fromIndex是否存在且对应的数组元素是否等于ele
         if(fromIndex in this && this[fromIndex] === ele) { return fromIndex; }
         fromIndex++;
}
      //当数组长度为0时返回不存在的信号:-1
      if (len === 0) { return -1;}
   }
}

1.2.2 forEach()方法兼容
if ( !Array.prototype.forEach) {
    Array.prototype.forEach = function forEach(callback) {
        var len = this.length; 
        if(typeof callback != "function") { throw new TypeError(); }
        //thisArg为callback 函数的执行上下文环境
        var thisArg = arguments[1];
        for(var i = 0; i < len; i++) {
            if(i in this) {
                //callback函数接收三个参数:当前项的值、当前项的索引和数组本身
                callback.call(thisArg, this[i], i, this);
            }
        }
    }
}

1.2.3 map()方法兼容
if (!Array.prototype.map) {
    Array.prototype.map = function(callback) {
        var len = this.length;
        if(typeof callback != "function") { throw new TypeError(); }
        //创建跟原数组相同长度的新数组,用于承载经回调函数修改后的数组元素
        var newArr = new Array(len);
        var thisArg = arguments[1];
        for(var i = 0; i < len; i++) {
            if(i in this) { newArr[i] = callback.call(thisArg, this[i], i, this); }
        }
        return newArr;
    }
}

1.2.4 filter()方法兼容
if (!Array.prototype.filter) {
    Array.prototype.filter = function(callback) {
        var len = this.length;
        if(typeof callback != "function") { throw new TypeError(); }
        //创建新数组,用于承载经回调函数修改后的数组元素
        var newArr = new Array();
        var thisArg = arguments[1];
        for(var i = 0; i < len; i++) {
            if(i in this) {
                if(callback.call(thisArg, this[i], i, this)) { newArr.push(val); }
            }
        }
        return newArr;
    }
}

1.2.5 some()方法兼容
if (!Array.prototype.some) {
    Array.prototype.some = function(callback) {
        var len = this.length;
        if(typeof callback != "function") { throw new TypeError(); }
        var thisArg = arguments[1];
        for(var i = 0; i < len; i++) {
            if(i in this && callback.call(thisArg, this[i], i, this)) { return true; }
        }
        return false;
    }
}

1.2.6 every()方法兼容
if (!Array.prototype.every) {
    Array.prototype.every = function(callback) {
        var len = this.length;
        if(typeof callback != "function") { throw new TypeError(); }
        var thisArg = arguments[1];
        for(var i = 0; i < len; i++) {
            if(i in this && !callback.call(thisArg, this[i], i, this)) { return false; }
        }
        return true;
    }
}

分享到:
评论

相关推荐

    javascript经典特效---广告图片的放置.rar

    5. **数组和遍历**:用数组存储广告图片的URL,通过遍历数组,可以轻松管理多张图片的切换。 6. **AJAX预加载**:为了避免用户等待,JavaScript可以通过AJAX异步加载下一张图片,提高用户体验。 7. **jQuery库**:...

    javascript的连连看

    这涉及到数组操作,比如遍历棋盘上的每个元素,以及条件判断语句来检查消除条件。 项目的实现可能还涉及了一些数据结构和算法,比如链表或队列用于存储待消除的棋子对,以及深度优先搜索(DFS)或广度优先搜索(BFS...

    javascript经典特效---会动的表格.rar

    《JavaScript经典特效——会动的表格》 在Web开发领域,JavaScript是一种不可或缺的脚本语言,它赋予网页动态交互的能力,让网页从静态文本转变为生动的用户体验。在本专题中,我们将深入探讨如何利用JavaScript...

    JavaScript王者归来part.1 总数2

     6.1.1.2 JavaScript函数的奥妙——魔法代码   6.1.2 函数的调用   6.2 函数的参数   6.2.1 形参与实参   6.2.2 Arguments对象   6.2.2.1 一个使用Arguments对象检测形参的例子   6.2.2.2 一个使用...

    javascript客户端验证和页面特效制作

    由于不同的浏览器对某些 DOM 操作的支持不同,通常会使用一些通用的方法来提高代码的兼容性,比如使用 `window.onload` 代替 `document.ready`。 ##### 五、制作全选效果 使用 JavaScript 来遍历一组复选框或单选...

    Underscore源码解析[归类].pdf

    《Underscore源码解析——深入理解JavaScript工具库》 Underscore.js 是一个轻量级的JavaScript实用库,它提供了许多实用的功能,包括数组、对象处理、函数编程等,以增强JavaScript开发效率。该库的版本为1.3.3,...

    Javascript技术文档

    2. **对象与数组**:讲解对象的创建和操作,包括属性和方法,以及数组的使用,如遍历、查找和修改元素。 3. **函数与作用域**:深入探讨函数的定义、调用,参数传递,以及函数作为值和作为对象的角色。同时,解释...

    前端开源库-flatmap

    "前端开源库-flatmap"就是这样一个工具,旨在填补前端JavaScript中的一个功能空缺——扁平化处理(Flattening)数组。本文将深入探讨flatmap函数以及其在前端开发中的应用。 在JavaScript中,数组的扁平化通常用于...

    Sugar在原生对象上增加一些工具方法

    标题中的"Sugar在原生对象上增加一些工具方法"指的是JavaScript的一个库——Sugar.js,它扩展了JavaScript原生对象的功能,提供了丰富的实用方法,使得开发者能更高效、更优雅地编写代码。Sugar库的设计目标是增强...

    js经典实例 javascript经典实例 霓虹灯特效 js经典实例 javascript经典实例 霓虹灯特效

    根据提供的标题、描述、标签及部分内容,我们可以总结出本文主要关注的是JavaScript中实现的一个经典实例——霓虹灯特效。为了更好地理解这一知识点,我们将从以下几个方面进行深入探讨: ### 一、JavaScript简介 ...

    网页模板——基于jQuery的左右带箭头的图片浏览控制插件.zip

    1. jQuery库基础:jQuery 是一个流行的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。它是这个图片浏览插件的基石,利用其强大的功能来实现动态效果和用户交互。 2. 图片轮播原理:该插件基于图片轮播的...

    JS——字符串

    JavaScript(简称JS)是一种轻量级的解释型编程语言,主要应用于网页和网络应用开发,尤其在客户端渲染和...实际应用中,开发者还应关注性能优化、Unicode处理、字符串的比较操作以及在不同浏览器环境下的兼容性问题。

    代码分析jQuery四种静态方法使用

    在JavaScript中,虽然原生的Array.isArray()方法可以用来检测数组,但jQuery为了兼容性考虑,自己实现了这个方法。如果要兼容旧版本的IE浏览器,则无法使用Array.isArray()方法,因此jQuery的isArray方法是一种很好...

    jquery-1.2.3.zip

    $.each()用于遍历数组或对象,是实现迭代操作的重要工具。$.get()和$.post()则提供了方便的Ajax请求接口,使得与服务器的异步通信变得简单易行。 事件处理在jQuery中也得到了极大的优化。$(element).click(function...

    前端开源库-json-path

    这个开源库——`json-path`,是专为Node.js和现代浏览器设计的,使得在JavaScript环境中操作JSON数据变得简单易行。 在前端开发中,数据交互通常涉及JSON格式,而`json-path`库提供了强大且灵活的查询功能。通过...

    HTML5新标签兼容—— !–if lt IE 9!endif– 的两种方法

    如果是,它将遍历一个包含所有HTML5新标签的数组,使用`document.createElement`方法为每个新标签创建DOM元素,从而让这些标签在旧版IE中可用。 **总结** 这两种方法都能有效地解决HTML5新标签在IE9以下版本的兼容...

    HTML5新标签兼容——&gt; &lt;!--&lt;if lt IE 9&gt;&lt;!endif--&gt; 的两种方法

    这段代码首先检查是否为IE浏览器,然后遍历HTML5新标签的数组,逐个创建DOM元素,从而使得IE8及以下版本能够识别这些标签。 **总结** 解决HTML5新标签在旧版IE中的兼容问题,可以采用html5shiv库或者利用jQuery...

Global site tag (gtag.js) - Google Analytics