js-手写数组常用方法的实现

前言

数组的 api 比较多，下面主要列举一些常用的 api 实现，主要是参考 MDN 上 Array 的 Polyfill 来实现的。

MDN 链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

forEach

forEach 主要用于遍历数组

/**
 * @description: forEach简单实现
 * @param {Function} callback 回调函数 函数中接受（当前遍历的元素，当前遍历索引，当前遍历的数组）三个参数
 * @param {Any} thisArg 传入可以改变callback的this指向
 */
Array.prototype._forEach = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function')
  }
  let index = -1 // 索引
  const { length: len } = this // 数组长度
  while (++index !== len) {
    if (index in this) {
      // 数组下标非连续的情况
      callback.call(thisArg, this[index], index, this)
    }
  }
}

filter

filter 主要用于过滤数组

/**
 * @description: filter简单实现
 * @param {Function} callback 回调函数 函数中接受（当前遍历的元素，当前遍历索引，当前遍历的数组）三个参数
 * @param {Any} thisArg 传入可以改变callback的this指向
 */
Array.prototype._filter = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function')
  }
  let index = -1,
    newIdx = 0 // 索引、返回新数组索引
  const { length: len } = this // 原数组长度
  const result = [] // 返回的新数组
  while (++index !== len) {
    if (index in this) {
      // 数组下标非连续的情况
      if (callback.call(thisArg, this[index], index, this)) {
        result[newIdx++] = this[index]
      }
    }
  }
  return result
}

map

map 中 callback 必须要有返回值，结果返回一个由 callback 返回值组成的新数组。

/**
 * @description: map简单实现
 * @param {Function} callback 回调函数 函数中接受（当前遍历的元素，当前遍历索引，当前遍历的数组）三个参数
 * @param {Any} thisArg 传入可以改变callback的this指向
 * @return {Array} 返回callback返回值组成的新数组
 */
Array.prototype._map = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function')
  }
  let index = -1 // 索引
  const { length: len } = this // 数组长度
  const result = [] // 返回的新数组
  while (++index !== len) {
    if (index in this) {
      // 数组下标非连续的情况
      result[index] = callback.call(thisArg, this[index], index, this)
    }
  }
  return result
}

reduce

reduce 相对比较复杂，需要判断是否传入初始值，并且每次循环的结果要传递到下一次循环当中。

/**
 * @description: reduce简单实现
 * @param {Function} callback 回调函数 函数中接受（当前遍历的元素，当前遍历索引，当前遍历的数组）三个参数
 * @param {Any} thisArg 传入可以改变callback的this指向
 */
Array.prototype._reduce = function (...args) {
  const callback = args[0] // 回调函数
  const { length: len } = this // 数组长度
  const { length: argLen } = args // 参数长度
  let index = -1 // 数组下标
  let result

  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function')
  }

  // 存在第二个参数，作为函数的初始值initialValue
  if (argLen >= 2) {
    result = args[1]
  } else {
    // 找到数组第一项的下标
    while (index < len && !(index in this)) {
      index++
    }
    // 数组为空并且没有初始值的情况
    if (index >= len) {
      throw new TypeError('Reduce of empty array with no initial value')
    }
    result = arr[index++]
  }
  while (++index !== len) {
    if (index in this) {
      // 将每次返回的结果传入下一次循环
      result = callback(result, this[index], index, this)
    }
  }
  return result
}

find

find 找到符合条件的项就返回，没有找到返回 undefined。

/**
 * @description: find简单实现
 * @param {Function} callback 回调函数 函数中接受（当前遍历的元素，当前遍历索引，当前遍历的数组）三个参数
 * @param {Any} thisArg 传入可以改变callback的this指向
 */
Array.prototype._find = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function')
  }
  let index = -1 // 索引
  const { length: len } = this // 原数组长度
  while (++index !== len) {
    if (callback.call(thisArg, this[index], index, this)) {
      return this[index] // 如果是findIndex则return index
    }
  }
}

some

some 和 find 除了返回值实现步骤一样

/**
 * @description: some简单实现
 * @param {Function} callback 回调函数 函数中接受（当前遍历的元素，当前遍历索引，当前遍历的数组）三个参数
 * @param {Any} thisArg 传入可以改变callback的this指向
 */
Array.prototype._some = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function')
  }
  let index = -1 // 索引
  const { length: len } = this // 原数组长度
  while (++index !== len) {
    if (callback.call(thisArg, this[index], index, this)) {
      return true
    }
  }
  return false
}

every

every 和 some 也差不多，只有全部符合条件才返回 true，有一项不符合就返回 false。

/**
 * @description: every简单实现
 * @param {Function} callback 回调函数 函数中接受（当前遍历的元素，当前遍历索引，当前遍历的数组）三个参数
 * @param {Any} thisArg 传入可以改变callback的this指向
 */
Array.prototype._every = function (callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function')
  }
  let index = -1 // 索引
  const { length: len } = this // 原数组长度
  while (++index !== len) {
    if (!callback.call(thisArg, this[index], index, this)) {
      return false
    }
  }
  return true
}