Lodash 個人使用文件

語言: CN / TW / HK

Lodash 簡介

Lodash 是一個一致性、模組化、高效能的 JavaScript 實用工具庫。

Lodash 遵循 MIT 開源協議釋出,並且支援最新的執行環境。 檢視各個構件版本的區別並選擇一個適合你的版本。

該筆記為記錄比較常用的方法,一些可通過 ES6 方式實現的,以及不是很重要的都進行了跳過和篩選,為個人使用記錄文件。

個人筆記文件地址:tuimao233.gitee.io/mao-blog/no…

安裝

瀏覽器環境:

<script src="lodash.js"></script>
複製程式碼

通過 npm:

$ npm i -g npm
$ npm i --save lodash
複製程式碼

Node.js:

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');
複製程式碼

為什麼是 Lodash ?

Lodash 通過降低 array、number、objects、string 等等的使用難度從而讓 JavaScript 變得更簡單。 Lodash 的模組化方法 非常適用於:

  • 遍歷 array、object 和 string
  • 對值進行操作和檢測
  • 建立符合功能的函式

補充工具

  • futil-js 是一套用來補足 lodash 的實用工具集。

陣列類方法

陣列分割(chunk)

將陣列(array)拆分成多個 size 長度的區塊,並將這些區塊組成一個新陣列。 如果array 無法被分割成全部等長的區塊,那麼最後剩餘的元素將組成一個區塊。

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]
複製程式碼

過濾非真值(compact)

建立一個新陣列,包含原陣列中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被認為是“假值”。

_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]
複製程式碼

值與陣列連結(concat)

建立一個新陣列,將array與任何陣列 或 值連線在一起。

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);
// => [1, 2, 3, [4]]
 
console.log(array);
// => [1]
複製程式碼

對陣列值進行過濾(difference)

建立一個具有唯一array值的陣列,每個值不包含在其他給定的陣列中。

_.difference([3, 2, 1], [4, 2]);
// => [3, 1]
複製程式碼

接收接受一個 iteratee (注:迭代器),呼叫arrayvalues 中的每個元素以比較產生值。

_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
// => [3.1, 1.3]
 
// The `_.property` iteratee shorthand.
_.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
// => [{ 'x': 2 }]
複製程式碼

接受一個 comparator (注:比較器),呼叫比較arrayvalues中的元素。 結果值是從第一陣列中選擇。

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
 
_.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
// => [{ 'x': 2, 'y': 1 }]
複製程式碼

陣列切片(drop)

建立一個切片陣列,去除array前面的n個元素。(n預設值為1。)

_.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]
複製程式碼

建立一個切片陣列,去除array尾部的n個元素。(n預設值為1。)

_.dropRight([1, 2, 3]);
// => [1, 2]
 
_.dropRight([1, 2, 3], 2);
// => [1]
 
_.dropRight([1, 2, 3], 5);
// => []
 
_.dropRight([1, 2, 3], 0);
// => [1, 2, 3]
複製程式碼

陣列填充(fill)

使用 value 值來填充(替換) array,從start位置開始, 到end位置結束(但不包含end位置)。

var array = [1, 2, 3];
 
_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']
複製程式碼

代替方法(array.fill)

var array = [1, 2, 3].fill('a')
console.log(array);
// => ['a', 'a', 'a']
複製程式碼

陣列降維(flatten)

減少一級array巢狀深度。

_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]
複製程式碼

array遞迴為一維陣列。

_.flattenDeep([1, [2, [3, [4]], 5]]);
// => [1, 2, 3, 4, 5]
複製程式碼

根據 depth 遞迴減少 array 的巢狀層級

var array = [1, [2, [3, [4]], 5]];
 
_.flattenDepth(array, 1);
// => [1, 2, [3, [4]], 5]
 
_.flattenDepth(array, 2);
// => [1, 2, 3, [4], 5]
複製程式碼

替代方案(flat or flatMap)

// flat: 將多維陣列轉換為低維陣列
const arr = [1, 2, 3, 4, [5, 6, [7, 8, 9]]]
// 引數為轉換深度, 是一個數字
console.log(arr.flat(2))

