zoukankan      html  css  js  c++  java
  • 超火js库: Lodash API例子

    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 SupplementLatin 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 &lt;a&gt; &amp;'"" *`))
    // a  as &amp;lt;a&amp;gt; &amp;amp;&amp;#39;&amp;quot;&amp;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--');
    // =&gt; 'foo bar'
     
    _.lowerCase('fooBar');
    // =&gt; 'foo bar'
     
    _.lowerCase('__FOO_BAR__');
    // =&gt; '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);
    // =&gt; '  abc   '
     
    _.pad('abc', 8, '_-');
    // =&gt; '_-abc_-_'
     
    _.pad('abc', 3);
    // =&gt; 'abc'
    

    padEnd 在结尾处填充字符

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

    如果原字符串长度短于给定的长度,则原字符串右边会填充指定字符(默认为空格),如果填充字符超出长度则会被截断

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

    padStart 在开始处填充字符

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

    如果原字符串长度短于给定的长度,则原字符串左边会填充指定字符(默认为空格),如果填充字符超出长度则会被截断

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

    parseInt 解析字符串为数字

    
    parseInt(string, radix);
    

    string
    要被解析的值。如果参数不是一个字符串,则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。
    radix
    一个介于2和36之间的整数(数学系统的基础),表示上述字符串的基数。比如参数"10"表示使用我们通常使用的十进制数值系统。始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当未指定基数时,不同的实现会产生不同的结果,通常将值默认为10。

    返回值: 返回解析后的整数值。 如果被解析参数的第一个字符无法被转化成数值类型,则返回 NaN
    radix参数为n 将会把第一个参数看作是一个数的n进制表示,而返回的值则是十进制的。例如:

    
    _.parseInt('123', 5) // 将'123'看作5进制数,返回十进制数38 =&gt; 1*5^2 + 2*5^1 + 3*5^0 = 38
    

    实现原理es5 parseInt

    repeat 重复指定字符串

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

    重复string字符串n次, 默认1次

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

    replace 替换字符串

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

    同es5 string.prototype.replace

    
    _.replace('Hi Fred', 'Fred', 'Barney');
    // =&gt; 'Hi Barney'
    console.log(_.replace('Hi Fred', 'Fred', () =&gt; '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

  • 相关阅读:
    Authorize 示例
    javscript 实现iframe加载内容页出现Loading效果
    泛型的Distinct(IEqualityComparer)的用法
    关于ViewData与TempData
    将表 自增长列 清零 循环插入时间自增长
    linq count() sum() Min() Max() Average() 用法
    分页的存储过程
    将图片文件与文本文件合并成图片文件
    asp.net mvc利用Json验证数据和导向页面,解决重复提交问题
    JQUERY DIV浮动提示信息
  • 原文地址:https://www.cnblogs.com/lovellll/p/10188969.html
Copyright © 2011-2022 走看看