十個可以手動編寫的 JavaScript 數(shù)組 API
JavaScript 中有很多API，使用得當(dāng)，會很方便，省力不少。 你知道它的原理嗎? 今天這篇文章，我們將對它們進(jìn)行一次小總結(jié)。
現(xiàn)在開始吧。
1.forEach()
forEach()用于遍歷數(shù)組接收一參數(shù)回調(diào)函數(shù)，并在回調(diào)函數(shù)中接收三個參數(shù)，分別代表每一項(xiàng)的值、下標(biāo)和數(shù)組本身。
為了確保數(shù)組可以訪問我們自己手寫的API，它必須鏈接到數(shù)組的原型。
代碼：
const arr = [ { name: 'zt', age: 18 }, { name: 'aa', age: 19 }, { name: 'bb',
age: 18 }, { name: 'cc', age: 21 },]//CodeArray.prototype.my_forEach = function
(callback) { for (let i = 0; i < this. length; i++) { callback(this[i], i,
this) }}//verifyarr.my_forEach((item, index, arr) => { //111 111 if (item.
age === 18) { item.age = 17 return } console.log('111');})2. map()
map()也用于數(shù)組遍歷，與forEach不同的是，它會返回一個新數(shù)組，這個新數(shù)組由回調(diào)函數(shù)map返回值接收。
代碼：
const arr = [ { name: 'zt', age: 18 }, { name: 'aa', age: 19 }, { name: 'bb',
age: 18 }, { name: 'cc', age: 21 },]Array.prototype.my_map=function(callback){
const res=[] for(let i=0;i{ if(item.age>18){ return item }})console.
log(newarr);//[ // undefined, // { name: 'aa', age: 19 }, // undefined, // {
name: 'cc', age: 21 }//]3. filter()
filter()用于過濾滿足條件的元素，并返回一個新數(shù)組。
代碼：
const arr = [ { name: 'zt', age: 18 }, { name: 'aa', age: 19 }, { name: 'bb',
age: 18 }, { name: 'cc', age: 21 },]Array.prototype.my_filter = function
(callback) { const res = [] for (let i = 0; i < this. length; i++) {
callback(this[i], i, this) && res. push(this[i]) } return
res}//verifylet newarr = arr.my_filter((item, index, arr) => { return item.
age > 18})console.log(newarr); [ { name: 'aa', age: 19 }, { name: 'cc', age:
21 } ]4. reduce()
reduce()用于將數(shù)組中的所有元素按照指定的規(guī)則進(jìn)行合并計(jì)算，并返回一個最終值。
reduce() 接收兩個參數(shù)：回調(diào)函數(shù)、初始值(可選)。
回調(diào)函數(shù)中接收有四個參數(shù)：初始值或者存放最后一個回調(diào)函數(shù)的返回值、每一項(xiàng)的值、下標(biāo)、數(shù)組本身。
如果沒有提供初始值，則從第二項(xiàng)開始，將第一個值作為第一次執(zhí)行的返回值。
代碼：
const arr = [ { name: 'zt', age: 18 }, { name: 'aa', age: 19 }, { name: 'bb',
age: 18 }, { name: 'cc', age: 21 },]Array.prototype.my_reduce = function
(callback,...arg) { let pre,start=0 if(arg.length){ pre=arg[0] } else{
pre=this[0] start=1 } for (let i = start; i < this.length; i++) {
pre=callback(pre,this[i], i, this) } return pre}//verifyconst sum =
arr.my_reduce((pre, current, index, arr) => { return pre+=current.age},0)
console.log(sum); //765. fill()
fill() 用于填充數(shù)組的所有元素，它會影響原始數(shù)組，返回原始數(shù)組的修改值。
fill() 接收三個參數(shù)：填充值、起始位置(默認(rèn)為 0)、結(jié)束位置(默認(rèn)為 this.length-1)。
左閉右開灌裝原理
當(dāng)使用起始位置和結(jié)束位置時，它們默認(rèn)填充整個數(shù)組。
代碼：
Array.prototype.my_fill = function (value,start,end) {
if(!start&&start!==0){ start=0 } end=end||this.length for(let
i=start;i ]6.
includes()想法：
include()用于判斷數(shù)組中是否存在元素，返回值true或false
include() 提供第二個參數(shù)支持指定位置開始查找
代碼：
const arr = ['a', 'b', 'c', 'd', 'e']Array.prototype.my_includes = function
(item,start) { if(start<0){start+=this.length} for (let i = start; i <
this. length; i++) { if(this[i]===item){ return true } } return
false}//verifyconst flag = arr.my_includes('c',3) //The element to be searched,
from which subscript to start searchingconsole.log(flag); //false6. join()
join() 用于將數(shù)組中的所有元素連接成指定符號的一個字符串
代碼：
const arr = ['a', 'b', 'c']Array.prototype.my_join = function (s = ',') { let
str = '' for (let i = 0; i < this. length; i++) { str += `${this[i]}${s}` }
return str. slice(0, str. length - 1)}//verifyconst str = arr. my_join('
')console.log(str); //a b c7. find()
find()用于返回?cái)?shù)組中第一個滿足條件的元素，找不到元素返回undefined。
find()的參數(shù)是一個回調(diào)函數(shù)。
代碼：
const arr = [ { name: 'zt', age: 18 }, { name: 'aa', age: 19 }, { name: 'bb',
age: 18 }, { name: 'cc', age: 21 },]Array.prototype.my_find = function
(callback) { for (let i = 0; i < this.length; i++) { if(callback(this[i], i,
this)){ return this[i] } } return undefined}//verifylet j = arr.my_find((item,
index, arr) => { return item.age > 19 })console.log(j); //{ name: 'cc',
age: 21 }8. findIndex()
findIndex()用于返回?cái)?shù)組中第一個滿足條件的，索引找不到返回-1
findIndex()的參數(shù)是一個回調(diào)函數(shù)。
代碼：
const arr = [ { name: 'zt', age: 18 }, { name: 'aa', age: 19 }, { name: 'bb',
age: 18 }, { name: 'cc', age: 21 },]Array.prototype.my_findIndex = function
(callback) { for (let i = 0; i < this.length; i++) { if(callback(this[i], i,
this)){ return i } } return -1}let j = arr.my_findIndex((item, index, arr) =>
{ return item.age > 19})console.log(j); //39. some()
元素 some() 用于檢查數(shù)組中指定的條件是否滿足。
如果有一個元素滿足條件，則返回 true，并且不會再檢查后面的元素。
代碼：
const arr = [ { name: 'zt', age: 18 }, { name: 'aa', age: 19 }, { name: 'bb',
age: 18 }, { name: 'cc', age: 21 },]Array.prototype.my_some = function
(callback) { for (let i = 0; i < this. length; i++) { if(callback(this[i], i,
this)){ return true } } return false}//verifyconst flag = arr.some((item, index,
arr) => { return item. age > 20})console.log(flag); //true10. every()
every() 用于檢查所有元素是否都滿足指定條件。
如果有一個條件不滿足，則返回 false，后面的元素不會再執(zhí)行。
代碼：
const arr = [ { name: 'zt', age: 18 }, { name: 'aa', age: 19 }, { name: 'bb',
age: 18 }, { name: 'cc', age: 21 },]Array.prototype.my_every = function
(callback) { for (let i = 0; i < this.length; i++) { if(!callback(this[i], i,
this)){ return false } } return true}//verifyconst flag = arr.my_every((item,
index, arr) => { return item.age > 16})console.log(flag); //true寫在最后
以上就是我今天想與您分享的10個手動編寫的JS數(shù)組API的知識內(nèi)容，如果對您有幫助的話，請記得點(diǎn)贊我，關(guān)注我，并將這個知識分享給您的朋友，也許能夠幫助到他。