// flatMap: 遍歷如果返回的是多維陣列, 轉換為低維陣列
const arr = [1,2,3,4]
const result = arr.flatMap(item=> [item*10])
複製程式碼

二維陣列轉換為物件(fromPairs)

根據二維陣列返回一個由鍵值對pairs構成的物件。

_.fromPairs([['fred', 30], ['barney', 40]]);
// => { 'fred': 30, 'barney': 40 }
複製程式碼

代替方案(Object.fromEntries)

const result = Object.fromEntries([
  ['name', '尚矽谷'],
  ['xueke', 'Java,大資料,前端,雲端計算']
])
console.log(result) // 0> {name:xueke, 尚矽谷:Java...}

const m = new Map()
m.set('name', 'ATGUIGU')
const result2 = Object.fromEntries(m)
console.log(result2) // -> name:ATGUIGU

// Object.entries (ES8)
const arr = Object.entries({
  name: '尚矽谷'
})
console.log(arr)
複製程式碼

相等性比較唯一陣列(intersection)

建立唯一值的陣列,這個陣列包含所有給定陣列都包含的元素,使用SameValueZero進行相等性比較。(注:可以理解為給定陣列的交集)

_.intersection([2, 1], [4, 2], [1, 2]);
// => [2]
複製程式碼

移除指定元素值(pull)

移除陣列array中所有和給定值相等的元素,使用SameValueZero 進行全等比較。

var array = [1, 2, 3, 1, 2, 3];
_.pull(array, 2, 3);
console.log(array);
// => [1, 1]
複製程式碼

這個方法類似_.pull,區別是這個方法接收一個要移除值的陣列。

var array = [1, 2, 3, 1, 2, 3];
_.pullAll(array, [2, 3]);
console.log(array);
// => [1, 1]
複製程式碼

根據索引移除元素(pullAt)

根據索引 indexes,移除array中對應的元素,並返回被移除元素的陣列。

var array = [5, 10, 15, 20];
var evens = _.pullAt(array, 1, 3);
 
console.log(array);
// => [5, 15]
 
console.log(evens);
// => [10, 20]
複製程式碼

替代方案(array.splice)

排序並去重(sortedUniq)

這個方法類似_.uniq,除了它會優化排序陣列。

_.sortedUniq([1, 1, 2]);
// => [1, 2]
複製程式碼

陣列去重(uniq)

建立一個去重後的array陣列副本。使用了SameValueZero 做等值比較。只有第一次出現的元素才會被保留。

_.uniq([2, 1, 2]);
// => [2, 1]
複製程式碼

集合類方法

檢測是否都為真(every)

通過 predicate(斷言函式) 檢查 collection(集合)中的 所有 元素是否都返回真值。一旦 predicate(斷言函式) 返回假值,迭代就馬上停止。predicate(斷言函式)呼叫三個引數: (value, index|key, collection)

_.every([true, 1, null, 'yes'], Boolean);
// => false
 
var users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred',   'age': 40, 'active': false }
];
 
// The `_.matches` iteratee shorthand.
_.every(users, { 'user': 'barney', 'active': false });
// => false
 
// The `_.matchesProperty` iteratee shorthand.
_.every(users, ['active', false]);
// => true
 
// The `_.property` iteratee shorthand.
_.every(users, 'active');
// => false
複製程式碼

過濾集合(filter)

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];
_.filter(users, function(o) { return !o.active; });
// => objects for ['fred']
複製程式碼

遍歷集合(forEach)

_([1, 2]).forEach(function(value) {
  console.log(value);
});
// => Logs `1` then `2`.
 
_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key);
});
// => Logs 'a' then 'b' (iteration order is not guaranteed).
複製程式碼

檢測元素是否存在(includes)

檢查 value(值) 是否在 collection(集合) 中。如果 collection(集合)是一個字串,那麼檢查 value(值,子字串) 是否在字串中, 否則使用SameValueZero 做等值比較。 如果指定 fromIndex 是負數,那麼從 collection(集合) 的結尾開始檢索。

_.includes([1, 2, 3], 1);
// => true
 
_.includes([1, 2, 3], 1, 2);
// => false
 
_.includes({ 'user': 'fred', 'age': 40 }, 'fred');
// => true
 
