Lodash學習筆記 - slice函數

lei___ 發布于2019-08-22 15:22 / 1339人閱讀

摘要：文檔地址中文文檔英文文檔源碼地址第一個函數是，不過源碼中依賴了，所以第一篇文章就從開始。這個函數的作用就是裁剪數組，從下標開始，到下標結束，但是并不包含，并將結果作為一個數組返回。并且注明了這個方法用于代替來確保數組正確返回。

百忙之中（閑來無事）想抽點時間好好讀一下源碼，于是就選了Lodash來寫一個系列罷。讀源碼順序就按照loadsh文檔順序來。

文檔地址：中文文檔?? 英文文檔
源碼地址：gayhub

第一個函數是chunk，不過源碼中chunk依賴了slice，所以第一篇文章就從slice開始。

    _.slice(array, [start=0], [end=array.length])

這個函數的作用就是裁剪數組array，從start下標開始，到end下標結束，但是并不包含end，并將結果作為一個數組返回。并且注明了：

Note: 這個方法用于代替 Array#slice 來確保數組正確返回。

看起來和原生javascript的slice沒有區別，那為什么要重寫這個函數呢？有以下幾個原因：

比原生slice更快，測試地址，結果如圖：

有更好的兼容性，IE < 9 時無法轉化偽數組對象（例如DOM），出處

下面我們來看一下具體的實現，一行行來看代碼：

首先是數組array是否合法的判斷:

let length = array == null ? 0 : array.length
if (!length) {
    return []
}

開始位置start和結束位置end默認值：

start = start == null ? 0 : start
end = end === undefined ? length : end

支持負數start，以及start合法性檢測：超出數組長度即為0，否則從右往左數

if (start < 0) {
    start = -start > length ? 0 : (length + start)
}

end合法性檢測：超出數組長度即為數組長度
如果end為負數，則從右往左數

end = end > length ? length : end
if (end < 0) {
    end += length
}

數組裁剪后的長度，這里為了速度所以使用了>>>來向下取整
start向下取整

length = start > end ? 0 : ((end - start) >>> 0)
start >>>= 0

通過循環來淺拷貝數組的元素，最終返回

let index = -1
const result = new Array(length)
while (++index < length) {
    result[index] = array[index + start]
}
return result

最后貼個源碼：

/**
 * Creates a slice of `array` from `start` up to, but not including, `end`.
 *
 * **Note:** This method is used instead of
 * [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are
 * returned.
 *
 * @since 3.0.0
 * @category Array
 * @param {Array} array The array to slice.
 * @param {number} [start=0] The start position. A negative index will be treated as an offset from the end. 
 * @param {number} [end=array.length] The end position. A negative index will be treated as an offset from the end. 
 * @returns {Array} Returns the slice of `array`.
 */
function slice(array, start, end) {
  let length = array == null ? 0 : array.length
  if (!length) {
    return []
  }
  start = start == null ? 0 : start
  end = end === undefined ? length : end

  if (start < 0) {
    start = -start > length ? 0 : (length + start)
  }
  end = end > length ? length : end
  if (end < 0) {
    end += length
  }
  length = start > end ? 0 : ((end - start) >>> 0)
  start >>>= 0

  let index = -1
  const result = new Array(length)
  while (++index < length) {
    result[index] = array[index + start]
  }
  return result
}

export default slice

GPU云服務器云服務器 slice函數學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93409.html

Lodash學習筆記 - chunk函數

摘要：文檔地址中文文檔英文文檔源碼地址將數組拆分成多個長度的區塊，并將這些區塊組成一個新數組。如果無法被分割成全部等長的區塊，那么最后剩余的元素將組成一個區塊。百忙之中（閑來無事）想抽點時間好好讀一下源碼，于是就選了Lodash來寫一個系列罷。讀源碼順序就按照loadsh文檔順序來。文檔地址：中文文檔?? 英文文檔源碼地址：gayhub _.chunk(array, [size...

DrizzleX 2019-08-22 15:24 評論0 收藏0
學習筆記: JS數組

摘要：數組元素甚至可以是對象或其它數組。它執行的是淺拷貝，這意味著如果數組元素是對象，兩個數組都指向相同的對象，對新數組中的對象修改，會在舊的數組的相同對象中反應出來。 JS中的數組是弱類型的，數組中可以含有不同類型的元素。數組元素甚至可以是對象或其它數組。JS引擎一般會優化數組，按索引訪問數組常常比訪問一般對象屬性明顯迅速。數組長度范圍 from 0 to 4,294,967,295(2^...

archieyang 2019-08-20 16:32 評論0 收藏0
JavaScript 數組分組的實現

摘要：今天回答了的問題生產嵌套數組也就是對數組分組更好的寫法。實現像這種，目標數組長度和原數組長度不一致的情況，函數式寫法很容易想到函數。小結數組分組是一個很簡單的問題，有很多種方法來處理。今天回答了 @_bleach 的問題：JS生產嵌套數組（也就是對數組分組）更好的寫法。回答的過程中對 lodash _.chunk() 產生了好奇，所以分析了一下它的源碼，再加上我自己的解決方案，收集...

Coly 2019-08-20 12:14 評論0 收藏0
Lodash源碼講解-chunk函數

摘要：原文首發于源碼講解這是我們閱讀源碼的第篇博客，在這篇文章里我們來學習一下的方法。好啦，關于函數暫時就先講到這里啦。與惡龍纏斗過久自身亦成為惡龍凝視深淵過久深淵將回以凝視。原文首發于Lodash源碼講解這是我們閱讀Lodash源碼的第2篇博客，在這篇文章里我們來學習一下Lodash的chunk方法。 chunk函數內部依賴其他的函數，依賴的函數如下所示； slice 按照慣例，我們先...

ISherry 2019-08-21 11:59 評論0 收藏0
《你不知道的javascript》筆記_對象&原型

摘要：上一篇你不知道的筆記寫在前面這是年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響年是向上的一年在新的城市穩定連續堅持健身三個月早睡早起游戲時間大大縮減，學會生活。上一篇：《你不知道的javascript》筆記_this 寫在前面這是2019年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響2018年是向上的一年：在新的城市穩定、...

seasonley 2019-08-23 14:32 評論0 收藏0