JavaScript實用庫:Lodash源碼數組函數解析(八)initial、join、last、nth、baseNth、(isIndex)

本章的內容主要是:initial、join、last、nth、baseNth、(isIndex)


在這裏插入圖片描述

Lodash是一個非常好用方便的JavaScript的工具庫,使得我們對數據處理能夠更加得心應手

接下來我要對Lodash的源碼進行剖析學習
每天幾個小方法,跟着我一起來學lodash吧


1、_.initial(array)

根據中文文檔介紹,該方法的功能是去除掉數組中的最後一個元素。

是不是有種似曾相識的感覺,對,這個功能就像是簡化版的dropRightdropRight的相關介紹請看:JavaScript實用庫:Lodash源碼數組函數解析(四)dropRight、dropWhile、dropRightWhile、baseWhile

我們來看官方給出的例子:
在這裏插入圖片描述例子就不說了,挺容易懂的
我們接下來看源碼:

function initial(array) {
  //獲取到數組的長度
  var length = array == null ? 0 : array.length;
  //數組不爲0則輸出切片的數組
  //切片的位置是從索引0到倒數第一個索引也就是-1
  return length ? baseSlice(array, 0, -1) : [];
}

module.exports = initial;

源碼也和我們的dropRight相似,區別就是切片的位置已經定死了,就是去除最後一個元素

需要注意的一點是,它似乎不會改變原數組,只會返回一個新的數組


2、_.join(array, [separator=’,’])

這個方法用官方的解釋是:將 array 中的所有元素轉換爲由 separator 分隔的字符串。
下面來看官方給出的例子:
在這裏插入圖片描述

例子中第二個參數是“~”,於是輸出的數據是三個元素用該符號分隔的字符串

接下來我們看源碼:

/** Used for built-in method references. */
var arrayProto = Array.prototype;

/* Built-in method references for those with the same name as other `lodash` methods. */
//避免名稱衝突
var nativeJoin = arrayProto.join;

function join(array, separator) {
  return array == null ? '' : nativeJoin.call(array, separator);
}

module.exports = join;

可以看到,該方法就是基於JavaScript的內置方法實現的,知道內置方法join的就看得懂源碼了,這裏就不多說了


3、_.last(array)

根據中文文檔介紹,該方法就是可以取出數組中的最後一個元素
這個有和剛剛的initial相似,只不過initial是取出除最後一個元素外的所有元素,是相反的

我們來看官方給出的例子:
在這裏插入圖片描述

ok,就是取出最後一個元素

接下來直接看源碼:

function last(array) {
  //獲取數組長度
  var length = array == null ? 0 : array.length;
  //輸出最後一個元素
  return length ? array[length - 1] : undefined;
}

module.exports = last;

我的猜測錯了,預先以爲要使用切片函數baseSlice,但是看到源碼後恍然大悟,我只需要一個元素,可以直接輸出呀


4、_.nth(array, [n=0])

根據文檔介紹,就是獲取數組第n個元素,不過從n的初始值看來,應該是輸入取出元素的索引
下面來看例子:
在這裏插入圖片描述

果然要n的值爲索引
接下來看源碼:

function nth(array, n) {
  //數組不爲空則輸出第一個表達式
  //數組爲空則輸出undefined
  return (array && array.length) ? baseNth(array, toInteger(n)) : undefined;
}

module.exports = nth;

這個方法是基於核心函數baseNth實現的
我們接下來看它的源碼


5**_.baseNth**

老樣子,核心函數沒有文檔介紹,我們看源碼:

function baseNth(array, n) {
  //獲取數組長度
  var length = array.length;
  //數組爲空跳出函數
  if (!length) {
    return;
  }
  //n如果小於0進行索引的正值轉化
  n += n < 0 ? length : 0;
  //isIndex函數的功能是檢測是不是一個有效的索引,是則輸出true,反之false
  //按照常理應該都是真值,所以輸出array[n]
  return isIndex(n, length) ? array[n] : undefined;
}

module.exports = baseNth;

有人就會說,這麼麻煩?怎麼不直接輸出array[n]?
但是看到了,在這個過程中處理了很多事,排除掉數組爲空,排除掉n沒有傳入值,n的值小於0,這些都是要考慮進來的,這就是一個庫的嚴謹性


今天就到這裏了,今天源碼還好,明天繼續

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章