博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
手写数组操作常见方法的polyfill
阅读量:6445 次
发布时间:2019-06-23

本文共 2381 字,大约阅读时间需要 7 分钟。

前言:在JS操作当中,前端开发人员对数组的操作特别频繁,随着每一次ECMAScript的发版,对于数组所提供的API也会增多,以增强数组的操作能力。下面整理了一些在工作当中常用的数据操作方法的polyfill,方便大家更好的掌握其原理。

数组map和forEach方法

forEach方法的polyfill

Array.prototype.forEachFn = function(callback){  for(var i = 0;i< this.length;i++){    callback.call(this,this[i],i,this);  }};var list = [1,2,4,8,10];list.forEachFn(function(item,index,arr){  return list[index] = item*2;});  //无返回值[2, 4, 8, 16, 20] //list

map方法的polyfill

Array.prototype.mapFn = function(callback){var newArr = []; for(var i = 0;i< this.length;i++){  newArr.push(callback.call(this,this[i],i,this)); } return newArr;} var list = [1,3,5,7,9]; list.mapFn(function(item){   return item*2; });     //执行完后返回一个新数组 [2, 6, 10, 14, 18]

再看看两者的执行速度:

图片描述

可以看出forEach()的执行速度比map()慢了70%

相同点:

能用forEach()做到的,map()同样可以。反过来也是如此。

差异:

  1. forEach没有返回值,但可在callback里改变原数组,map返回一个新数组,不改变原数组,可链式调用数组的其他方法。
  2. map执行速度比forEach更快。

数组every和some方法

every方法的polyfill

Array.prototype.everyFn = function(callback){  for(var i = 0;i
{ return item>3}); //返回false

some方法的polyfill

Array.prototype.someFn = function(callback){ for(var i = 0;i
item>4) //返回truevar list = [1,2,4,8,10];list.someFn(item =>item>12) //返回false

方法区别

every() 每一项都返回true才返回true
some() 只要有一项返回true就返回true

数组reduce和reduceRight方法

reduce方法的polyfill

Array.prototype.reduceFn = function(callback,initValue){  var preValue = initValue || this[0];  for(var i = initValue ? 0 : 1; i

求和:

var list = [1,3,5,7,9];list.reduceFn(function(prev,current,currentIndex,arr){  return prev+current;});  //返回25

求和+10:

var list = [1,3,5,7,9];list.reduceFn(function(prev,current,currentIndex,arr){  return prev+current;},10); //返回35

reduceRight方法的polyfill

Array.prototype.reduceRightFn = function(callback,initValue){  var lastIndex = this.length - 1;  var preValue = initValue || this[lastIndex];  console.log(preValue);  for(var i = initValue ? 0 : 1; i

求和:

var list = [1,3,5,7,9];list.reduceRightFn(function(prev,current,currentIndex,arr){  return prev+current;});  //返回25

求和+10:

var list = [1,3,5,7,9];list.reduceRightFn(function(prev,current,currentIndex,arr){  return prev+current;},10); //返回35

数组reduce方法其作用是对数组进行归并操作,传递两个数组,第一个是callback,第二个参数可选(初始值)。其中回调函数 callback 接收4个参数:

1.previousValue - 存放的是上一次callback返回的结果,其初始值默认为数组的第一个元素。

2.currentValue - 是当前元素 。默认从数组的第二个元素开始。
3.currentIndex - 是当前元素位置 。
4.array - 是当前数组。

今天就整理这么多了,如果有时间,我会继续丰富本页面,以提供更全的资料供大家参考,如果喜欢我的文章,请Star!!!/::)

转载地址:http://rkvwo.baihongyu.com/

你可能感兴趣的文章
for...in的改进版for...of
查看>>
时间正则表达式小叙
查看>>
Linux获取当前用户信息函数
查看>>
访问网络共享时出现“拒绝访问”
查看>>
Bash shell
查看>>
2015移动安全挑战赛 第一题
查看>>
aspx页面@Page指令解析
查看>>
关于web项目中中文乱码问题的总结
查看>>
ios 之CGRectMake
查看>>
选择排序的算法和优化
查看>>
return 与 yield return 的区别
查看>>
Xcode免证书打包ipa
查看>>
ES6中对数组的扩展
查看>>
Java锁--LockSupport
查看>>
C语言中交换两个数值的方法
查看>>
const define static extern 关键词详解
查看>>
BZOJ4036 按位或
查看>>
mybatis+oracle添加一条数据并返回所添加数据的主键问题
查看>>
OS | 哲学家问题
查看>>
20151214 jquery插件代码备份
查看>>