JS模拟实现ECMAScript5新增的数组方法


Posted in Javascript onMarch 20, 2017

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新增的数组方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
JavaScript WeakMap使用详解
Feb 05 Javascript
JavaScript 过滤关键字
Mar 20 #Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 #Javascript
js实现鼠标拖动功能
Mar 20 #Javascript
基于vue2的table分页组件实现方法
Mar 20 #Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 #Javascript
基于vue.js实现侧边菜单栏
Mar 20 #Javascript
微信小程序 参数传递实例代码
Mar 20 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
浅谈js中的闭包
2015/03/16 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python实现简单购物商城
2016/05/21 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python如何快速生成时间戳
2020/07/21 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
日语求职信范文
2013/12/17 职场文书
微观物理专业自荐信
2014/01/26 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
机关作风建设心得体会
2014/10/22 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
MySQL数据库 安全管理
2022/05/06 MySQL