手寫數(shù)組操作常見(jiàn)方法的polyfill

SimonMa 發(fā)布于2019-08-23 11:48 / 2089人閱讀

摘要：前言在操作當(dāng)中，前端開(kāi)發(fā)人員對(duì)數(shù)組的操作特別頻繁，隨著每一次的發(fā)版，對(duì)于數(shù)組所提供的也會(huì)增多，以增強(qiáng)數(shù)組的操作能力。下面整理了一些在工作當(dāng)中常用的數(shù)據(jù)操作方法的方便大家更好的掌握其原理。默認(rèn)從數(shù)組的第二個(gè)元素開(kāi)始。

前言:在JS操作當(dāng)中，前端開(kāi)發(fā)人員對(duì)數(shù)組的操作特別頻繁，隨著每一次ECMAScript的發(fā)版，對(duì)于數(shù)組所提供的API也會(huì)增多，以增強(qiáng)數(shù)組的操作能力。下面整理了一些在工作當(dāng)中常用的數(shù)據(jù)操作方法的polyfill,方便大家更好的掌握其原理。

數(shù)組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;
});  //無(wú)返回值

[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;
 });     //執(zhí)行完后返回一個(gè)新數(shù)組 [2, 6, 10, 14, 18]

再看看兩者的執(zhí)行速度：

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

相同點(diǎn):
能用forEach()做到的，map()同樣可以。反過(guò)來(lái)也是如此。

差異:

forEach沒(méi)有返回值，但可在callback里改變?cè)瓟?shù)組，map返回一個(gè)新數(shù)組，不改變?cè)瓟?shù)組，可鏈?zhǔn)秸{(diào)用數(shù)組的其他方法。

map執(zhí)行速度比f(wàn)orEach更快。

數(shù)組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

方法區(qū)別
every() 每一項(xiàng)都返回true才返回true
some() 只要有一項(xiàng)返回true就返回true

數(shù)組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

數(shù)組reduce方法其作用是對(duì)數(shù)組進(jìn)行歸并操作，傳遞兩個(gè)數(shù)組，第一個(gè)是callback,第二個(gè)參數(shù)可選（初始值）。其中回調(diào)函數(shù) callback 接收4個(gè)參數(shù)：
1.previousValue - 存放的是上一次callback返回的結(jié)果，其初始值默認(rèn)為數(shù)組的第一個(gè)元素。
 2.currentValue - 是當(dāng)前元素 。默認(rèn)從數(shù)組的第二個(gè)元素開(kāi)始。
 3.currentIndex - 是當(dāng)前元素位置 。         
 4.array - 是當(dāng)前數(shù)組。
今天就整理這么多了，如果有時(shí)間，我會(huì)繼續(xù)豐富本頁(yè)面，以提供更全的資料供大家參考，如果喜歡我的文章，請(qǐng)Star!!!/::)