超火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