美文网首页
js-手写数组常用方法的实现

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

作者: _stan | 来源:发表于2021-06-07 19:21 被阅读0次

    前言

    数组的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
    }
    

    先写这么多,后面再补充其他的。

    相关文章

      网友评论

          本文标题:js-手写数组常用方法的实现

          本文链接:https://www.haomeiwen.com/subject/rklleltx.html