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 相关文章推荐
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
vue中轮训器的使用
Jan 27 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php的debug相关函数用法示例
2016/07/11 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
python版大富翁源代码分享
2018/11/19 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
中学教师自我鉴定
2014/02/07 职场文书
无偿献血倡议书
2014/04/14 职场文书
优秀会计求职信
2014/07/04 职场文书
身份证丢失证明
2015/06/19 职场文书
医院消毒隔离制度
2015/08/05 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL
redis数据一致性的实现示例
2022/03/18 Redis
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技