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 相关文章推荐
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
vue 组件简介
Jul 31 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
php时间计算相关问题小结
2016/05/09 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
python实现定时提取实时日志程序
2018/06/22 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Python 实现进度条的六种方式
2021/01/06 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
三个儿子教学反思
2014/02/03 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
奥运会口号
2014/06/13 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
房屋转让协议书
2014/10/18 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
《灰雀》教学反思
2016/02/19 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python