_.includes('pebbles', 'eb');
// => true
複製程式碼

遍歷並返回對映(map)

建立一個數組, value(值) 是 iteratee(迭代函式)遍歷 collection(集合)中的每個元素後返回的結果。 iteratee(迭代函式)呼叫3個引數: (value, index|key, collection).

function square(n) {
  return n * n;
}
 
_.map([4, 8], square);
// => [16, 64]
 
_.map({ 'a': 4, 'b': 8 }, square);
// => [16, 64] (iteration order is not guaranteed)
 
var users = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];
 
// The `_.property` iteratee shorthand.
_.map(users, 'user');
// => ['barney', 'fred']
複製程式碼

遍歷並返回統計(reduce)

壓縮 collection(集合)為一個值,通過 iteratee(迭代函式)遍歷 collection(集合)中的每個元素,每次返回的值會作為下一次迭代使用(注:作為iteratee(迭代函式)的第一個引數使用)。 如果沒有提供 accumulator,則 collection(集合)中的第一個元素作為初始值。(注:accumulator引數在第一次迭代的時候作為iteratee(迭代函式)第一個引數使用。) iteratee 呼叫4個引數: (accumulator, value, index|key, collection).

_.reduce([1, 2], function(sum, n) {
  return sum + n;
}, 0);
// => 3
 
_.reduce({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {
  (result[value] || (result[value] = [])).push(key);
  return result;
}, {});
// => { '1': ['a', 'c'], '2': ['b'] } (無法保證遍歷的順序)
複製程式碼

返回隨機元素值(sample)

collection(集合)中獲得一個隨機元素。

_.sample([1, 2, 3, 4]);
// => 2
複製程式碼

打亂元素順序(shuffle)

建立一個被打亂值的集合。 使用Fisher-Yates shuffle 版本。

_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]
複製程式碼

返回集合長度(size)

返回collection(集合)的長度,如果集合是類陣列或字串,返回其 length ;如果集合是物件,返回其可列舉屬性的個數。

_.size([1, 2, 3]);
// => 3
 
_.size({ 'a': 1, 'b': 2 });
// => 2
 
_.size('pebbles');
// => 7
複製程式碼

函式類方法

限定:n次後呼叫(after)

_.before的反向函式;此方法建立一個函式,當他被呼叫n或更多次之後將馬上觸發func

var saves = ['profile', 'settings'];
 
var done = _.after(saves.length, function() {
  console.log('done saving!');
});
 
_.forEach(saves, function(type) {
  asyncSave({ 'type': type, 'complete': done });
});
複製程式碼

限制引數(ary)

建立一個呼叫func的函式。呼叫func時最多接受 n個引數,忽略多出的引數。

_.map(['6', '8', '10'], _.ary(parseInt, 1));
// => [6, 8, 10]
複製程式碼

限定:超n次後不呼叫(before)

建立一個呼叫func的函式,通過this繫結和建立函式的引數呼叫func,呼叫次數不超過 n 次。 之後再呼叫這個函式,將返回一次最後呼叫func的結果。

jQuery(element).on('click', _.before(5, addContactToList));
// => 允許將最多4個聯絡人新增到列表中
複製程式碼

引數量返回結果或函式(curry)

建立一個函式,該函式接收 func 的引數,要麼呼叫func返回的結果,如果 func 所需引數已經提供,則直接返回 func 所執行的結果。或返回一個函式,接受餘下的func 引數的函式,可以使用 func.length 強制需要累積的引數個數。

var abc = function(a, b, c) {
  return [a, b, c];
};
 
var curried = _.curry(abc);
 
curried(1)(2)(3);
// => [1, 2, 3]
 
curried(1, 2)(3);
// => [1, 2, 3]
 
curried(1, 2, 3);
// => [1, 2, 3]
 
// Curried with placeholders.
curried(1)(_, 3)(2);
// => [1, 2, 3]
複製程式碼

防抖動函式(debounce)

