快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

兼容所有浏览器的forEach()方法

2017-6-22 11:58| 发布者: antzone| 查看: 780| 评论: 0|来自: 蚂蚁部落

ES5新增了forEach()方法,具体可以参阅javascript Array forEach()一章节。

但是内置的此方法具有一定的浏览器兼容性,下面就介绍一下如何实现兼容性。

代码如下:

[JavaScript] 纯文本查看 复制代码运行代码
if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function (fn, context) {
    for (var k = 0, length = this.length; k < length; k++) {
      if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) {
        fn.call(context, this[k], k, this);
      }
    }
  };
}
var func = function (value, index) {
  console.log(index + ":" + value);
}
var arr = ["蚂蚁部落", "softwhy.com", "antzone", "青岛市南区"];
arr.forEach(func);

上面的代码实现兼容所有主流浏览器的功能,下面介绍一下它的实现过程。

一.代码注释:

(1).if (typeof Array.prototype.forEach != "function") {},判断当前浏览器是否支持forEach()方法。

(2).Array.prototype.forEach = function (fn, context) {},如果不支持,那么就通过原型,为数组添加一个forEach方法,第一个参数函数,第二个是fn函数的执行上下文对象。

(3).for (var k = 0, length = this.length; k < length; k++) {},遍历数组中的每一个元素。

(4).if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) ,判断fn是否是一个函数,并且k是否是数组的索引。下面再做进一步的说明:之所以使用Object.prototype.hasOwnProperty而不是Array.prototype.hasOwnProperty是因为后者被重写的概率要远高于前者,如果重写了前者,那感觉此人脑子是锈透了。之所以判断k是否是数组的索引是因为有些特殊情况,看如下代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
var arr = [1,,,,,,,2];
console.log(arr.length);

控制台截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/10/120040xtja54jtjx96fff4.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

尽管length值是8,但是期间的3-7的索引并没有。

(5).fn.call(context, this[k], k, this),调用相应的函数并传参。

二.相关阅读:

(1).prototype可以参阅javascript prototype原型一章节。

(2).hasOwnProperty()可以参阅javascript hasOwnProperty()一章节。

(3).call()可以参阅js call()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-9-26 17:05 , Processed in 0.070151 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部