ECMAScript5 新增了十个数组方法，这些方法只有在ie9及以上浏览器中可以被使用，下面是对于这些方法的模拟实现。

一、Array.isArray(element)

　　该方法用于判断传入的对象是否为数组类型，返回true和false。

Array.newIsArray = function(element){
  return Object.prototype.toString.call(element).slice(8,-1).toLocaleLowerCase() === 'array';
}

二、.indexOf(element)

　　该方法用于查找传入对象在数组中的位置，并返回该位置，若没有找到则返回-1，该方法不能用于寻找undefined。

　　indexOf方法可以和~符配合使用。按位运算符~会将传入数字取反并减一，所以-1就会变成0，这时候把它放在判断条件中会被隐式转换为false。

Array.prototype.newIndexOf = function(element){
  var index = -1;
  for(var i = 0; i < this.length; i++){
    if(this[i] === element && this[i] !== undefined){
      index = i;
      break;
    }
  }
  return index;
};
var a = [1,2,3,4,,,5];
console.log(a.newIndexOf(undefined));

三、lastIndexOf(element)

　　该方法与indexOf(element)作用和返回值相同，唯一不同的地方是它是从右向左寻找。

Array.prototype.newLastIndexOf = function(element){
  var index = -1;
  for(var i = this.length - 1; i >= 0; i--){
    if(this[i] === element && this[i] !== undefined){
      index = i;
      break;
    }
  }
  return index;
};
var a = [1,2,3,4,5,2,,,3];
console.log(a.newLastIndexOf(undefined));

四、forEach(function(element, index, array){})

　　遍历数组，参数为一个回调函数，有三个传参：当前元素、当前元素索引、整个数组，该方法会跳过保留缺失成员，不会破坏原数组。

Array.prototype.newForEach = function(fn){
  for(var i = 0; i < this.length; i++){
    if(i in this){
      fn(this[i], i, this);
    }
  }
};
var a = [1,2,3,undefined,undefined,4,5,2,3];
a.forEach(function(e, i, arr){
  console.log(e, i, arr);
})

五、every(function(element, index, array){})

　　使用传入的回调函数遍历数组，当所有回调都返回true时，every方法返回true，否则返回false。该方法会跳过保留缺失成员，不会破坏原数组。

Array.prototype.newEvery = function(fn){
  var status = true;
  for(var i = 0; i < this.length; i++){
    if(i in this){
      if(!(status = !!fn(this[i], i, this))){
        break;
      }
    }
  }
  return status;
};
var a = [1,2,3,4,5,2,undefined,,3];
console.log(a.newEvery(function(){
  console.log(arguments);
  return 1;
}));

　六、some(function(element, index, array){})

　　使用传入的回调函数遍历数组，当有回调返回true时，some方法返回true，否则返回false。该方法会跳过保留缺失成员，不会破坏原数组。

Array.prototype.newSome = function(fn){
  var status = false;
  for(var i = 0; i < this.length; i++){
    if(i in this){
      if(status = !!fn(this[i], i, this)){
        break;
      }
    }
  }
  return status;
};
var a = [1,2,3,4,5,2,undefined,,3];
console.log(a.newSome(function(){
  console.log(arguments);
  return 0;
}));

　七、map(function(element, index, array){})

　　使用传入的回调函数遍历数组，使用遍历数组返回的内容组成一个新的数组，该方法会跳过空元素，但是最终结果保留缺失成员的位置，不会破坏原数组。

Array.prototype.newMap = function(fn){
  var array = new Array(this.length);
  for(var i = 0; i < this.length; i++){
    if(i in this){
      array[i] = fn(this[i], i, this);
    }
  }
  return array;
};
var a = [1,2,3,4,5,2,undefined,,3];
console.log(a.newMap(function(element, index, array){
  console.log(arguments);
  return element;
}))

八、filter(function(element, index, array){})

　　使用传入的回调函数遍历数组，最终返回一个新数组，该数组中包含所有回调函数返回true的元素，不会破坏原数组。

