超火js库: Lodash API例子
lodash.js是一款超火的js库,在npm上平均周下载量达到了惊人的
12,374,096
,github start36K
!大量框架都用到了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=''])
会将
&
装换成&
,<
-><
,>
->>
''
->"
。其他转义字符,如:×(乘号),÷(除号)
等不会转义,请用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语法通
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://segmentfault.com/a/1190000017540521
超火js库: Lodash API例子的更多相关文章
- 一个JS库Lodash
中文文档:https://www.html.cn/doc/lodash/#_aftern-func
- arcgis api for js之echarts开源js库实现地图统计图分析
前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图 ...
- arcgis api 3.x for js 之 echarts 开源 js 库实现地图统计图分析(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- 精读《12 个评估 JS 库你需要关心的事》
1 引言 作者给出了从 12 个角度全面分析 JS 库的可用性,分别是: 特性. 稳定性. 性能. 包生态. 社区. 学习曲线. 文档. 工具. 发展历史. 团队. 兼容性. 趋势. 下面总结一下作者 ...
- 对js库的调研研究------引用
1. 引言 从以下几个方面来阐述这个问题: 特性. 稳定性. 性能. 包生态. 社区. 学习曲线. 文档. 工具. 发展历史. 团队. 兼容性. 趋势. 2.概述 & 精读 特性 当你调研一个 ...
- 一些JS库汇总
作者:wlove 链接:https://www.zhihu.com/question/429436558/answer/2348777302 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权, ...
- 【转载】写一个js库需要怎样的知识储备和技术程度?
作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...
- 为新项目添彩的 10+ 超有用 JavaScript 库
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
- 解决jQuery多个版本,与其他js库冲突方法
jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...
随机推荐
- nowcoder牛客wannafly挑战赛20
A---染色 签到题,设最终颜色为x,一次操作就需要把一个不是x的点变为x,所以最终颜色为x时需要操作 总结点个数-颜色为x的节点个数,然后枚举所有颜色就行了 #include <iostrea ...
- 汇编语言LAHF和SAHF指令
LAHF(加载状态标志位到 AH)指令将 EFLAGS 寄存器的低字节复制到 AH.被复制的标志位包括:符号标志位.零标志位.辅助进位标志位.奇偶标志位和进位标志位.使用这条指令,可以方便地把标志位副 ...
- Odoo QWeb
1.web 模块 注意,OpenERP 模块中 web 部分用到的所有文件必须被放置在模块内的 static 文件夹里.这是强制性的,出于安全考虑. 事实上,我们创建的文件夹 CSS,JS 和 XML ...
- 原生js封装ajax代码
方法一:(类似jQuery的封装方法) 1.ajax函数封装: /* *author: Ivan *date: 2014.06.01 *参数说明: *opts: {'可选参数'} **method: ...
- input光标错位
文档结构 <div class="noteWrap"> <input type="text" placeholder="写留言&qu ...
- JAVA面试常见问题之设计模式篇
1.常见的设计模式 单例模式.工厂模式.建造模式.观察者模式.适配器模式.代理模式.装饰模式. 参考:https://www.cnblogs.com/cr330326/p/5627658.html 2 ...
- LUOGU P3539 [POI2012]ROZ-Fibonacci Representation
传送门 解题思路 打了个表发现每次x只会被比x大的第一个fab或比x小的第一个fab表示,就直接写了个爆搜骗分,结果过了.. 代码 #include<iostream> #include& ...
- Centos 设置时区
参考网址: http://jingyan.baidu.com/article/636f38bb268a82d6b84610bd.html //打开设置 tzselect //选择 )Asia → )c ...
- LintCode_415 有效回文串
给定一个字符串,判断其是否为一个回文串.只包含字母和数字,忽略大小写. 注意事项 你是否考虑过,字符串有可能是空字符串?这是面试过程中,面试官常常会问的问题. 在这个题目中,我们将空字符串判定为有效回 ...
- Ubuntu linux下部署golang配置环境,极客学院 无闻讲的安装配置是错的,折腾我好几遍,真是有点坑
开始按极客学院无闻讲的做,弄了几遍都不行,最后发现是错的,别人告诉我这是mac下的virtualbox是这样的,不管怎样,被坑的不浅. 虽然sudo apt install golang-go 就能安 ...