建立一個 debounced(防抖動)函式,該函式會從上一次被呼叫後,延遲 wait 毫秒後呼叫 func 方法。 debounced(防抖動)函式提供一個 cancel 方法取消延遲的函式呼叫以及 flush 方法立即呼叫。 可以提供一個 options(選項) 物件決定如何呼叫 func 方法,options.leading 與|或 options.trailing 決定延遲前後如何觸發(注:是 先呼叫後等待 還是 先等待後呼叫)。 func 呼叫時會傳入最後一次提供給 debounced(防抖動)函式 的引數。 後續呼叫的 debounced(防抖動)函式返回是最後一次 func 呼叫的結果。

// 避免視窗在變動時出現昂貴的計算開銷。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 當點選時 `sendMail` 隨後就被呼叫。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
 
// 確保 `batchLog` 呼叫1次之後,1秒內會被觸發。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
 
// 取消一個 trailing 的防抖動呼叫
jQuery(window).on('popstate', debounced.cancel);
複製程式碼

限定:堆疊清空後(defer)

推遲呼叫func,直到當前堆疊清理完畢。 呼叫時,任何附加的引數會傳給func

_.defer(function(text) {
  console.log(text);
}, 'deferred');
// => 一毫秒或更久一些輸出 'deferred'。
複製程式碼

快取返回內容(memoize)

建立一個會快取 func 結果的函式。 如果提供了 resolver ,就用 resolver 的返回值作為 key 快取函式的結果。 預設情況下用第一個引數作為快取的 key。 func 在呼叫時 this 會繫結在快取函式上。

var object = { 'a': 1, 'b': 2 };
var other = { 'c': 3, 'd': 4 };
 
var values = _.memoize(_.values);
values(object);
// => [1, 2]
 
values(other);
// => [3, 4]
 
object.a = 2;
values(object);
// => [1, 2]
 
// 修改結果快取。
values.cache.set(object, ['a', 'b']);
values(object);
// => ['a', 'b']
 
// 替換 `_.memoize.Cache`。
_.memoize.Cache = WeakMap;
複製程式碼

函式結果取反(negate)

建立一個針對斷言函式 func 結果取反的函式。 func 斷言函式被呼叫的時候,this 繫結到建立的函式,並傳入對應引數。

function isEven(n) {
  return n % 2 == 0;
}
 
_.filter([1, 2, 3, 4, 5, 6], _.negate(isEven));
// => [1, 3, 5]
複製程式碼

僅呼叫一次(once)

建立一個只能呼叫 func 一次的函式。 重複呼叫返回第一次呼叫的結果。 func 呼叫時, this 繫結到建立的函式,並傳入對應引數。

var initialize = _.once(createApplication);
initialize();
initialize();
// `initialize` 只能呼叫 `createApplication` 一次。
複製程式碼

頻率節流函式(throttle)

建立一個節流函式,在 wait 秒內最多執行 func 一次的函式。 該函式提供一個 cancel 方法取消延遲的函式呼叫以及 flush 方法立即呼叫。 可以提供一個 options 物件決定如何呼叫 func 方法, options.leading 與|或 options.trailing 決定 wait 前後如何觸發。 func 會傳入最後一次傳入的引數給這個函式。 隨後呼叫的函式返回是最後一次 func 呼叫的結果。

// 避免在滾動時過分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
 
// 點選後就呼叫 `renewToken`,但5分鐘內超過1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
 
// 取消一個 trailing 的節流呼叫。
jQuery(window).on('popstate', throttled.cancel);
複製程式碼

語言類方法

強制轉換陣列(castArray)

如果 value 不是陣列, 那麼強制轉為陣列。

_.castArray(1);
// => [1]
 
_.castArray({ 'a': 1 });
// => [{ 'a': 1 }]
 
_.castArray('abc');
// => ['abc']
 
_.castArray(null);
// => [null]
 
_.castArray(undefined);
// => [undefined]
 
_.castArray();
// => []
 
var array = [1, 2, 3];
console.log(_.castArray(array) === array);
// => true
複製程式碼

數值淺拷貝(clone)

建立一個 value 的淺拷貝。

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true
複製程式碼

數值深拷貝(cloneDeep)

這個方法類似_.clone,除了它會遞迴拷貝 value。(注:也叫深拷貝)。

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
複製程式碼

斷言檢測值(conformsTo)

