JavaScript数组方法的兼容性写法 汇总：indexOf()、forEach()、map()、filter()、some()、every()

ECMA Script5中数组方法如indexOf()、forEach()、map()、filter()、some()并不支持IE6～8，但是国内依然有一大部分用户使用IE6～8，而以上数组方法又确实非常好用。在过去，我会为了兼容性尽量不用这些方法。但是，总不能为了旧的丢了新的吧？！虽然说jQuery已经集成好了不少语法糖，但jQuery体积太庞大，作为一名志于体面的前端儿得知道原生的兼容性写法要怎么写。于是这几天，我开始在琢磨这些方法的兼容性写法。其实并不难，就是以前不够自信不敢写。写完以后，对数组认识更深一些了。总结见下文。

备注：以下兼容性写法均可兼容至IE6；

indexOf()

indexOf()方法 返回根据给定元素找到的第一个索引值，否则返回-1。

语法：

array.indexOf(searchElement[, fromIndex = 0])

参数：

searchElement // 位于数组中的元素；

fromIndex // 开始查找指定元素的索引值，默认值为 0 (即在整个数组中查找指定元素)；

fromIndex大于或等于数组长度，则停止查找并返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。

兼容性：不兼容IE6～8。

根据indexOf()的语法写出兼容IE6～8的写法如下：

兼容性写法：

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(ele) {
        // 获取数组长度
        var len = this.length;
        // 检查值为数字的第二个参数是否存在，默认值为0
        var fromIndex = Number(arguments[1]) || 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;
        }
    }
}

调用示例：

var arr = ["a", "b", "c"];
alert(arr.indexOf("b")); // 1

forEach()

forEach() 方法让数组的每一项都执行一次给定的函数。forEach()方法会修改原数组。

语法：

array.forEach(callback[, thisArg])

参数：

1 . callback ：在数组每一项上执行的函数，接收三个参数：
currentValue（当前项的值）、index（当前项的索引）和array（数组本身）。

2 . thisArg ：可选参数。用来当作callback 函数内this的值的对象，即callback 函数的执行上下文；

forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数，那些已删除（使用delete方法等情况）或者从未赋值的项将被跳过（但不包括哪些值为 undefined 的项）。

兼容性：不兼容IE6～8。

根据forEach()的语法写出兼容IE6～8的写法如下：

兼容性写法：

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);
        }
    }
  }
}

调用示例：

var arr = ["a", "b", "c", "a", "d", "a"];
arr.forEach(function(ele, index, array){
    if(ele == "a") {
        array[index] = "**";
    }
});
alert(newArr); // ["**", "b", "c", "**", "d", "**"]

map()

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

语法：

array.map(callback[, thisArg])

参数：

1 . callback ： 在数组每一项上执行的函数，接收三个参数：
currentValue（当前项的值）、index（当前项的索引）和array（数组本身）；

2 . thisArg ：可选参数。用来当作callback 函数内this的值的对象，即callback 函数的执行上下文；

兼容性：不兼容IE6～8。

根据map()的语法写出兼容IE6～8的写法如下：

兼容性写法：

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);
      // thisArg为callback 函数的执行上下文环境
      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;
  }
}

调用示例：

var arr = ["a", "b", "c"];
var newArr = arr.map(function(ele, index, array){
    ele += "12";
    return ele;
});
alert(newArr); // ["a12", "b12", "c12"]

filter()

filter() 方法利用所有通过指定函数测试的元素创建一个新的数组，并返回。

语法：

arr.filter(callback[, thisArg])

参数：

1 . callback ： 在数组每一项上执行的函数，接收三个参数：
currentValue（当前项的值）、index（当前项的索引）和array（数组本身）；

2 . thisArg ：可选参数。用来当作callback 函数内this的值的对象，即callback 函数的执行上下文；

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 "true" 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素只会被跳过，不会被包含在新数组中。filter 不会改变原数组。

兼容性：不兼容IE6～8。

根据filter()的语法写出兼容IE6～8的写法如下：

兼容性写法：

if (!Array.prototype.filter) {
    Array.prototype.filter = function(callback) {
      // 获取数组长度
      var len = this.length;
      if(typeof callback != "function") {
          throw new TypeError();
      }
      // 创建新数组，用于承载经回调函数修改后的数组元素
      var newArr = new Array();
      // thisArg为callback 函数的执行上下文环境
      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;
  }
}

调用示例：

var arr = [1, 2, 3, 4, 3, 2, 5];
var newArr = arr.filter(function(ele, index, array){
    if(ele < 3) {
        return true;
    }else {
        return false;
    }
});
alert(newArr); // [1, 2, 2]

some()

some() 方法测试数组中的某些元素是否通过了指定函数的测试。返回布尔值。some() 被调用时不会改变数组。

语法：

arr.some(callback[, thisArg])

参数：

1 . callback ： 在数组每一项上执行的函数，接收三个参数：
currentValue（当前项的值）、index（当前项的索引）和array（数组本身）；

2 . thisArg ：可选参数。用来当作callback 函数内this的值的对象，即callback 函数的执行上下文；

some() 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个true 的值。如果找到了这样一个值，some() 将返回 true。否则返回 false。

兼容性：不兼容IE6～8。

根据some()的语法写出兼容IE6～8的写法如下：

兼容性写法：

if (!Array.prototype.some) {
  Array.prototype.some = function(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.call(thisArg, this[i], i, this)) {
              return true;
          }
      }
      return false;
  }
}

