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得到网页中所有的div的id
Oct 19 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
node事件循环和process模块实例分析
Feb 14 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
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
用python进行视频剪辑
2020/11/02 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
培训协议书范本
2014/04/22 职场文书
事业单位考察材料范文
2014/12/25 职场文书
团代会闭幕词
2015/01/28 职场文书
委托书的样本
2015/01/28 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
个人收入证明范本
2015/06/12 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python