var object = { 'a': 1, 'b': 2 };
 
_.conformsTo(object, { 'b': function(n) { return n > 1; } });
// => true
 
_.conformsTo(object, { 'b': function(n) { return n > 2; } });
// => false
複製程式碼

數值檢測(is[type])

檢查 value 是否是 Array 類物件。

_.isArray([1, 2, 3]);
// => true
複製程式碼

檢查 value 是否是 ArrayBuffer 物件。

_.isArrayBuffer(new ArrayBuffer(2));
// => true
複製程式碼

檢查 value 是否是原始 boolean 型別或者物件。

_.isBoolean(false);
// => true
複製程式碼

檢查 value 是否是個 buffer

_.isBuffer(new Buffer(2));
// => true
複製程式碼

檢查 value 是否是 Date 物件。

_.isDate(new Date); 
// => true
複製程式碼

檢查 value 是否是可能是 DOM 元素。

_.isElement(document.body);
// => true
複製程式碼

檢查 value 是否是 Function 物件。

_.isFunction(_);
// => true
複製程式碼

檢查 value 是否為一個整數。

_.isInteger(3);
// => true
複製程式碼

檢查 value 是否是 NaN

注意: 這個方法基於Number.isNaN,和全域性的isNaN 不同之處在於,全域性的isNaN對 於 undefined 和其他非數字的值返回 true

_.isNaN(NaN);
// => true
複製程式碼

檢查 value 是否是 null 或者 undefined

_.isNil(null);
// => true
複製程式碼

檢查 valuealue 是否是 null

_.isNull(null);
// => true
複製程式碼

檢查 value 是否是原始Number數值型 或者 物件。

_.isNumber(3);
// => true
複製程式碼

檢查 value 是否為RegExp物件。

_.isRegExp(/abc/);
// => true
複製程式碼

深比較值相等(isEqual)

var object = { 'a': 1 };
var other = { 'a': 1 };
_.isEqual(object, other);
// => true
複製程式碼

數學類方法

向上取整(ceil)

根據 precision(精度) 向上舍入 number。(注: precision(精度)可以理解為保留幾位小數。)

_.ceil(4.006);
// => 5
 
_.ceil(6.004, 2);
// => 6.01
 
_.ceil(6040, -2);
// => 6100
複製程式碼

向下取整(floor)

根據 precision(精度) 向下舍入 number。(注: precision(精度)可以理解為保留幾位小數。)

_.floor(4.006);
// => 4
 
_.floor(0.046, 2);
// => 0.04
 
_.floor(4060, -2);
// => 4000
複製程式碼

陣列最大值(max)

計算 array 中的最大值。 如果 array 是 空的或者假值將會返回 undefined

_.max([4, 2, 8, 6]);
// => 8
 
_.max([]);
// => undefined
複製程式碼

陣列平均值(mean)

計算 array 的平均值。

_.mean([4, 2, 8, 6]);
// => 5
複製程式碼

陣列最小值(min)

計算 array 中的最小值。 如果 array 是 空的或者假值將會返回 undefined

_.min([4, 2, 8, 6]);
// => 2
 
_.min([]);
// => undefined
複製程式碼

四捨五入(round)

_.round(4.006);
// => 4
 
_.round(4.006, 2);
// => 4.01
 
_.round(4060, -2);
// => 4100
複製程式碼

陣列總值(sum)

_.sum([4, 2, 8, 6]);
// => 20
複製程式碼

數字類方法

限制區間值(clamp)

返回限制在 lowerupper 之間的值。

_.clamp(-10, -5, 5);
// => -5
 
_.clamp(10, -5, 5);
// => 5
複製程式碼

隨機區間值(random)

產生一個包括 lowerupper 之間的數。 如果只提供一個引數返回一個0到提供數之間的數。 如果 floating 設為 true,或者 lowerupper 是浮點數,結果返回浮點數。

_.random(0, 5);
// => an integer between 0 and 5
 
_.random(5);
// => also an integer between 0 and 5
 
_.random(5, true);
// => a floating-point number between 0 and 5
 
_.random(1.2, 5.2);
// => a floating-point number between 1.2 and 5.2
複製程式碼

物件類方法

取路徑值為陣列(at)