调用示例：

var arr = [1, 2, 3, 4, 3, 2, 5];
var newArr = arr.some(function(ele, index, array){
    if(ele < 2) {
        return true;
    }else {
        return false;
    }
});
alert(newArr); // true

every()

every() 方法测试数组的所有元素是否都通过了指定函数的测试。every() 不会改变原数组。

语法：

arr.every(callback[, thisArg])

参数：

1 . callback ： 在数组每一项上执行的函数，接收三个参数：
currentValue（当前项的值）、index（当前项的索引）和array（数组本身）；

2 . thisArg ：可选参数。用来当作callback 函数内this的值的对象，即callback 函数的执行上下文；

every() 方法为数组中的每个元素执行一次 callback 函数。只有所有元素都在callback函数中返回true才返回true，否则返回false。

兼容性：不兼容IE6～8。

根据some()的语法写出兼容IE6～8的写法如下：

兼容性写法：

if (!Array.prototype.every) {
  Array.prototype.every = function(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.call(thisArg, this[i], i, this)) {
              return false;
          }
      }
      return true;
  }
}

调用示例：

var arr = [1, 2, 3, 4, 3, 2, 5];
var newArr = arr.every(function(ele, index, array){
    if(ele < 3) {
        return true;
    }else {
        return false;
    }
});
alert(newArr); // false

本文作者：子匠_Zijor，转载请注明出处：http://www.dengzhr.com/js/362
时间： 2025-01-19 01:50:27

JavaScript数组方法的兼容性写法 汇总：indexOf()、forEach()、map()、filter()、some()、every()的相关文章

JavaScript数组方法详解

JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中原型上的方法,本文举例介绍了从ES3到ES7几乎所有的数组方法.这大概是最全的数组方法详解了.希望读者能从中有所收获. 一.各版本数组方法一览表 数组方法名 对应版本 功能 原数组是否改变 pop() ES3- 删除最后一位,并返回删除的数据 是 push() ES3- 在最后一位新增一或多个数据,

JavaScript数组方法对比（深度学习数组）

JavaScript数组方法对比 众所周知,JavaScript提供了许多对数组进行改变的方法,但是有些会对原数组进行影响,有些不会.下边就列举出来. 一.新增 影响原数组 array.push()  //向数组的末尾添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]; array.push(6); // [1,2,3,4,5,6]; array.unshift() //向数组的开头添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]

4个错误使用JavaScript数组方法的案例

译者按: 做一个有追求的工程师,代码不是随便写的! 原文: Here's how you can make better use of JavaScript arrays 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java线上bug实时监控.真的是一个很好用的bug监控服务,众多大佬公司都在使用. 我保证这是一篇可以快速阅读并吸收的文章

JavaScript数组方法大全（第二篇）

数组方法大全(第二篇) 注意:如有错误欢迎指出,如有雷同纯属巧合,本博客参考书籍JavaScript权威指南,有兴趣的小伙伴可以去翻阅一下哦 forEach()方法 遍历数组,里面可以传递一个方法 var arr = [1,2,3]; arr.forEach(function (item,index,array) { //item:表示数组中元素的每一项 //index:表示每一项所对应的索引 //array:表示原数组 }) map()方法 将调用数组的每个元素传递给指定的函数,并返回一个新的

JavaScript数组方法总结

由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaScript教程的整理,具体内容如下: 一.普通方法 1.join() 将数组元素连接在一起,并以字符串形式返回参数:可选,指定元素之间的分隔符,没有参数则默认为逗号返回值:字符串对原数组的影响:无2.reverse()将数组的元素顺序变成倒序返回参数:无返回值:数组对原数组的影响:原数组被修改为倒序排列之后的数组3.sort()对数组元素进行排序并返回参数:可选,排序的方法函数,没有

JavaScript - 数组方法应用

数组方法应用 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

javascript数组方法

javascript有许多数组方法,今天整理了一下: var a=[1,2,3]; a.join();//将数组中所有元素都转化为字符串并连接在一起,参数作为分隔符. a.reverse();//将数组中的元素点到顺序,返回逆序数组. a.sort();//将数组中的元素排序并返回排序后的数组. a.concat();//创建并返回一个新数组,其中返回数组包括a中元素和参数. a.slice();//方法返回制定数组的一个片段或子数组,通过下标作为参数截取. a.splice();//在数组中插

JavaScript数组方法--reduce、reduceRIght、reverse

今天写的reduce是比较复杂的一个数组方法,其实在这之前我也用过reduce,可是每次用起来总感觉不那么顺手,主要还是因为不熟,对reduce本身不熟.首先reduce这个单词翻译为中文,不那么直观,再加上他的示例比较简单,导致用在复杂情况下,就有点懵逼的感觉.通过自己的理解,我们重构一次,可能更能够方便理解! reduce:reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值.看到MDN给的这句解释,可能就懵了!什么叫reduce

Javascript -- 数组方法学习

1.Array.from() 参考文献 这个方法比较有意思,可以将一个类似数组或可迭代对象分割,然后将值返回为一个新数组 伪数组对象(拥有一个 length 属性和若干索引属性的任意对象) 可迭代对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/iterable)(可以获取对象中的元素,如 Map和 Set 等) 这个方法有三个参数,第一个就是要转换成数组的伪数组或者可迭代对象,第二个参数就是相当于一个map方法,