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

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

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

前言:在JS操作當中，前端開發(fā)人員對數(shù)組的操作特別頻繁，隨著每一次ECMAScript的發(fā)版，對于數(shù)組所提供的API也會增多，以增強數(shù)組的操作能力。下面整理了一些在工作當中常用的數(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;
});  //無返回值

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

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

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

相同點:
能用forEach()做到的，map()同樣可以。反過來也是如此。

差異:

forEach沒有返回值，但可在callback里改變原數(shù)組，map返回一個新數(shù)組，不改變原數(shù)組，可鏈式調(diào)用數(shù)組的其他方法。

map執(zhí)行速度比forEach更快。

數(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() 每一項都返回true才返回true
some() 只要有一項返回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方法其作用是對數(shù)組進行歸并操作，傳遞兩個數(shù)組，第一個是callback,第二個參數(shù)可選（初始值）。其中回調(diào)函數(shù) callback 接收4個參數(shù)：
1.previousValue - 存放的是上一次callback返回的結果，其初始值默認為數(shù)組的第一個元素。
 2.currentValue - 是當前元素 。默認從數(shù)組的第二個元素開始。
 3.currentIndex - 是當前元素位置 。         
 4.array - 是當前數(shù)組。
今天就整理這么多了，如果有時間，我會繼續(xù)豐富本頁面，以提供更全的資料供大家參考，如果喜歡我的文章，請Star!!!/::)

GPU云服務器云服務器數(shù)組常見操作數(shù)組操作方法 js數(shù)組操作方法常見的數(shù)據(jù)分析方法

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97499.html

給初學者：JavaScript 中數(shù)組操作注意點

摘要：使用遍歷數(shù)組有三點問題遍歷順序不固定引擎不保證對象的遍歷順序。作為原生函數(shù)，和自身操作字符串的速度是很快的。由于沒有返回值返回，所以它的回調(diào)函數(shù)通常是包含副作用的，否則這個寫了毫無意義。接受一個回調(diào)函數(shù)，你可以提前，相當于手寫循環(huán)中的。不要用 for_in 遍歷數(shù)組這是 JavaScript 初學者常見的誤區(qū)。for_in 用于遍歷對象中包括原型鏈上的所有可枚舉的（enumerab...

tianyu 2019-08-22 11:20 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發(fā)是一個非常特殊的行業(yè)，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現(xiàn)在為止，前端工程師已經(jīng)成為研...

羅志環(huán) 2019-08-23 17:08 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發(fā)是一個非常特殊的行業(yè)，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系...

isaced 2019-05-21 19:50 評論0 收藏0
Webpack入門到精通（1）

前言什么是webpack 本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉(zhuǎn)換文件優(yōu)化代碼分割模塊合并 ...

SunZhaopeng 2019-05-23 17:29 評論0 收藏0
VueJS 開發(fā)常見問題集錦

摘要：由于公司的前端開始轉(zhuǎn)向，最近開始使用這個框架進行開發(fā)，遇到一些問題記錄下來，以備后用。查了一下，發(fā)現(xiàn)可能是打包或是資源引用問題，目前該問題還未被妥善處理，需要通過一些來解決這個問題。為解決這個問題，中提供了方法對象受現(xiàn) showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端開始轉(zhuǎn)向 VueJS，最近開始使用這...

hedge_hog 2019-08-20 18:07 評論0 收藏0