手写实现数组方法之 map、reduce、filter、find、findInex、every 和 some

曾经终败给现在 2022-09-07 04:56 135阅读 0赞

#### 一、map 方法 ####

1.  `map` 方法，返回一个由回调函数的返回值组成的新数组。
2.  `map` 的实现，代码如下所示：

export function map(arr, callback) { 
      // 声明一个空的数组
      let result = [];
      // 遍历数组
      for(let i=0;i<arr.length;i++) { 
        // 执行回调
        result.push(callback(arr[i], i));
      }
      // 返回结果
      return result;
    }

1.  手写函数 `map` 的应用，代码如下所示：

// 声明一个数组
    const arr = [1,2,3,4,5];
    
    // map 方法
    const result = map(arr, (item,index) => { 
       console.log(index);
       return item * 10;
     });
    console.log(result);

#### 二、reduce 方法 ####

1.  `reduce` 方法，从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中，传给下次回调函数，并返回最后一次回调函数的返回值。
2.  `reduce` 的实现，代码如下所示：

export function reduce(arr, callback, initValue) { 
      // 声明变量
      let result = initValue;
      // 执行回调
      for(let i=0;i<arr.length;i++) { 
        // 执行回调
        result = callback(result, arr[i]);
      }
      // 返回最终的结果
      return result;
    }

1.  手写函数 `reduce` 的应用，代码如下所示：

// 声明一个数组
     const arr = [1,2,3,4,5];
    
     // reduce 函数调用
      let result = arr.reduce(function(res, value){ 
        return res + value;
      }, 0);
      console.log(result);
      let result = reduce(arr, function(res, value){ 
        return res + value;
      }, 10);

#### 三、filter 方法 ####

1.  `filter` 方法，将所有在过滤函数中返回 `true` 的数组元素放在一个新数组中并返回。
2.  `filter` 的实现，代码如下所示：

export function filter(arr, callback) { 
      // 声明空数组
      let result = [];
      // 遍历数组
      for(let i=0;i<arr.length;i++) { 
        // 执行回调
        let res = callback(arr[i], i);
        // 判断 如果为真则压入到 result 结果中
        if (res) { 
          result.push(arr[i]);
        }
      }
      // 返回结果
      return result;
    }

1.  手写函数 `filter` 的应用，代码如下所示：

// 声明一个数组
     const arr = [1,2,3,4,5];
    
    //filter 函数调用
    const result = arr.filter(item => item % 2 === 1);
    const result = filter(arr, item => item % 2 === 0);
    console.log(result);

#### 四、find 方法 ####

1.  `find` 方法，找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 `undefined`。
2.  `find` 的实现，代码如下所示：

export function find(arr, callback) { 
      // 遍历数组
      for(let i=0;i<arr.length;i++) { 
        // 执行回调
        let res = callback(arr[i], i);
        // 判断
        if (res) { 
          // 返回当前正在遍历的元素
          return arr[i];
        }
      }
      // 如果没有遇到满足条件的 返回 undefined
      return undefined;
    }

1.  手写函数 `find` 的应用，代码如下所示：

// 声明一个数组
     const arr = [1,2,3,4,5,1000,1200];
     
    // find 函数调用
    const result = arr.find(item => { 
      return item > 1000;
    });
    const result = find(arr, (item,index) => { 
      return item > 1000;
    });
    console.log(result);

#### 五、findIndex 方法 ####

1.  `findIndex` 方法，找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 `-1`。
2.  `findIndex` 的实现，代码如下所示：

export function findIndex(arr, callback) { 
      // 遍历数组
      for(let i=0;i<arr.length;i++) { 
        // 执行回调
        let res = callback(arr[i], i);
        // 判断
        if (res) { 
          // 返回当前正在遍历的元素索引
          return i;
        }
      }
      // 如果没有遇到满足条件的 返回 -1
      return -1;
    }

1.  手写函数 `findIndex` 的应用，代码如下所示：

// findIndex 函数调用
    const arr2 = [1,2,3,4,5,6,10,23,8,1200];
    const result = arr2.findIndex(item => { 
      return item > 1000;
    });
    const result = findIndex(arr2, (item,index) => { 
      return item > 1000;
    });
    console.log(result);

#### 六、every 方法 ####

1.  `every` 方法，如果数组中的每个元素都满足测试函数，则返回 `true`，否则返回 `false`。
2.  `every` 的实现，代码如下所示：

export function every(arr, callback) { 
      // 遍历数组
      for(let i=0;i<arr.length;i++) { 
        // 执行回调 如果回调执行返回结果为 false
        if (!callback(arr[i], i)) { 
          return false;
        }
      }
      // 如果都满足条件则返回 true
      return true;
    }

1.  手写函数 `every` 的应用，代码如下所示：

// every 函数调用
    const arr3 = [1,2,3,4,5,100,43,89];
    const result = arr3.every(item => { 
      return item > 10;
    });
    
    const result = every(arr3, (item, index) => { 
      return item > 10;
    });
    
    console.log(result);

#### 七、some 方法 ####

1.  `some` 方法，如果数组中至少有一个元素满足测试函数，则返回 `true`，否则返回 `false`。
2.  `some` 的实现，代码如下所示：

export function some(arr, callback) { 
      // 遍历数组
      for(let i=0;i<arr.length;i++) { 
        // 执行回调 如果回调执行返回结果为 true
        if (callback(arr[i], i)) { 
          return true;
        }
      }
      //如果都满足条件则返回 false
      return false;
    }

1.  手写函数 `some` 的应用，代码如下所示：

// some 函数调用
    const arr3 = [1,2,3,4,5,100,43,89];
    const result = arr3.some(item => { 
      return item > 50;
    });
    
    const result = some(arr3, (item, index) => { 
      return item > 50;
    });
    
    console.log(result);