建立一個數組,值來自 objectpaths路徑相應的值。

var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };
_.at(object, ['a[0].b.c', 'a[1]']);
// => [3, 4]
複製程式碼

分配併合並(defaults)

_.defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });
// => { 'a': 1, 'b': 2 }
_.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } });
// => { 'a': { 'b': 2, 'c': 3 } }
複製程式碼

遍歷物件(forIn)

使用 iteratee 遍歷物件的自身和繼承的可列舉屬性。 iteratee 會傳入3個引數:(value, key, object)。 如果返回 falseiteratee 會提前退出遍歷。

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.forIn(new Foo, function(value, key) {
  console.log(key);
});
// => Logs 'a', 'b', then 'c' (無法保證遍歷的順序)。
複製程式碼

取路徑值(get)

根據 object物件的path路徑獲取值。 如果解析 value 是 undefined 會以 defaultValue 取代。

var object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.get(object, 'a[0].b.c');
// => 3
 
_.get(object, ['a', '0', 'b', 'c']);
// => 3
 
_.get(object, 'a.b.c', 'default');
// => 'default'
複製程式碼

是否存在路徑(has)

檢查 path 是否是object物件的直接屬性。

var object = { 'a': { 'b': 2 } };
var other = _.create({ 'a': _.create({ 'b': 2 }) });
 
_.has(object, 'a');
// => true
 
_.has(object, 'a.b');
// => true
 
_.has(object, ['a', 'b']);
// => true
 
_.has(other, 'a');
// => false
複製程式碼

移除路徑(unset)

移除object物件 path 路徑上的屬性。

var object = { 'a': [{ 'b': { 'c': 7 } }] };
_.unset(object, 'a[0].b.c');
// => true
 
console.log(object);
// => { 'a': [{ 'b': {} }] };
 
_.unset(object, ['a', '0', 'b', 'c']);
// => true
 
console.log(object);
// => { 'a': [{ 'b': {} }] };
複製程式碼

字串類方法

轉換駝峰(camelCase)

轉換字串string駝峰寫法

_.camelCase('Foo Bar');
// => 'fooBar'
 
_.camelCase('--foo-bar--');
// => 'fooBar'
 
_.camelCase('__FOO_BAR__');
// => 'fooBar'
複製程式碼

首字母大寫(capitalize)

轉換字串string首字母為大寫,剩下為小寫。

_.capitalize('FRED');
// => 'Fred'
複製程式碼

檢測尾部字元(endsWith)

檢查字串string是否以給定的target字串結尾。

_.endsWith('abc', 'c');
// => true
 
_.endsWith('abc', 'b');
// => false
 
_.endsWith('abc', 'b', 2);
// => true
複製程式碼

轉換中劃線分開(kebabCase)

轉換字串stringkebab case.

_.kebabCase('Foo Bar');
// => 'foo-bar'
 
_.kebabCase('fooBar');
// => 'foo-bar'
 
_.kebabCase('__FOO_BAR__');
// => 'foo-bar'
複製程式碼

轉換空格分開(lowerCase)

轉換字串string以空格分開單詞,並轉換為小寫。

_.lowerCase('--Foo-Bar--');
// => 'foo bar'
 
_.lowerCase('fooBar');
// => 'foo bar'
 
_.lowerCase('__FOO_BAR__');
// => 'foo bar'
複製程式碼

轉換下劃線分開(snakeCase)

_.snakeCase('Foo Bar');
// => 'foo_bar'
 
_.snakeCase('fooBar');
// => 'foo_bar'
 
_.snakeCase('--FOO-BAR--');
// => 'foo_bar'
複製程式碼

首字母小寫(lowerFirst)

轉換字串string的首字母為小寫。

_.lowerFirst('Fred');
// => 'fred'
 
_.lowerFirst('FRED');
// => 'fRED'
複製程式碼

小於長度則左右填充(pad)

如果string字串長度小於 length 則從左側和右側填充字元。 如果沒法平均分配,則截斷超出的長度。

_.pad('abc', 8);
// => '  abc   '
 
_.pad('abc', 8, '_-');
// => '_-abc_-_'
 
_.pad('abc', 3);
// => 'abc'

