超火js庫: Lodash API例子

lodash.js是一款超火的js庫，在npm上平均周下載量達到了驚人的 12,374,096,github start 36K!大量框架都用到了lodash,包括擁有 123kstart的vue

本文對比lodash英文文檔，加上一些小栗子和我的的經驗~~,但願能幫到大家

lodash採用了immutable的思想，永遠不會改變原數據，而是會返回一個新的結果

String 字符串操做

camelCase 轉換駝峯命名

_.camelCase([string=''])

console.log(_.camelCase('Foo Bar'))
// => 'fooBar'

console.log(_.camelCase('--foo-bar--'))
// => 'fooBar'

console.log(_.camelCase('__FOO_BAR__'))
// => 'fooBar'

console.log(_.camelCase('/\__FOO_BAR__*\9'))
// 'fooBar9'

console.log(_.camelCase('fooBarbar_bar'))
// fooBarbarBar

字符串中非數字和字母都會被過濾掉，而後再轉換爲駝峯

capitalize 轉換大寫

_.capitalize([string=''])

console.log(_.capitalize('FRED'));
// => 'Fred'

聯想： 同string.prototype.toLocaleUpperCase();

deburr 清理符號

_.capitalize([string=''])

deburr轉換 Latin-1 Supplement和Latin Extended-A 爲普通拉丁字母而且移除變音符號

_.deburr('déjà vu');
// => 'deja vu'

通常用不到...

endsWith 判斷是不是某個字符串結尾

_.endsWith([string=''], [target], [position=string.length])

console.log(_.endsWith('abcdef3', 'c', 3))
// true
console.log(_.endsWith('abcdef3', 'c', 2))
// false

主要是第三個參數，不填表示檢查整個字符串，有值表明從左截取幾個字符，從截取的字符中進行判斷

ECMAScript 6中已經加入string.prototype.endsWith()方法

escape 轉義html實體字符

_.escape([string=''])

會將 &裝換成 &amp, < -> &lt, > -> &gt '' -> &quot。其餘轉義字符，如： ×(乘號),÷（除號）等不會轉義，請用 he這樣的專業處理轉義的庫

console.log(_.escape(`a  as <a> &'"" *`))
// a  as &lt;a&gt; &amp;&#39;&quot;&quot; *

escapeRegExp 轉義正則表達式特殊字符

_.escapeRegExp([string=''])

正則表達式中的特殊字符都會加''處理

console.log(_.escapeRegExp('[lodash](https://lodash.com...\\\\/)'))
// \[lodash\]\(https://lodash\.com\.\.\.\\\\/\)

kebabCase 轉換成kebabCase格式

總結： 存在四種case格式

• CamelCase: TheQuickBrownFoxJumpsOverTheLazyDog
• SnakeCase: the_quick_brown_fox_jumps_over_the_lazy_dog
• KebabCase: the-quick-brown-fox-jumps-over-the-lazy-dog
• Studlycaps: tHeqUicKBrOWnFoXJUmpsoVeRThElAzydOG

查看case的具體文檔

其餘轉換case語法通 camelCase

lowerCase 轉換小寫

_.lowerCase([string=''])

_.lowerCase('--Foo-Bar--');
// => 'foo bar'
 
_.lowerCase('fooBar');
// => 'foo bar'
 
_.lowerCase('__FOO_BAR__');
// => 'foo bar'

通capitalize

聯想: string.prototype.toLocaleLowerCase

lowerFirst 轉換第一個字符爲小寫

console.log(_.lowerFirst('DS'))
// dS
console.log(_.lowerFirst('__DS'))
// __DS

沒法過濾非字母字符

pad 填充字符

_.pad([string=''], [length=0], [chars=' '])
有三個參數： 原字符串，長度，填充字符

若是原字符串長度短於給定的長度，則原字符串左右兩邊會填充指定字符（默認爲空格），若是不能平均分配則會被截斷。

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

padEnd 在結尾處填充字符

_.padEnd([string=''], [length=0], [chars=' '])

若是原字符串長度短於給定的長度，則原字符串右邊會填充指定字符（默認爲空格），若是填充字符超出長度則會被截斷

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

padStart 在開始處填充字符

_.padStart([string=''], [length=0], [chars=' '])

若是原字符串長度短於給定的長度，則原字符串左邊會填充指定字符（默認爲空格），若是填充字符超出長度則會被截斷

_.padStart('abc', 6);
// => '   abc'
 
_.padStart('abc', 6, '_-');
// => '_-_abc'
 
_.padStart('abc', 3);
// => 'abc'

parseInt 解析字符串爲數字

parseInt(string, radix);

string
要被解析的值。若是參數不是一個字符串，則將其轉換爲字符串(使用 ToString 抽象操做)。字符串開頭的空白符將會被忽略。
radix
一個介於2和36之間的整數(數學系統的基礎)，表示上述字符串的基數。好比參數"10"表示使用咱們一般使用的十進制數值系統。始終指定此參數能夠消除閱讀該代碼時的困惑而且保證轉換結果可預測。當未指定基數時，不一樣的實現會產生不一樣的結果，一般將值默認爲10。

返回值: 返回解析後的整數值。 若是被解析參數的第一個字符沒法被轉化成數值類型，則返回 NaN
radix參數爲n 將會把第一個參數看做是一個數的n進製表示，而返回的值則是十進制的。例如：

_.parseInt('123', 5) // 將'123'看做5進制數，返回十進制數38 => 1*5^2 + 2*5^1 + 3*5^0 = 38

實現原理es5 parseInt

repeat 重複指定字符串

_.repeat([string=''], [n=1])

重複string字符串n次, 默認1次

_.repeat('*', 3);
// => '***'
 
_.repeat('abc', 2);
// => 'abcabc'
 
_.repeat('abc', 0);
// => ''

replace 替換字符串

_.replace([string=''], pattern, replacement)

同es5 string.prototype.replace

_.replace('Hi Fred', 'Fred', 'Barney');
// => 'Hi Barney'
console.log(_.replace('Hi Fred', 'Fred', () => 'ddddd'))
// Hi ddddd

split 分割爲數組

_.split([string=''], separator, [limit])

同string.prototype.split, 比es5多了第三個參數。
若是第三個參數小於數組長度，則返回對應參數長度數組，如：

_.split('a-b-c', '-', 1)
// ['a']

大於數組長度，返回本來分割的數組

_.split('a-b-c', '-', 5)
// ['a', 'b', 'c']

startsWith 判斷是不是某個字符開頭

同MDN: string.prototype.startsWith

---

想造福人類來着的，結果晚了... @小呆 https://www.css88.com/doc/lodash