手寫數組操做常見方法的polyfill

前言:在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<this.length;i++){
    if(!callback.call(this,this[i],i,this)){
     return false;
    }
    
  }
 return true;
}
var list = [1,3,5,7,9];
list.everyFn((item)=>{
 return item>3
}); //返回false

some方法的polyfill

Array.prototype.someFn = function(callback){
 for(var i = 0;i<this.length;i++){
   if(callback.call(this,this[i],i,this)){
     return true;
    }
 }
 return false;
}

var list = [1,2,4,8,10];
list.someFn(item =>item>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<this.length; i++){
    preValue = callback(preValue,this[i],i,this);
  }
  return preValue;
 }

求和:

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<this.length; i++){
    preValue = callback(preValue,this[lastIndex-i],i,this);
  }
  return preValue;
 }

求和:

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!!!/::)