JavaScript数组中filter、map、reduce、find等方法实现的原理 javascript

一、filter 用法和原理实现 filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。filter()不会对空数组进行检测，也不会改变原始数组。
1、语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

currentValue，必须。当前元素的值
index，可选。当前元素的索引值
arr，可选。当前元素属于的数组对象
thisValue，可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
2、用法

let arr = [1, 2, 3, 4, 5, 6, 7, 8]; let result = arr.filter((item) => item > 5); console.log(result); // [ 6, 7, 8 ]

3、实现原理

Array.prototype.filter1 = function (fn) { if (typeof fn !== "function") { throw new TypeError(`${fn} is not a function`); } let newArr = []; for (let i = 0; i < this.length; i++) { fn(this[i]) && newArr.push(this[i]); } return newArr; }; let arr = [1, 2, 3, 4, 5, 6, 7, 8]; let result = arr.filter1(function (item) { return item > 5; }); console.log(result); // [ 6, 7, 8 ]

二、map 用法和实现原理 map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。map() 不会对空数组进行检测，也不会改变原始数组。
1、语法

array.map(function(currentValue,index,arr), thisValue)

参数说明

currentValue，必须。当前元素的值
index，可选。当前元素的索引值
arr，可选。当前元素属于的数组对象
thisValue，可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
2、用法

let arr = ["Tom", "Mike", "Shanguagua"]; let result = arr.map((item, index) => { return `第${index + 1}名：${item}`; }); console.log(result); // [ '第1名：Tom', '第2名：Mike', '第3名：Shanguagua' ]

3、实现原理

Array.prototype.map1 = function (fn) { if (typeof fn !== "function") { throw new TypeError(`${fn} is not a function`); } let newArr = []; for (let i = 0; i < this.length; i++) { newArr.push(fn(this[i])); } return newArr; }; let arr = ["Tom", "Mike", "Shanguagua"]; let result = arr.map1((item, index) => { return `第${index + 1}名：${item}`; }); console.log(result); // [ '第1名：Tom', '第2名：Mike', '第3名：Shanguagua' ]

三、reduce 用法和原理 reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。
1、语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数说明

total：必需。初始值, 或者计算结束后的返回值
currentValue：必需。当前元素
currentIndex：可选。当前元素的索引
arr：可选。当前元素所属的数组对象
initialValue：可选。传递给函数的初始值

2、用法

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let result = arr.reduce(function (total, currentValue, currentIndex, arr) { return total + currentValue; }, 0); console.log(result); // 55

3、实现原理

Array.prototype.reduce1 = function (reducer, initVal) { for (let i = 0; i < this.length; i++) { initVal = reducer(initVal, this[i], i, this); } return initVal; }; let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let result = arr.reduce1(function (total, currentValue, currentIndex, arr) { return total + currentValue; }, 0); console.log(result); // 55

四、find 用法和原理实现 find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的。注意: find() 并没有改变数组的原始值。
1、语法

array.find(function(currentValue, index, arr),thisValue)

参数说明

currentValue：必需。当前元素
index：可选。当前元素的索引值
arr：可选。当前元素所属的数组对象
thisValue：可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。
2、用法

let arr = [1, 2, 3, 4, 5, 6]; let result = arr.find((item) => item >= 2); console.log(result); // 2

3、实现原理

Array.prototype.find1 = function (fn) { if (typeof fn !== "function") { throw new TypeError(`${fn} is not a function`); } for (let i = 0; i < this.length; i++) { if (fn(this[i])) return this[i]; } }; let arr = [1, 2, 3, 4, 5, 6]; let result = arr.find1((item) => item >= 2); console.log(result); // 2

五、some 用法和原理实现 some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测，也不会改变原始数组。
1、语法

array.some(function(currentValue,index,arr),thisValue)

参数说明

currentValue：必须。当前元素的值
index，可选。当前元素的索引值
arr，可选。当前元素属于的数组对象
thisValue，可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

返回布尔值。如果数组中有元素满足条件返回 true，否则返回 false。
2、用法

let arr = [1, 2, 3, 4, 5, 6, 7]; let flag = arr.some((item) => item > 5); console.log(flag); //true

3、实现原理

Array.prototype.some1 = function (fn) { if (typeof fn !== "function") { throw new TypeError(`${fn} is not a function`); } for (let i = 0; i < this.length; i++) { if (fn(this[i])) { return true; } } return false; }; let arr = [1, 2, 3, 4, 5, 6, 7]; let flag = arr.some1((item) => item > 5); console.log(flag); //true

六、every 用法和原理实现 every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

注意：every() 不会对空数组进行检测，也不会改变原始数组。
1、语法

array.every(function(currentValue,index,arr), thisValue)

currentValue：必须。当前元素的值
index：可选。当前元素的索引值
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

返回布尔值。如果所有元素都通过检测返回 true，否则返回 false。
2、用法

let arr = [1, 2, 3, 4, 5, 6, 7, 8]; let flag = arr.every((item) => item > 5); console.log(flag); // false

3、实现原理

Array.prototype.every1 = function (fn) { if (typeof fn !== "function") { throw new TypeError(`${fn} is not a function`); } for (let i = 0; i < this.length; i++) { if (!fn(this[i])) { return false; } } return true; }; let arr = [1, 2, 3, 4, 5, 6, 7, 8]; let flag = arr.every1((item) => item > 5); console.log(flag); // false

感谢 【JavaScript数组中filter、map、reduce、find等方法实现的原理】谢谢阅读，如有帮助请点个关注、收藏吧
欢迎关注前端技术驿站公众号，分享学习资料，技术总结！