超火js库: Lodash API例子

本是古典何须时尚 2022-04-10 06:18 291阅读 0赞

> lodash.js是一款超火的js库，在npm上平均周下载量达到了惊人的 `12,374,096`,github start `36K`!大量框架都用到了lodash,包括拥有 `123k`start的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]

> 其他转换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][MDN_ string.prototype.startsWith]

来源：[https://segmentfault.com/a/1190000017540521][https_segmentfault.com_a_1190000017540521]

[case]: https://en.wikipedia.org/wiki/Letter_case#Special_case_styles
[MDN_ string.prototype.startsWith]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
[https_segmentfault.com_a_1190000017540521]: https://segmentfault.com/a/1190000017540521