1. 为什么要手写代码？
我们在日常开发过程中，往往都是取出来直接用，从来不思考代码的底层实现逻辑，但当我开始研究一些底层的东西的时候，才开始理解了JavaScript每个方法和函数的底层实现思路，我认为这可以很好的提高我们的代码水平和逻辑思维。
2. 手写代码
2.1 forEach
2.1.1 基本使用
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
let arr = [1, 2, 3]; arr.forEach((item, index, arr) => { console.log(item, index, arr); });
2.1.2 手写实现
输出结果一致
Array.prototype.myForEach = function (callback) { if (typeof callback !== 'function') { throw new Error('参数必须是一个函数'); } for (let i = 0; i < this.length; i++) { callback(this[i], i, this); } }; arr.myForEach(function (item, index, arr) { console.log(item, index, arr); });
2.2 map
2.2.1 基本使用
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
原数组不会发生改变
返回新的数组：在原数组的基础上都加1
let arr = [1, 2, 3, 4]; let newArr = arr.map((item, index, arr) => { return item + 1; }); console.log(newArr); // [2, 3, 4, 5] console.log(arr); // 不会改变原数组 [1, 2, 3, 4]
2.2.2 手写实现
Array.prototype.myMap = function (callback) { if (typeof callback !== 'function') { throw new Error('参数必须是一个函数'); } // 最终要返回的数组 let result = []; for (let i = 0; i < this.length; i++) { result.push(callback(this[i], i, this)); } return result; }; let newArr = arr.myMap((item, index, arr) => { return item + 1; }); console.log(newArr); // [2, 3, 4, 5] console.log(arr); // 不会改变原数组 [1, 2, 3, 4]
2.3 filter
2.3.1 基本使用
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter() 不会改变原始数组。
返回数组中大于3的项
let arr = [1, 2, 3, 4, 5]; let newArr = arr.filter((item, index, arr) => { return item > 2; }); console.log(newArr); // [3,4,5] console.log(arr); // [1,2,3,4,5]
2.3.2 手写实现
Array.prototype.myFilter = function (callback) { if (typeof callback !== 'function') { throw new Error('参数必须是一个函数'); } let result = []; for (let i = 0; i < this.length; i++) { // 判断是否符合item > 2，符合则push到数组res里面返回 callback(this[i], i, this) && result.push(this[i]); } return result; }; let newArr = arr.myFilter((item, index, arr) => { return item > 2; }); console.log(newArr); // [3,4,5] console.log(arr); // [1,2,3,4,5]
2.4 every
2.4.1 基本使用
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
let arr = [1, 2, 3, 4, 5]; let flag = arr.every((item, index, arr) => { return item > 4; }); console.log(flag); // true
2.4.2 手写实现
Array.prototype.myEvery = function (callback) { if (typeof callback !== 'function') { throw new Error('参数必须是一个函数'); } for (let i = 0; i < this.length; i++) { if (!callback(this[i], i, this)) { return false; } } return true; }; let flag = arr.every((item, index, arr) => { return item > 4; }); console.log(flag); // false
2.5 some
2.5.1 基本使用
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
2.5.2 手写实现
Array.prototype.mySome = function (callback) { if (typeof callback !== 'function') { throw new Error('参数必须是一个函数'); } for (let i = 0; i < this.length; i++) { if (!callback(this[i], i, this)) { return false; } } return true; }; let flag = arr.mySome((item, index, arr) => { return item > 3; }); console.log(flag);
2.6 reduce
2.6.1 基本使用
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
语法:`
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
第一个参数total：必需。初始值, 或者计算结束后的返回值。
第二个参数currentValue：必需。当前元素
第三个参数currentIndex：可选。当前元素的索引
第四个参数arr：可选。当前元素所属的数组对象。
使用示例,实现数组元素的累加
let arr = [1, 2, 3, 4]; let sum = arr.reduce((tol, cur) => { return (tol += cur); }, 0); console.log(sum); // 10
2.6.2 手写实现
Array.prototype.myReduce = function (callback, InitialValue) { if (typeof callback !== 'function') { throw new Error('传入第一个参数必须是函数'); } const array = this; // 如果没有传InitaialValue初始值时，初始值默认为数组的第一项即array[0] let result = InitialValue || array[0]; for (let i = 0; i < array.length; i++) { // 如果没有传第二个参数InitialValue初始值，当前数组第一项就不在进入循环 if (!InitialValue && i == 0) { continue; } result = callback(result, array[i], i, this); } return result; }; let result = arr.myReduce((tol, cur, index, arr) => { return (tol += cur); }, 0); console.log(result); // 10
2.7 find
2.7.1 基本使用
find() 方法返回满足条件的数组的第一个元素的值。
let arr = [1, 2, 3]; let flag = arr.find((item, index, arr) => { return item > 2; }); console.log(flag); // 3
2.7.2 手写实现
Array.prototype.myFind = function (callback) { if (typeof callback !== 'function') { throw new Error('传入的参数必须是函数'); } for (let i = 0; i < this.length; i++) { if (callback(this[i], i, this)) { return this[i]; } } return undefined; }; let flag = arr.myFind((item, index, arr) => { return item > 2; }); console.log(flag);
2.8 findIndex
2.8.1 基本使用
findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
let arr = [1, 2, 3, 4]; let index1 = arr.findIndex((item, index, arr) => { return item == 3; }); console.log(index1);
2.8.2 手写代码
Array.prototype.myFindIndex = function (callback) { for (let i = 0; i < this.length; i++) { if (callback(this[i], i, this)) { return i; } } return -1; }; let index1 = arr.myFindIndex((item, index, arr) => { return item == 3; }); console.log(index1);
2.9 flatmap
2.9.1 基本使用
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，不改变原数组
使用map遍历时，操作完成后，如果遇到操作完的元素为数组，就进行一层的拍平
flatmap
faltmap(callback,thisArg)
第一个参数callback：可以传入 (item,i,arr) 执行
第二个参数thisArg：为执行callback时的this指向 thisArg
代码示例：
let arr = [1, 2, 3, 4, 5]; let arr1 = arr.flatMap((item) => [item * 2]); console.log(arr1); // [2, 4, 6, 8, 10] console.log(arr); // [1, 2, 3, 4, 5] 原数组没有发生改变 let arr2 = arr.flatMap((item) => [[item * 2]]); console.log(arr2); // 只能拍平一层 [[2], [4], [6], [8], [10]]; console.log(arr); // [1, 2, 3, 4, 5]
2.9.2 手写实现
Array.prototype.myFlatMap = function (callback, thisArg) { let newArr = []; for (let i = 0; i < this.length; i++) { let res = callback.call(thisArg, arr[i], i, arr); if (Array.isArray(res)) { newArr.push(...res); } else { newArr.push(res); } } return newArr; }; let arr1 = arr.flatMap((item) => [item * 2]); console.log(arr1); // [2, 4, 6, 8, 10] let arr2 = arr.myFlatMap((item) => [[item * 2]]); console.log(arr2); // 只能拍平一层 [[2], [4], [6], [8], [10]];