Array.prototype.newFilter = function(fn){
  var array = [];
  for(var i = 0; i < this.length; i++){
    if((i in this) && fn(this[i], i, this)){
      array.push(this[i]);
    }
  }
  return array;
};
var a = [1,2,3,4,5,2,undefined,,3];
console.log(a.newFilter(function(element, index, array){
  console.log(arguments);
  return element;
}))

九、reduce(function(accumulator, currentValue, currentIndex, array){})

　　使用传入的回调函数遍历数组，返回最后一个回调函数调用的返回值，跳过缺失成员，不会破坏原数组。　

Array.prototype.newReduce = function(fn){
  if(this.length === 0){
    throw new TypeError('Reduce of empty array with no initial value');
  }
  var result;
  for(var i = 0; i < this.length; i++){
    if(i in this){
      if(!result){
        result = this[i];
      }else{
        result = fn(result, this[i], i, this);
      }
    }
  }
  return result;
};
var a = [,,1,2,3,4,,6,7];
console.log(a.newReduce(function(a,b){
  console.log(arguments);
  return a + b;
}))

十、reduceRight(function(accumulator, currentValue, currentIndex, array){})

　　该方法作用于reduce相同，唯一区别是它是从右往左开始遍历。

Array.prototype.newReduceRight = function(fn){
  if(this.length === 0){
    throw new TypeError('Reduce of empty array with no initial value');
  }
  var result;
  for(var i = this.length - 1; i >= 0; i--){
    if(i in this){
      if(!result){
        result = this[i];
      }else{
        result = fn(result, this[i], i, this);
      }
    }
  }
  return result;
};
var a = [,,1,2,3,4,,6,7];
console.log(a.newReduceRight(function(a,b){
  console.log(arguments);
  return a + b;
}))

以上所述是小编给大家介绍的JS模拟实现ECMAScript5新增的数组方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# ecmascript  # 数组  # JavaScript常用数组操作方法  # 包含ES6方法  # JavaScript学习笔记之ES6数组方法  # JavaScript数组去重的几种方法详谈  # JS数组中常用方法技巧学会进阶成为大佬  # JS数组方法some、every和find的使用详情  # 详解JavaScript es6的新增数组方法  # 遍历  # 回调  # 跳过  # 法会  # 是从  # 小编  # 返回值  # 组中  # 就会  # 放在  # 在此  # 把它  # 给大家  # 会将  # 没有找到  # 转换为  # 所述  # 一区  # 给我留言  # 中会 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 简历没回改：利用AI润色让你的文字更专业  如何获取上海专业网站定制建站电话？  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程  JavaScript如何实现继承_有哪些常用方法  java获取注册ip实例  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  如何在阿里云ECS服务器部署织梦CMS网站？  Laravel中的withCount方法怎么高效统计关联模型数量  linux top下的 minerd 木马清除方法  Android GridView 滑动条设置一直显示状态(推荐)  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  Laravel如何实现API资源集合？（Resource Collection教程）  Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码？  Laravel如何保护应用免受CSRF攻击？（原理和示例）  EditPlus中的正则表达式 实战(2)  微信小程序 scroll-view组件实现列表页实例代码  大学网站设计制作软件有哪些,如何将网站制作成自己app？  Laravel如何使用查询构建器？（Query Builder高级用法）  简单实现jsp分页  JavaScript如何实现音频处理_Web Audio API如何工作？  如何在万网ECS上快速搭建专属网站？  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  如何在阿里云购买域名并搭建网站？  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  制作电商网页,电商供应链怎么做？  制作企业网站建设方案,怎样建设一个公司网站？  如何用JavaScript实现文本编辑器_光标和选区怎么处理  如何快速选择适合个人网站的云服务器配置？  原生JS实现图片轮播切换效果  如何在建站宝盒中设置产品搜索功能？  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  如何快速搭建高效服务器建站系统？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  如何彻底卸载建站之星软件？  Mybatis 中的insertOrUpdate操作  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  如何正确选择百度移动适配建站域名？  移动端脚本框架Hammer.js  php结合redis实现高并发下的抢购、秒杀功能的实例  详解Oracle修改字段类型方法总结  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  Laravel如何使用Eloquent进行子查询  如何快速搭建个人网站并优化SEO？  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程