_.padEnd('abc', 6);
// => 'abc   '

_.padStart('abc', 6);
// => '   abc'
複製程式碼

重複 N 次字串(repeat)

_.repeat('*', 3);
// => '***'
 
_.repeat('abc', 2);
// => 'abcabc'
 
_.repeat('abc', 0);
// => ''
複製程式碼

預編譯模板(template)

建立一個預編譯模板方法,可以插入資料到模板中 "interpolate" 分隔符相應的位置。 HTML會在 "escape" 分隔符中轉換為相應實體。 在 "evaluate" 分隔符中允許執行JavaScript程式碼。 在模板中可以自由訪問變數。 如果設定了選項物件,則會優先覆蓋_.templateSettings 的值。

// 使用 "interpolate" 分隔符建立編譯模板
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'
 
// 使用 HTML "escape" 轉義資料的值
var compiled = _.template('<b><%- value %></b>');
compiled({ 'value': '<script>' });
// => '<b><script></b>'
 
// 使用 "evaluate" 分隔符執行 JavaScript 和 生成HTML程式碼
var compiled = _.template('<% _.forEach(users, function(user) { %><li><%- user %></li><% }); %>');
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'
 
// 在 "evaluate" 分隔符中使用內部的 `print` 函式
var compiled = _.template('<% print("hello " + user); %>!');
compiled({ 'user': 'barney' });
// => 'hello barney!'
 
// 使用 ES 分隔符代替預設的 "interpolate" 分隔符
var compiled = _.template('hello ${ user }!');
compiled({ 'user': 'pebbles' });
// => 'hello pebbles!'
 
// 使用自定義的模板分隔符
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'
 
// 使用反斜槓符號作為純文字處理
var compiled = _.template('<%= "\\<%- value %\\>" %>');
compiled({ 'value': 'ignored' });
// => '<%- value %>'
 
// 使用 `imports` 選項匯入 `jq` 作為 `jQuery` 的別名
var text = '<% jq.each(users, function(user) { %><li><%- user %></li><% }); %>';
var compiled = _.template(text, { 'imports': { 'jq': jQuery } });
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'
 
// 使用 `sourceURL` 選項指定模板的來源URL
var compiled = _.template('hello <%= user %>!', { 'sourceURL': '/basic/greeting.jst' });
compiled(data);
// => 在開發工具的 Sources 選項卡 或 Resources 面板中找到 "greeting.jst"
 
// 使用 `variable` 選項確保在編譯模板中不宣告變數
var compiled = _.template('hi <%= data.user %>!', { 'variable': 'data' });
compiled.source;
// => function(data) {
//   var __t, __p = '';
//   __p += 'hi ' + ((__t = ( data.user )) == null ? '' : __t) + '!';
//   return __p;
// }
 
// 使用 `source` 特性內聯編譯模板
// 便以檢視行號、錯誤資訊、堆疊
fs.writeFileSync(path.join(cwd, 'jst.js'), '\
  var JST = {\
    "main": ' + _.template(mainText).source + '\
  };\
');
複製程式碼

截斷字串且指定字尾(truncate)

截斷string字串,如果字串超出了限定的最大值。 被截斷的字串後面會以 omission 代替,omission 預設是 "..."。

_.truncate('hi-diddly-ho there, neighborino');
// => 'hi-diddly-ho there, neighbo...'
 
_.truncate('hi-diddly-ho there, neighborino', {
  'length': 24,
  'separator': ' '
});
// => 'hi-diddly-ho there,...'
 
_.truncate('hi-diddly-ho there, neighborino', {
  'length': 24,
  'separator': /,? +/
});
// => 'hi-diddly-ho there...'
 
_.truncate('hi-diddly-ho there, neighborino', {
  'omission': ' [...]'
});
// => 'hi-diddly-ho there, neig [...]'
複製程式碼

拆分詞語為陣列(words)

拆分字串string中的詞為陣列 。

_.words('fred, barney, & pebbles');
// => ['fred', 'barney', 'pebbles']
 
_.words('fred, barney, & pebbles', /[^, ]+/g);
// => ['fred', 'barney', '&', 'pebbles']
複製程式碼