JavaScript 中有很多API，使用得当，会很方便，省力不少。 你知道它的原理吗? 今天这篇文章，我们将对它们进行一次小总结。
现在开始吧。
1.forEach()
forEach()用于遍历数组接收一参数回调函数，并在回调函数中接收三个参数，分别代表每一项的值、下标和数组本身。
为了确保数组可以访问我们自己手写的API，它必须链接到数组的原型。
代码：
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');})1.2.3.4.5.2. map()
map()也用于数组遍历，与forEach不同的是，它会返回一个新数组，这个新数组由回调函数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 }//]1.2.3.4.5.3. filter()
filter()用于过滤满足条件的元素，并返回一个新数组。
代码：
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 } ]1.2.3.4.5.6.7.4. reduce()
reduce()用于将数组中的所有元素按照指定的规则进行合并计算，并返回一个最终值。
reduce() 接收两个参数：回调函数、初始值(可选)。
回调函数中接收有四个参数：初始值或者存放最后一个回调函数的返回值、每一项的值、下标、数组本身。
如果没有提供初始值，则从第二项开始，将第一个值作为第一次执行的返回值。
代码：
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); //761.2.3.4.5.6.7.5. fill()
fill() 用于填充数组的所有元素，它会影响原始数组，返回原始数组的修改值。
fill() 接收三个参数：填充值、起始位置(默认为 0)、结束位置(默认为 this.length-1)。
左闭右开灌装原理
当使用起始位置和结束位置时，它们默认填充整个数组。
代码：
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()1.2.3.4.想法：
include()用于判断数组中是否存在元素，返回值true或false
include() 提供第二个参数支持指定位置开始查找
代码：
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); //false1.2.3.4.5.6. join()
join() 用于将数组中的所有元素连接成指定符号的一个字符串
代码：
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 c1.2.3.4.7. find()
find()用于返回数组中第一个满足条件的元素，找不到元素返回undefined。
find()的参数是一个回调函数。
代码：
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 }1.2.3.4.5.6.8. findIndex()
findIndex()用于返回数组中第一个满足条件的，索引找不到返回-1
findIndex()的参数是一个回调函数。
代码：
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); //31.2.3.4.5.9. some()
元素 some() 用于检查数组中指定的条件是否满足。
如果有一个元素满足条件，则返回 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); //true1.2.3.4.5.10. every()
every() 用于检查所有元素是否都满足指定条件。
如果有一个条件不满足，则返回 false，后面的元素不会再执行。
代码：
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); //true1.2.3.4.5.写在最后
以上就是我今天想与您分享的10个手动编写的JS数组API的知识内容，如果对您有帮助的话，请记得点赞我，关注我，并将这个知识分享给您的朋友，也许能够帮助到他。
责任编辑：华轩来源： web前端开发
