js-手寫數(shù)組常用方法的實(shí)現(xiàn)

前言

數(shù)組的api比較多犬庇,下面主要列舉一些常用的api實(shí)現(xiàn)喘鸟,主要是參考MDN上Array的Polyfill來實(shí)現(xiàn)的项乒。
MDN鏈接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

forEach

forEach主要用于遍歷數(shù)組

/**
 * @description: forEach簡單實(shí)現(xiàn)
 * @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受(當(dāng)前遍歷的元素肝劲,當(dāng)前遍歷索引,當(dāng)前遍歷的數(shù)組)三個參數(shù)
 * @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 // 數(shù)組長度
  while (++index !== len) {
    if (index in this) { // 數(shù)組下標(biāo)非連續(xù)的情況
      callback.call(thisArg, this[index], index, this)
    }
  }
}

filter

filter主要用于過濾數(shù)組

/**
 * @description: filter簡單實(shí)現(xiàn)
 * @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受(當(dāng)前遍歷的元素担敌,當(dāng)前遍歷索引摔敛,當(dāng)前遍歷的數(shù)組)三個參數(shù)
 * @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 // 索引、返回新數(shù)組索引
  const { length: len } = this // 原數(shù)組長度
  const result = [] // 返回的新數(shù)組
  while (++index !== len) {
    if (index in this) { // 數(shù)組下標(biāo)非連續(xù)的情況
      if (callback.call(thisArg, this[index], index, this)) {
        result[newIdx++] = this[index]
      }
    }
  }
  return result
}

map

map中callback必須要有返回值全封,結(jié)果返回一個由callback返回值組成的新數(shù)組马昙。

/**
 * @description: map簡單實(shí)現(xiàn)
 * @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受(當(dāng)前遍歷的元素,當(dāng)前遍歷索引刹悴,當(dāng)前遍歷的數(shù)組)三個參數(shù)
 * @param {Any} thisArg 傳入可以改變callback的this指向
 * @return {Array} 返回callback返回值組成的新數(shù)組
 */
 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 // 數(shù)組長度
  const result = [] // 返回的新數(shù)組
  while (++index !== len) {
    if (index in this) { // 數(shù)組下標(biāo)非連續(xù)的情況
      result[index] = callback.call(thisArg, this[index], index, this)
    }
  }
  return result
}

reduce

reduce相對比較復(fù)雜行楞,需要判斷是否傳入初始值,并且每次循環(huán)的結(jié)果要傳遞到下一次循環(huán)當(dāng)中颂跨。

/**
 * @description: reduce簡單實(shí)現(xiàn)
 * @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受(當(dāng)前遍歷的元素敢伸,當(dāng)前遍歷索引,當(dāng)前遍歷的數(shù)組)三個參數(shù)
 * @param {Any} thisArg 傳入可以改變callback的this指向
 */
Array.prototype._reduce = function (...args) {
  const callback = args[0] // 回調(diào)函數(shù)
  const { length: len } = this // 數(shù)組長度
  const { length: argLen } = args // 參數(shù)長度
  let index = -1 // 數(shù)組下標(biāo)
  let result

  if (typeof callback !== "function") {
    throw new TypeError(callback + ' is not a function')
  }
  
  // 存在第二個參數(shù)恒削,作為函數(shù)的初始值initialValue
  if (argLen >= 2) {
    result = args[1]
  } else {
    // 找到數(shù)組第一項(xiàng)的下標(biāo)
    while (index < len && !(index in this)) {
      index++
    }
    // 數(shù)組為空并且沒有初始值的情況
    if (index >= len) {
      throw new TypeError('Reduce of empty array with no initial value')
    }
    result = arr[index++]
  }
  while (++index !== len) {
    if (index in this) {
      // 將每次返回的結(jié)果傳入下一次循環(huán)
      result = callback(result, this[index], index, this)
    }
  }
  return result
}

find

find找到符合條件的項(xiàng)就返回,沒有找到返回undefined尾序。

