JavaScript手寫數(shù)組的常用函數(shù)總結(jié)
前言
在開發(fā)過程中，我們常常使用數(shù)組的一些 api 相關(guān)操作，其中包含 forEach 、 filter 、 find 、 findIndex 、 map 、 some 、 every 、 reduce 、 reduceRight 等函數(shù)方法。
今天，我們?cè)囋囀謱戇@些函數(shù)，實(shí)現(xiàn)數(shù)組這些函數(shù)方法。為了方便，直接在數(shù)組原型對(duì)象 prototype 上擴(kuò)展。
本文 Githab 已上傳，更多往期文章已分類整理。
正文
參數(shù)說明
callbackFn 回調(diào)函數(shù)
thisArg 執(zhí)行 callbackFn 時(shí)使用的 this 值
currentValue 數(shù)組中正在處理的元素
index 當(dāng)前索引
array 源數(shù)組
accumulator 累加器
initialValue reduce reduceRight 第一次調(diào)用 callbackFn 函數(shù)時(shí)的第一個(gè)參數(shù)的值默認(rèn)值
element 自己實(shí)現(xiàn)的 this 對(duì)象
forEach 函數(shù)
語(yǔ)法： arr.forEach(callbackFn(currentValue [, index [, array]])[, thisArg])
方法功能： 對(duì)數(shù)組的每個(gè)元素執(zhí)行一次給定的函數(shù)。
返回：undefined。
自定義函數(shù)：myForEach。
Array.prototype.myForEach = function(callbackFn, thisArg) {
if (typeof callbackFn !== 'function') throw ('callbackFn參數(shù)必須是函數(shù)');
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 函數(shù)
語(yǔ)法： var newArray = arr.filter(callbackFn(currentValue[, index[, array]])[, thisArg])
方法功能： 創(chuàng)建一個(gè)新數(shù)組, 其包含通過所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。
返回：一個(gè)新的、由通過測(cè)試的元素組成的數(shù)組，如果沒有任何數(shù)組元素通過測(cè)試，則返回空數(shù)組。
自定義函數(shù)：myFilter。
Array.prototype.myFilter = function(callbackFn, thisArg) {
if (typeof callbackFn !== 'function') throw ('callbackFn參數(shù)必須是函數(shù)');
let element = this,
len = element && element.length || 0,
result = [];
if (!thisArg) thisArg = element;
for (let index = 0; index < len; index++) {
if (callbackFn.call(thisArg, element[index], index, element)) result.push(element[index]);
}
return result;
};
find 函數(shù)
語(yǔ)法： arr.find(callbackFn[, thisArg])
方法功能： 返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 undefined。
返回：數(shù)組中第一個(gè)滿足所提供測(cè)試函數(shù)的元素的值，否則返回 undefined。
自定義函數(shù)：myFind。
Array.prototype.myFind = function(callbackFn, thisArg) {
if (typeof callbackFn !== 'function') throw ('callbackFn參數(shù)必須是函數(shù)');
let element = this,
len = element && element.length || 0;
if (!thisArg) thisArg = element;
for (let index = 0; index < len; index++) {
if (callbackFn.call(thisArg, element[index], index, element)) {
return element[index];
}
}
return
}
findIndex 函數(shù)
語(yǔ)法： arr.findIndex(callbackFn[, thisArg])
方法功能： 返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 undefined。
返回：數(shù)組中通過提供測(cè)試函數(shù)的第一個(gè)元素的索引。否則，返回-1。
自定義函數(shù)：myFindIndex。
Array.prototype.myFindIndex = function(callbackFn, thisArg) {
if (typeof callbackFn !== 'function') throw ('callbackFn參數(shù)必須是函數(shù)');
let element = this,
len = element && element.length || 0;
if (!thisArg) thisArg = element;
for (let index = 0; index < len; index++) {
if (callbackFn.call(thisArg, element[index], index, element)) return index;
}
return -1;
}
fill函數(shù)
語(yǔ)法： arr.fill(value[, start[, end]])
方法功能： 用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素。不包括終止索引。
返回：返回替換的值，原數(shù)組發(fā)生改變。
自定義函數(shù)：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, // 設(shè)置循環(huán)開始值
loopEnd = end >= len ? len : end; // 設(shè)置循環(huán)結(jié)束值
for (; loopStart < loopEnd; loopStart++) {
element[loopStart] = value;
}
return element;
}
map 函數(shù)
語(yǔ)法： var new_array = arr.map(function callbackFn(currentValue[, index[, array]]) {// Return element for new_array }[, thisArg])
方法功能： 創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素是調(diào)用一次提供的函數(shù)后的返回值。
返回：測(cè)試數(shù)組中是不是至少有1個(gè)元素通過了被提供的函數(shù)測(cè)試。它返回的是一個(gè)Boolean類型的值。 一個(gè)由原數(shù)組每個(gè)元素執(zhí)行回調(diào)函數(shù)的結(jié)果組成的新數(shù)組。
自定義函數(shù)：myMap。
Array.prototype.myMap = function(callbackFn, thisArg) {
if (typeof callbackFn !== 'function') throw ('callbackFn參數(shù)必須是函數(shù)');
let element = this,
len = element && element.length || 0,
result = [];
if (!thisArg) thisArg = element;
for (let index = 0; index < len; index++) {
result[index] = callbackFn.call(thisArg, element[index], index, element);
}
return result;
}
some 函數(shù)
語(yǔ)法： arr.some(callbackFn(currentValue[, index[, array]])[, thisArg])
方法功能： 測(cè)試數(shù)組中是不是至少有1個(gè)元素通過了被提供的函數(shù)測(cè)試。它返回的是一個(gè)Boolean類型的值。
返回：數(shù)組中有至少一個(gè)元素通過回調(diào)函數(shù)的測(cè)試就會(huì)返回true；所有元素都沒有通過回調(diào)函數(shù)的測(cè)試返回值才會(huì)為false。
自定義函數(shù)：mySome。
Array.prototype.mySome = function(callbackFn, thisArg) {
if (typeof callbackFn !== 'function') throw ('callbackFn參數(shù)必須是函數(shù)');
let element = this,
len = element && element.length || 0;
if (!thisArg) thisArg = element;
for (let index = 0; index < len; index++) {
if (callbackFn.call(thisArg, element[index], index, element)) return true;
}
return false;
}
every 函數(shù)
語(yǔ)法： arr.every(callbackFn(currentValue[, index[, array]])[, thisArg])
方法功能 ：測(cè)試一個(gè)數(shù)組內(nèi)的所有元素是否都能通過某個(gè)指定函數(shù)的測(cè)試。它返回一個(gè)布爾值。
返回：如果回調(diào)函數(shù)的每一次返回都為 true 值，返回 true，否則返回 false。
自定義函數(shù)：myEvery。
Array.prototype.myEvery = function(callbackFn, thisArg) {
if (typeof callbackFn !== 'function') throw ('callbackFn參數(shù)必須是函數(shù)');
let element = this,
len = element && element.length || 0;
if (!thisArg) thisArg = element;
for(let index = 0; index < len; index++) {
if (!callbackFn.call(thisArg, element[index], index, element)) return false;
}
return true;
}
reduce 函數(shù)
語(yǔ)法： arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
方法功能： 對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的reducer函數(shù)(升序執(zhí)行)，將其結(jié)果匯總為單個(gè)返回值。
返回：函數(shù)累計(jì)處理的結(jié)果。
自定義函數(shù)：myReduce。
Array.prototype.myReduce = function(callbackFn, initialValue) {
if (typeof callbackFn !== 'function') throw ('callbackFn參數(shù)必須是函數(shù)');
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], index, element);
index++;
}
return result;
}
reduceRight 函數(shù)
語(yǔ)法： arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])
方法功能： 接受一個(gè)函數(shù)作為累加器（accumulator）和數(shù)組的每個(gè)值（從右到左）將其減少為單個(gè)值。
返回：執(zhí)行之后的返回值。
自定義函數(shù)：myReduceRight。
Array.prototype.myReduceRight = function(callbackFn, initialValue) {
if (typeof callbackFn !== 'function') throw ('callbackFn參數(shù)必須是函數(shù)');
let element = this,
len = element.length || 0,
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[index], index, element);
}
}
return result;
}
最后
到此這篇關(guān)于JavaScript手寫數(shù)組常用函數(shù)總結(jié)的文章就介紹到這了,更多相關(guān)JS手寫數(shù)組常用函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- js中通過split函數(shù)分割字符串成數(shù)組小例子
- Js數(shù)組排序函數(shù)sort()介紹
- js判斷是否為數(shù)組的函數(shù): isArray()
- js 多種變量定義(對(duì)象直接量，數(shù)組直接量和函數(shù)直接量)
- JS數(shù)組(Array)處理函數(shù)整理
- JS刪除數(shù)組元素的函數(shù)介紹
- javascript 判斷數(shù)組是否已包含了某個(gè)元素的函數(shù)
- 判斷數(shù)組是否包含某個(gè)元素的js函數(shù)實(shí)現(xiàn)方法
- JavaScript數(shù)組函數(shù)unshift、shift、pop、push使用實(shí)例
- JavaScript數(shù)組的快速克隆(slice()函數(shù))和數(shù)組的排序、亂序和搜索(sort()函數(shù))
相關(guān)文章
微信JS-SDK實(shí)現(xiàn)微信會(huì)員卡功能(給用戶微信卡包里發(fā)送會(huì)員卡)
這篇文章主要介紹了微信JS-SDK實(shí)現(xiàn)微信會(huì)員卡功能(給用戶微信卡包里發(fā)送會(huì)員卡)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
在寫JS跳轉(zhuǎn)語(yǔ)句的過程中，發(fā)現(xiàn)這么一個(gè)問題，location.href語(yǔ)句與火狐不兼容的問題2010-07-07
基于JavaScript實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫代碼的相關(guān)資料,代碼簡(jiǎn)單易用，非常實(shí)用，需要的朋友可以參考下2016-05-05
網(wǎng)上好多屏蔽flash右鍵的方法，可多數(shù)是過期的或不合適的，現(xiàn)記錄下用JS方法屏蔽flash右鍵相關(guān)版權(quán)信息。2010-01-01
JavaScript設(shè)置首頁(yè)和收藏頁(yè)面的小例子
這篇文章介紹了JavaScript設(shè)置首頁(yè)和收藏頁(yè)面的小例子，有需要的朋友可以參考一下2013-11-11
JavaScript 井字棋人工智能實(shí)現(xiàn)代碼
JavaScript fights back in this artificial Tic Tac Toe game. Great script to have to entertain yourself and your visitors.2009-12-12
這篇文章主要介紹了用js簡(jiǎn)單提供增刪改查接口,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文主要介紹了tab欄切換的原理以及實(shí)現(xiàn)方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JS+CSS實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
JavaScript最完整的深淺拷貝實(shí)現(xiàn)方式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript最完整的深淺拷貝實(shí)現(xiàn)方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02