js的Array对象能够调用不少方法，每个方法都有其特殊的用途，可是不少状况下咱们仅仅会使用这么高级方法，多于其实现过程知之甚少，本节就数组中的经常使用方法map、filter、reduce进行实现，帮助了解其原理。javascript
19.1 map
19.1.1 基础
map()方法建立一个新数组，其结果是该数组中的每一个元素是调用一次提供的函数后的返回值。html
- map方法的用法以下所示：
const new_array = arr.map(function callback(currentValue[, index[, array]]) { // …… }[, thisArg]) 复制代码
- 小试牛刀
const arr = [1, 2, 3, 4]; const newArr = arr.map(value => value * 3); console.log(arr); // [ 1, 2, 3, 4 ] 原数组不变 console.log(newArr); // [ 3, 6, 9, 12 ] 复制代码
19.1.2 实现
map作的事情很单纯，就是处理每一个元素而后返回一个新的数组，下面就来看看怎样实现本身的map函数。实现步骤以下所示：java
- 判断输入的第一个参数是否是函数
- 获取须要处理的数组内容
- 新建一个新数组用于装载新的内容
- 对数组中每一个值进行处理（注意改变this指向）
- 返回结果
Array.prototype.myMap = function(fn) { // 判断输入的第一个参数是否是函数 if (typeof fn !== 'function') { throw new TypeError(fn + 'is not a function'); } // 获取须要处理的数组内容 const arr = this; const len = arr.length; // 新建一个空数组用于装载新的内容 const temp = new Array(len); // 对数组中每一个值进行处理 for (let i = 0; i < len; i++) { // 获取第二个参数，改变this指向 let result = fn.call(arguments[1], arr[i], i, arr); temp[i] = result; } // 返回新的结果 return temp; } const arr = [1, 2, 3, 4]; const newArr = arr.myMap(value => value * 3); console.log(arr); // [ 1, 2, 3, 4 ] 原数组不变 console.log(newArr); // [ 3, 6, 9, 12 ] 复制代码
上述就是map的实现流程，而且通过验证与原生的map方法的结果一致。git
19.2 filter
19.2.1 基础
filter()方法建立一个新数组, 其包含经过所提供函数实现的测试的全部元素。github
- filter方法的用法以下所示：
const newArray = arr.filter(callback(element[, index[, array]])[, thisArg]) 复制代码
- 小试牛刀
const arr = [1, 2, 3, 4]; const newArr = arr.filter(value => value > 2); console.log(arr); // [ 1, 2, 3, 4 ] console.log(newArr); // [ 3, 4 ] 复制代码
19.2.2 实现
filter函数作的事情就是过滤出符合条件的元素，对于filter的实现步骤和map的基本一致，不一样之处在于其在数组中处理每一个值的时候稍有区别。数组
Array.prototype.myFilter = function (fn) { if (typeof fn !== 'function') { throw new TypeError(`${fn} is not a function`); } // 获取该数组 const arr = this; // 获取该数组长度 const len = this.length >>> 0; // 新建一个新的数组用于放置该内容 const temp = []; // 对数组中每一个值进行处理 for (let i = 0; i < len; i++) { // 处理时注意this指向 const result = fn.call(arguments[1], arr[i], i, arr); result && temp.push(arr[i]); } return temp; } const arr = [1, 2, 3, 4]; const newArr = arr.myFilter(value => value > 2); console.log(arr); // [ 1, 2, 3, 4 ] console.log(newArr); // [ 3, 4 ] 复制代码
19.3 reduce
19.3.1 基础
reduce()方法对数组中的每一个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。函数
- reduce方法的用法以下所示：
const result = arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 复制代码
- 小试牛刀
const arr = [1, 2, 3, 4]; const result = arr.reduce((accumulator, value) => accumulator + value); console.log(result); // 10 复制代码
19.3.2 实现
reduce为数组中的每个元素依次执行callback函数，下面就来看看怎样实现本身的filter函数。实现步骤以下所示：post
- 判断输入的第一个参数是否是函数
- 获取须要处理的数组内容
- 获取初始值
- 依次处理后续数组中的元素
- 返回累加器处理的结果
Array.prototype.myReduce = function(fn) { if (typeof fn !== 'function') { throw new TypeError(`${fn} is not a function`); } const arr = this; const len = arr.length >>> 0; let value;// 最终返回的值 let k = 0;// 当前索引 if (arguments.length >= 2) { value = arguments[1]; } else { // 当数组为稀疏数组时，判断数组当前是否有元素，若是没有索引加一 while (k < len && !( k in arr)) { k++; } // 若是数组为空且初始值不存在则报错 if (k >= len) { throw new TypeError('Reduce of empty array with no initial value'); } value = arr[k++]; } while (k < len) { if (k in arr) { value = fn(value, arr[k], k, arr); } k++; } return value; } const arr = [1, 2, 3, 4]; const result = arr.myReduce((accumulator, value) => accumulator + value); console.log(result); // 10 复制代码
1.若是以为这篇文章还不错，来个分享、点赞吧，让更多的人也看到测试