Lodash源碼分析-drop.js

前言

本系列使用 lodash 4.17.4版本

此方法對slice方法進行了引用

本文章不對slice方法進行詳細描述，詳細內容請參考咱們另外一位小組成員的文章（連接在文章末尾）。

正文

源代碼

import slice from './slice.js'

/**
 * Creates a slice of `array` with `n` elements dropped from the beginning.
 *
 * @since 0.5.0
 * @category Array
 * @param {Array} array The array to query.
 * @param {number} [n=1] The number of elements to drop.
 * @returns {Array} Returns the slice of `array`.
 * @example
 *
 * drop([1, 2, 3])
 * // => [2, 3]
 *
 * drop([1, 2, 3], 2)
 * // => [3]
 *
 * drop([1, 2, 3], 5)
 * // => []
 *
 * drop([1, 2, 3], 0)
 * // => [1, 2, 3]
 */
function drop(array, n=1) {
  const length = array == null ? 0 : array.length
  return length
    ? slice(array, n < 0 ? 0 : n, length)
    : []
}

export default drop
複製代碼

解析

參數

該方法接受兩個參數：

第一個參數是一個將被截取的數組；

第二個參數是截取的起始位置的索引。

返回值

該方法返回一個被截取後的數組。

方法解析

該方法首先會聲明一個局部變量length來存放第一個數組參數的長度，若爲空數組則長度爲0。

以後判斷變量length是否爲真true（在這裏變量length會被轉換爲布爾Boolean類型，數字類型的值在爲0時會轉換爲false，其餘值會轉換爲true），若第一個數組參數不是空數組，則會爲真，不然爲假。若length爲真，會引用slice方法從索引值爲第二個參數的值的位置開始截取數組（在這裏若沒有傳入第二個參數則會默認其爲1，若傳入了第二個參數也會對其進行一下判斷，若第二個參數小於0則開始截取的索引值爲0，不然爲傳入的第二個參數的值），並將該截取後的新數組放回給調用該方法的地方；若length爲假，則會返回一個空數組給調用該方法的地方。

注： 該方法沒有對傳入的第一個參數的參數類型進行判斷，因此第一個參數爲其餘類型的值時也不會拋出錯誤。

但在除數組和字符串類型之外，其餘的類型由於沒有length這個屬性，因此其餘類型長度判斷的值會爲undefined，在slice方法內部，若傳入的第一個參數爲假（undefined轉換爲布爾值爲假false），直接會返回一個空數組。因此除數組和字符串之外，其餘類型的值做爲第一個參數傳入該方法會直接獲得一個空數組。

若傳入的第一個參數爲字符串時，字符串是有length屬性的，即字符串的長度。由於字符串可看做是由一個個字符所組成的數組，因此字符串會先被轉換成一個個字符組成的數組，而後被當作數組進行數組的截取操做。

示例

drop([1, 2, 3, 4, 5])
--> [2, 3, 4, 5]
drop([1, 2, 3, 4, 5], 3)
--> [4, 5]
drop([1, 2, 3, 4, 5], 7)
--> []
drop([1, 2, 3, 4, 5], -2)
--> [1, 2, 3, 4, 5]
drop("I love Javascript!")
--> [" ", "l", "o", "v", "e", " ", "J", "a", "v", "a", "s", "c", "r", "i", "p", "t", "!"]
drop(3)
--> []
drop({a: 1, b: 2, c: 3})
--> []
drop(true)
--> []
drop(null)
--> []
drop(undefined)
--> []
複製代碼

總結

該方法傳入一個數組和截取起始的索引值（索引值非必須，默認爲1），返回一個被截取後的新數組。

相關連接：

每日源碼分析 - lodash(slice.js)

每日源碼分析 - lodash(debounce.js和throttle.js)

本文章來源於午安煎餅計劃Web組 - 殘陽