摘要:文檔地址中文文檔英文文檔源碼地址第一個(gè)函數(shù)是,不過(guò)源碼中依賴了,所以第一篇文章就從開(kāi)始。這個(gè)函數(shù)的作用就是裁剪數(shù)組,從下標(biāo)開(kāi)始,到下標(biāo)結(jié)束,但是并不包含,并將結(jié)果作為一個(gè)數(shù)組返回。并且注明了這個(gè)方法用于代替來(lái)確保數(shù)組正確返回。
百忙之中(閑來(lái)無(wú)事)想抽點(diǎn)時(shí)間好好讀一下源碼,于是就選了Lodash來(lái)寫一個(gè)系列罷。讀源碼順序就按照l(shuí)oadsh文檔順序來(lái)。
文檔地址:中文文檔?? 英文文檔
源碼地址:gayhub
第一個(gè)函數(shù)是chunk,不過(guò)源碼中chunk依賴了slice,所以第一篇文章就從slice開(kāi)始。
_.slice(array, [start=0], [end=array.length])
這個(gè)函數(shù)的作用就是裁剪數(shù)組array,從start下標(biāo)開(kāi)始,到end下標(biāo)結(jié)束,但是并不包含end,并將結(jié)果作為一個(gè)數(shù)組返回。并且注明了:
Note: 這個(gè)方法用于代替 Array#slice 來(lái)確保數(shù)組正確返回。
看起來(lái)和原生javascript的slice沒(méi)有區(qū)別,那為什么要重寫這個(gè)函數(shù)呢?有以下幾個(gè)原因:
比原生slice更快,測(cè)試地址,結(jié)果如圖:
有更好的兼容性,IE < 9 時(shí)無(wú)法轉(zhuǎn)化偽數(shù)組對(duì)象(例如DOM),出處
下面我們來(lái)看一下具體的實(shí)現(xiàn),一行行來(lái)看代碼:
首先是數(shù)組array是否合法的判斷:
let length = array == null ? 0 : array.length if (!length) { return [] }
開(kāi)始位置start和結(jié)束位置end默認(rèn)值:
start = start == null ? 0 : start end = end === undefined ? length : end
支持負(fù)數(shù)start,以及start合法性檢測(cè):超出數(shù)組長(zhǎng)度即為0,否則從右往左數(shù)
if (start < 0) { start = -start > length ? 0 : (length + start) }
end合法性檢測(cè):超出數(shù)組長(zhǎng)度即為數(shù)組長(zhǎng)度
如果end為負(fù)數(shù),則從右往左數(shù)
end = end > length ? length : end if (end < 0) { end += length }
數(shù)組裁剪后的長(zhǎng)度,這里為了速度所以使用了>>>來(lái)向下取整
start向下取整
length = start > end ? 0 : ((end - start) >>> 0) start >>>= 0
通過(guò)循環(huán)來(lái)淺拷貝數(shù)組的元素,最終返回
let index = -1 const result = new Array(length) while (++index < length) { result[index] = array[index + start] } return result
最后貼個(gè)源碼:
/** * 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
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/93409.html
摘要:文檔地址中文文檔英文文檔源碼地址將數(shù)組拆分成多個(gè)長(zhǎng)度的區(qū)塊,并將這些區(qū)塊組成一個(gè)新數(shù)組。如果無(wú)法被分割成全部等長(zhǎng)的區(qū)塊,那么最后剩余的元素將組成一個(gè)區(qū)塊。 百忙之中(閑來(lái)無(wú)事)想抽點(diǎn)時(shí)間好好讀一下源碼,于是就選了Lodash來(lái)寫一個(gè)系列罷。讀源碼順序就按照l(shuí)oadsh文檔順序來(lái)。 文檔地址:中文文檔?? 英文文檔源碼地址:gayhub _.chunk(array, [size...
摘要:數(shù)組元素甚至可以是對(duì)象或其它數(shù)組。它執(zhí)行的是淺拷貝,這意味著如果數(shù)組元素是對(duì)象,兩個(gè)數(shù)組都指向相同的對(duì)象,對(duì)新數(shù)組中的對(duì)象修改,會(huì)在舊的數(shù)組的相同對(duì)象中反應(yīng)出來(lái)。 JS中的數(shù)組是弱類型的,數(shù)組中可以含有不同類型的元素。數(shù)組元素甚至可以是對(duì)象或其它數(shù)組。JS引擎一般會(huì)優(yōu)化數(shù)組,按索引訪問(wèn)數(shù)組常常比訪問(wèn)一般對(duì)象屬性明顯迅速。數(shù)組長(zhǎng)度范圍 from 0 to 4,294,967,295(2^...
摘要:今天回答了的問(wèn)題生產(chǎn)嵌套數(shù)組也就是對(duì)數(shù)組分組更好的寫法。實(shí)現(xiàn)像這種,目標(biāo)數(shù)組長(zhǎng)度和原數(shù)組長(zhǎng)度不一致的情況,函數(shù)式寫法很容易想到函數(shù)。小結(jié)數(shù)組分組是一個(gè)很簡(jiǎn)單的問(wèn)題,有很多種方法來(lái)處理。 今天回答了 @_bleach 的問(wèn)題:JS生產(chǎn)嵌套數(shù)組(也就是對(duì)數(shù)組分組)更好的寫法。回答的過(guò)程中對(duì) lodash _.chunk() 產(chǎn)生了好奇,所以分析了一下它的源碼,再加上我自己的解決方案,收集...
摘要:原文首發(fā)于源碼講解這是我們閱讀源碼的第篇博客,在這篇文章里我們來(lái)學(xué)習(xí)一下的方法。好啦,關(guān)于函數(shù)暫時(shí)就先講到這里啦。與惡龍纏斗過(guò)久自身亦成為惡龍凝視深淵過(guò)久深淵將回以凝視。 原文首發(fā)于Lodash源碼講解 這是我們閱讀Lodash源碼的第2篇博客,在這篇文章里我們來(lái)學(xué)習(xí)一下Lodash的chunk方法。 chunk函數(shù)內(nèi)部依賴其他的函數(shù),依賴的函數(shù)如下所示; slice 按照慣例,我們先...
摘要:上一篇你不知道的筆記寫在前面這是年第一篇博客,回顧去年年初列的學(xué)習(xí)清單,發(fā)現(xiàn)僅有部分完成了。當(dāng)然,這并不影響年是向上的一年在新的城市穩(wěn)定連續(xù)堅(jiān)持健身三個(gè)月早睡早起游戲時(shí)間大大縮減,學(xué)會(huì)生活。 上一篇:《你不知道的javascript》筆記_this 寫在前面 這是2019年第一篇博客,回顧去年年初列的學(xué)習(xí)清單,發(fā)現(xiàn)僅有部分完成了。當(dāng)然,這并不影響2018年是向上的一年:在新的城市穩(wěn)定、...
閱讀 3716·2021-11-11 16:55
閱讀 1658·2021-10-08 10:04
閱讀 3593·2021-09-27 13:36
閱讀 2796·2019-08-30 15:53
閱讀 1874·2019-08-30 11:17
閱讀 1276·2019-08-29 16:55
閱讀 2115·2019-08-29 13:57
閱讀 2531·2019-08-29 13:13