/**
 * @description: find簡單實(shí)現(xiàn)
 * @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受(當(dāng)前遍歷的元素钓丰,當(dāng)前遍歷索引,當(dāng)前遍歷的數(shù)組)三個參數(shù)
 * @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 // 原數(shù)組長度
  while (++index !== len) {
    if (callback.call(thisArg, this[index], index, this)) {
      return this[index] // 如果是findIndex則return index
    }
  }
}

some

some和find除了返回值實(shí)現(xiàn)步驟一樣

/**
 * @description: some簡單實(shí)現(xiàn)
 * @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受(當(dāng)前遍歷的元素每币,當(dāng)前遍歷索引携丁,當(dāng)前遍歷的數(shù)組)三個參數(shù)
 * @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 // 原數(shù)組長度
  while (++index !== len) {
    if (callback.call(thisArg, this[index], index, this)) {
      return true
    }
  }
  return false
}

every

every和some也差不多,只有全部符合條件才返回true兰怠,有一項(xiàng)不符合就返回false梦鉴。

/**
 * @description: every簡單實(shí)現(xiàn)
 * @param {Function} callback 回調(diào)函數(shù) 函數(shù)中接受(當(dāng)前遍歷的元素,當(dāng)前遍歷索引揭保,當(dāng)前遍歷的數(shù)組)三個參數(shù)
 * @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 // 原數(shù)組長度
  while (++index !== len) {
    if (!callback.call(thisArg, this[index], index, this)) {
      return false
    }
  }
  return true
}

先寫這么多肥橙,后面再補(bǔ)充其他的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末秸侣,一起剝皮案震驚了整個濱河市存筏,隨后出現(xiàn)的幾起案子宠互,更是在濱河造成了極大的恐慌,老刑警劉巖椭坚,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件予跌,死亡現(xiàn)場離奇詭異,居然都是意外死亡善茎,警方通過查閱死者的電腦和手機(jī)券册,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來垂涯,“玉大人烁焙,你說我怎么就攤上這事〖遥” “怎么了考阱?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長鞠苟。 經(jīng)常有香客問我乞榨,道長,這世上最難降的妖魔是什么当娱? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任吃既,我火速辦了婚禮,結(jié)果婚禮上跨细,老公的妹妹穿的比我還像新娘鹦倚。我一直安慰自己,他們只是感情好冀惭,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布震叙。 她就那樣靜靜地躺著,像睡著了一般散休。 火紅的嫁衣襯著肌膚如雪媒楼。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天戚丸,我揣著相機(jī)與錄音划址,去河邊找鬼。 笑死限府,一個胖子當(dāng)著我的面吹牛夺颤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播胁勺,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼世澜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了姻几?” 一聲冷哼從身側(cè)響起宜狐,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤势告,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后抚恒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咱台,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片博脑。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡淘正,死狀恐怖癞谒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布车要,位于F島的核電站,受9級特大地震影響崭倘,放射性物質(zhì)發(fā)生泄漏翼岁。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一司光、第九天 我趴在偏房一處隱蔽的房頂上張望琅坡。 院中可真熱鬧,春花似錦残家、人聲如沸榆俺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽茴晋。三九已至,卻和暖如春回窘,著一層夾襖步出監(jiān)牢的瞬間晃跺,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工毫玖, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凌盯。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓付枫,卻偏偏與公主長得像,于是被迫代替她去往敵國和親驰怎。 傳聞我的和親對象是個殘疾皇子阐滩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 添加/移除首端或尾端數(shù)組元素 從數(shù)組的首端或尾端添加和刪除元素的方法: arr.push(...items) ——...
    AaronMIE閱讀 285評論 0 0
  • 前言 在開發(fā)中,數(shù)組的使用場景非常多县忌,平日中也涉及到很多數(shù)組的api/相關(guān)操作掂榔,一直也沒有對這塊內(nèi)容進(jìn)行一塊整理總...
    為光pig閱讀 637評論 0 9
  • 1. join() 功能: 將數(shù)組中的所有元素放入一個字符串继效。元素是通過指定的分隔符進(jìn)行分隔的,默認(rèn)使用’,'號分...
    樑丶閱讀 102評論 0 0
  • 數(shù)組 知識匯總 前置知識: 數(shù)組是一個有序的數(shù)據(jù)集合装获,可使用數(shù)組名稱和索引進(jìn)行訪問瑞信。 在JavaScript中數(shù)組...
    Daeeman閱讀 671評論 1 7
  • 我是黑夜里大雨紛飛的人啊 1 “又到一年六月,有人笑有人哭穴豫,有人歡樂有人憂愁凡简,有人驚喜有人失落,有的覺得收獲滿滿有...
    陌忘宇閱讀 8,547評論 28 53