前言

在開發過程中，我們常常使用陣列的一些 api 相關操作，其中包含 forEach 、 filter 、 find 、 findIndex 、 map 、 some 、 every 、 reduce 、 reduceRight 等函式方法。

今天，我們試試手寫這些函式，實現陣列這些函式方法。為了方便，直接在陣列原型物件 prototype 上擴充套件。

本文 Githab 已上傳，更多往期文章已分類整理。

正文

引數說明

callbackFn 回撥函式

thisArg 執行 callbackFn 時使用的 this 值

currentValue 陣列中正在處理的元素

index 當前索引

array 源陣列

accumulator 累加器

initialValue reduce reduceRight 第一次呼叫 callbackFn 函式時的第一個引數的值預設值

element 自己實現的 this 物件

forEach 函式

語法： arr.forEach(callbackFn(currentValue [,index [,array]])[,thisArg])

方法功能： 對陣列的每個元素執行一次給定的函式。

返回：undefined。

自定義函式：myForEach。

Array.prototype.myForEach = function(callbackFn,thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn引數必須是函式');
 let element = this,len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 callbackFn.call(thisArg,element[index],index,element);
 }
};

filter 函式

語法： var newArray = arr.filter(callbackFn(currentValue[,index[,thisArg])

方法功能： 建立一個新陣列,其包含通過所提供函式實現的測試的所有元素。

返回：一個新的、由通過測試的元素組成的陣列，如果沒有任何陣列元素通過測試，則返回空陣列。

自定義函式：myFilter。

Array.prototype.myFilter = function(callbackFn,len = element && element.length || 0,result = [];
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg,element)) result.push(element[index]);
 }
 return result;
};

find 函式

語法： arr.find(callbackFn[,thisArg])

方法功能： 返回陣列中滿足提供的測試函式的第一個元素的值。否則返回 undefined。

返回：陣列中第一個滿足所提供測試函式的元素的值，否則返回 undefined。

自定義函式：myFind。

Array.prototype.myFind = function(callbackFn,len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg,element)) {
  return element[index];
 }
 }
 return
}

findIndex 函式

語法： arr.findIndex(callbackFn[,thisArg])

方法功能： 返回陣列中滿足提供的測試函式的第一個元素的值。否則返回 undefined。

返回：陣列中通過提供測試函式的第一個元素的索引。否則，返回-1。

自定義函式：myFindIndex。

Array.prototype.myFindIndex = function(callbackFn,element)) return index;
 }
 return -1;
}

fill函式

語法： arr.fill(value[,start[,end]])

方法功能： 用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。

返回：返回替換的值，原陣列發生改變。

自定義函式：myFill。

Array.prototype.myFill = function(value,start = 0,end) {
 let element = this,len = element && element.length || 0;
 end = end || len;
 let loopStart = start < 0 ? 0 : start,// 設定迴圈開始值
 loopEnd = end >= len ? len : end; // 設定迴圈結束值

 for (; loopStart < loopEnd; loopStart++) {
 element[loopStart] = value;
 }
 return element;
}

map 函式

語法： var new_array = arr.map(function callbackFn(currentValue[,array]]) {// Return element for new_array }[,thisArg])

方法功能： 建立一個新陣列，其結果是該陣列中的每個元素是呼叫一次提供的函式後的返回值。

返回：測試陣列中是不是至少有1個元素通過了被提供的函式測試。它返回的是一個Boolean型別的值。 一個由原陣列每個元素執行回撥函式的結果組成的新陣列。

自定義函式：myMap。

Array.prototype.myMap = function(callbackFn,result = [];
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 result[index] = callbackFn.call(thisArg,element);
 }
 return result;
}

some 函式

語法： arr.some(callbackFn(currentValue[,thisArg])

方法功能： 測試陣列中是不是至少有1個元素通過了被提供的函式測試。它返回的是一個Boolean型別的值。

返回：陣列中有至少一個元素通過回撥函式的測試就會返回true；所有元素都沒有通過回撥函式的測試返回值才會為false。

自定義函式：mySome。

Array.prototype.mySome = function(callbackFn,element)) return true;
 }
 return false;
}

every 函式

語法： arr.every(callbackFn(currentValue[,thisArg])

方法功能 ：測試一個數組內的所有元素是否都能通過某個指定函式的測試。它返回一個布林值。

返回：如果回撥函式的每一次返回都為 true 值，返回 true，否則返回 false。

自定義函式：myEvery。

Array.prototype.myEvery = function(callbackFn,len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for(let index = 0; index < len; index++) {
  if (!callbackFn.call(thisArg,element)) return false;
 }
 return true;
}

reduce 函式

語法： arr.reduce(callback(accumulator,currentValue[,initialValue])

方法功能： 對陣列中的每個元素執行一個由您提供的reducer函式(升序執行)，將其結果彙總為單個返回值。

返回：函式累計處理的結果。

自定義函式：myReduce。

Array.prototype.myReduce = function(callbackFn,initialValue) {
 if (typeof callbackFn !== 'function') throw ('callbackFn引數必須是函式');
 let element = this,len = element.length || 0,index = 0,result;
 if (arguments.length >= 2) {
  result = arguments[1];
 } else {
  while (index < len && !(index in element)) index++;
  if (index >= len) throw new TypeError('Reduce of empty array ' + 'with no initial value');
  result = element[index++];
 }

 while (index < len) {
  if (index in element) result = callbackFn(result,element);
  index++;
 }
 return result;
}

reduceRight 函式

語法： arr.reduceRight(callback(accumulator,initialValue])

方法功能： 接受一個函式作為累加器（accumulator）和陣列的每個值（從右到左）將其減少為單個值。

返回：執行之後的返回值。

自定義函式：myReduceRight。

Array.prototype.myReduceRight = function(callbackFn,index = len - 1,result;
 if (arguments.length >= 2) {
  result = arguments[1];
 } else {
  while (index >= 0 && !(index in element)) {
   index--;
  }
  if (index < 0) {
   throw new TypeError('reduceRight of empty array with no initial value');
  }
  result = element[index--];
 }
 for (; index >= 0; index--) {
  if (index in element) {
   result = callbackFn(result,element);
  }
 }
 return result;
}

最後

到此這篇關於JavaScript手寫陣列常用函式總結的文章就介紹到這了,更多相關JS手寫陣列常用函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！