前言:在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()同样可以。反过来也是如此。
差异:
- forEach没有返回值，但可在callback里改变原数组，map返回一个新数组，不改变原数组，可链式调用数组的其他方法。
- 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;iitem>4) //返回true
var 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!!!/::)