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 DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
node.js中express-session配置项详解
May 31 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
js验证密码强度解析
Mar 18 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php随机显示图片的简单示例
2014/02/15 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python httplib模块使用实例
2015/04/11 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Python list运算操作代码实例解析
2020/01/20 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
餐厅经理岗位职责范本
2014/02/17 职场文书
党的生日活动方案
2014/08/15 职场文书
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技