超火js库: Lodash API例子

zhunjiee 发布于2019-08-23 14:21 / 1527人阅读

摘要：一个介于和之间的整数数学系统的基础，表示上述字符串的基数。当未指定基数时，不同的实现会产生不同的结果，通常将值默认为。例如将看作进制数，返回十进制数实现原理重复指定字符串重复字符串次默认次替换字符串同分割为数组同比多了第三个参数。

lodash.js是一款超火的js库，在npm上平均周下载量达到了惊人的12,374,096,github start36K!大量框架都用到了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=""])

会将&装换成&, < -> <, > -> > "" -> "。其他转义字符，如：×(乘号),÷（除号）等不会转义，请用he这样的专业处理转义的库

console.log(_.escape(`a  as  &""" *`))
// a  as  &'"" *

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", () => "ffffddd"))
// Hi ffffddd

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

专线服务服务器托管 lodash.js cdn php淘宝api例子 js逻辑例子 java 调用库调用api

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100465.html

Lodash的学习笔记（一）有意思的API

摘要：是函数柯里化的函数。例子柯里化有个常见作用参数复用构建高阶函数延迟计算。是的，它其实就是柯里化的具体应用构建高阶函数。这个是我认为的中最有意思的方法。不过要注意最后的。这同样是用来组合高阶函数的一个方法。最近在学习JS函数式编程相关的内容，于是详细的翻看了Lodash的文档，感到别有洞天。这里把自己对一些API的使用和看法做个笔记记录下。 Array _.head/_.last 例子...

BingqiChen 2019-08-19 18:15 评论0 收藏0
You-Dont-Need : 你不需要系列

摘要：是强大的，你可以做很多事情没有。如果你想要你的项目需要更少的依赖，并且你清楚的知道你的目标浏览器，那么你可能不需要。我们并不需要为了操作等再学习一下的。但是，他们往往需要更多的资源，功能不强，难以通过脚本自动化。 1 You-Dont-Need-JavaScript CSS是强大的，你可以做很多事情没有JS。本文教你使用原生CSS做下面的事情。内容目录手风琴/切换圆盘传送带...

anonymoussf 2019-08-29 14:07 评论0 收藏0
You-Dont-Need : 你不需要系列

摘要：是强大的，你可以做很多事情没有。如果你想要你的项目需要更少的依赖，并且你清楚的知道你的目标浏览器，那么你可能不需要。我们并不需要为了操作等再学习一下的。但是，他们往往需要更多的资源，功能不强，难以通过脚本自动化。 1 You-Dont-Need-JavaScript CSS是强大的，你可以做很多事情没有JS。本文教你使用原生CSS做下面的事情。内容目录手风琴/切换圆盘传送带...

bawn 2019-08-21 18:29 评论0 收藏0
翻译连载 | 附录 C：函数式编程函数库－《JavaScript轻量级函数式编程》 |《你不知道的J

摘要：为了尽可能提升互通性，已经成为函数式编程库遵循的实际标准。与轻量级函数式编程的概念相反，它以火力全开的姿态进军的函数式编程世界。原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者关于译者：这是一个流淌着沪江血液的纯粹工程：认真，是 HTML 最坚实的梁柱；分享，是 CSS 里最闪耀的一瞥；总结，...

Miracle 2019-08-22 13:40 评论0 收藏0
2018年你应该知道的11个Javascript实用程序库

摘要：构建是为了在中为常见任务提供实用程序功能。所有功能都自动进行，并且相应地安排传递的参数以便于使用。在星级，是一个用于处理本机对象的实用程序库。该库没有外部依赖关系，这是一个将事件作为序列进行测试的现场演示。由于Javascript在2018年仍然是最受欢迎和最广泛使用的编程语言，因此围绕它扩展了生态系统。 showImg(https://segmentfault.com/img/re...

Ali_ 2019-08-22 18:47 评论0 收藏0