@[toc]

关于 自定义JS工具类 相关类似的源码请看 https://gitee.com/ykang2020/my_utils (opens new window)

0. 目标

自定义以下数组原型上的方法

map(): 返回一个由回调函数的返回值组成的新数组 reduce(): 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值 filter(): 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回 find(): 找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined findIndex(): 找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 -1 every(): 如果数组中的每个元素都满足测试函数，则返回 true，否则返回 false some(): 如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false

相关的原生js可以查看 【JS】JavaScript数组-归并方法-reduce-reduceRight (opens new window) 【ES6】JavaScript数组-迭代器方法-keys()-values()-entries()-迭代方法-every()-some()-filter()-map()-forEach() (opens new window) 【JS】JavaScript数组-操作方法-concat-数组强制打平-slice-splice方法使用 (opens new window)

1. 封装 map 函数

定义

/**
 * 封装map函数
 * @param {Array} arr 
 * @param {Function} callback 
 * @returns 
 */
export function map(arr, callback) {
  // 声明一个空的结果数组
  let result = [];
  // 遍历数组
  for (let i = 0; i < arr.length; i++) {
    // 执行回调，将回调函数执行结果添加到结果数组中
    result.push(callback(arr[i], i));
  }
  return result;
}

使用

import { map } from './array/declares'
// 声明一个数组
const arr = [2, 4, 6, 8]
const result = map(arr, (item) => {
  return item * 10
})
console.log(result)

结果

2. 封装 reduce 函数

定义

/**
 * 封装reduce函数
 * @param {Array} arr 
 * @param {Function} callback 
 * @param {number} initValue 
 * @returns 
 */
export function reduce(arr, callback, initValue) {
  // 声明变量
  let result = initValue;
  for (let i = 0; i < arr.length; i++) {
    // 执行回调
    result = callback(result, arr[i]);
  }
  return result;
}

使用

const arr = [2, 4, 6, 8]
const result = reduce(arr, (res, value) => {
  return res + value;
}, 1)

console.log(result)

结果

3. 封装 filter 函数

定义

/**
 * 封装filter函数
 * @param {Array} arr 
 * @param {Function} callback 
 * @returns 
 */
export function filter(arr, callback) {
  // 定义空数组接收 回调返回为true的 元素
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    let res = callback(arr[i], i);
    // 如果回调结果为真 就压入结果数组中
    if (res) {
      result.push(arr[i]);
    }
  }
  return result;
}

使用

const arr = [2, 3, 4, 5, 6, 8];
const result = filter(arr, (item) => item % 2 === 0);
console.log(result);

结果

4. 封装find函数

定义

/**
 * 封装find函数
 * @param {Array} arr 
 * @param {Function} callback 
 * @returns 
 */
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
}

使用

const arr = [2, 3, 4, 5, 6, 8];
const result = find(arr, item => item > 5)
const result2 = find(arr, item => item > 10)
console.log(result);
console.log(result2);

结果

5. 封装findIndex函数

定义

/**
 * 封装findIndex函数
 * @param {Array} arr 
 * @param {Function} callback 
 * @returns 
 */
 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
}

使用

const arr = [2, 3, 4, 5, 6, 8];
const result = findIndex(arr, item => item > 5)

const result2 = findIndex(arr, item => item > 10)

console.log(result);
console.log(result2);

结果

6. 封装every函数

定义

/**
 * 封装every函数
 * @param {Array} arr 
 * @param {Function} callback 
 * @returns 
 */
export function every(arr, callback) {
  for (let i = 0; i < arr.length; i++){
    let res = callback(arr[i])
    // 只要有一个不满足就返回false
    if (!res) {
      return false
    }
  }
  return true
}

使用

const arr = [2, 3, 4, 5, 6, 8];
const result = every(arr, item => item > 0)

const result2 = every(arr, item => item > 5)


console.log(result);
console.log(result2);

结果

7. 封装some函数

定义

/**
 * 封装some函数
 * @param {Array} arr 
 * @param {Function} callback 
 * @returns 
 */
export function some(arr, callback) {
  for (let i = 0; i < arr.length; i++){
    let res = callback(arr[i])
    if (res) {
      // 只要有一个满足就返回 true
      return true
    }
  }
  return false
}

使用

const arr = [2, 3, 4, 5, 6, 8];
const result = some(arr, (item) => item > 10);

const result2 = some(arr, (item) => item > 5);
console.log(result);
console.log(result2);

结果