JavaScript 手写代码第七期(重写数组方法三) 用于遍历的方法

悠悠 2023-10-12 20:05 145阅读 0赞

#### 文章目录 ####

*  1. 为什么要手写代码？
 *  2. 手写代码
 *   *  2.1 forEach
     *   *  2.1.1 基本使用
         *  2.1.2 手写实现
     *  2.2 map
     *   *  2.2.1 基本使用
         *  2.2.2 手写实现
     *  2.3 filter
     *   *  2.3.1 基本使用
         *  2.3.2 手写实现
     *  2.4 every
     *   *  2.4.1 基本使用
         *  2.4.2 手写实现
     *  2.5 some
     *   *  2.5.1 基本使用
         *  2.5.2 手写实现
     *  2.6 reduce
     *   *  2.6.1 基本使用
         *  2.6.2 手写实现
     *  2.7 find
     *   *  2.7.1 基本使用
         *  2.7.2 手写实现
     *  2.8 findIndex
     *   *  2.8.1 基本使用
         *  2.8.2 手写代码
     *  2.9 flatmap
     *   *  2.9.1 基本使用
         *  2.9.2 手写实现

## 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);
                });

![在这里插入图片描述][00b68ab4582544dc8b057404241bc694.png]

#### 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]];

<table> 
 <tbody> 
  <tr> 
   <td>欢迎大家在讨论学习，感谢大家支持</td> 
  </tr> 
 </tbody> 
</table>

[00b68ab4582544dc8b057404241bc694.png]: https://img-blog.csdnimg.cn/00b68ab4582544dc8b057404241bc694.png