第三方模块推荐:一个一致性、模块化、高性能的 JavaScript 实用工具库 Lodash

一个一致性、模块化、高性能的 JavaScript 实用工具库 Lodash

说明

只是单纯的记录学习过程
其实我也记不住几个哈哈哈哈,因为我比较笨就把它当作字典不会来查就好了。当然如果你想记下来那最好不过啦
官方文档~~~
推荐通过官方文档学习

使用前提

在 Chrome 65-66、Firefox 58-59、IE 11、Edge 16、Safari 10-11、Node.js 6-10 & PhantomJS 2.1.1. 环境中测试通过。

优点

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
Lodash 的模块化方法 非常适用于:

  • 遍历 array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数

这是官方的话…反正就是超级好用…该怎么表达有多好用呢 嗯只有你想不到的没有它做不到的哈哈哈哈

缺点

  • 可能有那么一点大…
  • 当然也是有漏洞的,最近比较严重的一次就是原型污染的问题
    可以看看这里 就不赘述了~~~
    但相比较于优点,我还是会毫不犹豫的选择使用lodash

常用方法

安装下载就不想说了…和所有模块一样
数组:

  • compact
    简述:创建一个新数组,包含原数组中所有的非假值元素。例如false, null, 0, “”, undefined, 和 NaN 都是被认为是“假值”。

    返回值:返回过滤掉假值的新数组

    例子:

    _.compact([0, 1, false, 2, '', 3]);
     // => [1, 2, 3]
    
  • concat
    简述:创建一个新数组,将array与任何数组 或 值连接在一起。

    返回值:返回连接后的新数组

    var array = [1];
    var other = _.concat(array, 2, [3], [[4]]);
    console.log(other);
    // => [1, 2, 3, [4]]
    console.log(array);
    // => [1]
    
  • difference
    简述: 创建一个具有唯一array值的数组,每个值不包含在其他给定的数组中。
    返回值:返回一个过滤后的新数组

    _.difference([3, 2, 1], [4, 2]);
    // => [3, 1]
    
  • findIndex
    简述:这个方法应该使用的比较多,尤其是写一些业务逻辑代码去找出数组的下标是在正常不过的事了。
    返回值:返回符合条件的下标,没有符合条件则返回 -1

var users = [
 { 'user': 'barney',  'active': false },
 { 'user': 'fred',    'active': false },
 { 'user': 'pebbles', 'active': true }
];

// 我们输入的条件可以多样化 第一个是我比较常用的方法
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0

// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1

// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0

// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2	
  • indexOf
    简述:这个就不用说啦

    返回值:也不太想说啦 如果看到这个你还不知道的话,该打哈哈哈

_.indexOf([1, 2, 1, 2], 2);
// => 1
 
// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3
  • join
    简述:将 array 中的所有元素转换为由 separator 分隔的字符串。

    返回值:返回连接字符串。

_.join(['a', 'b', 'c'], '~');
// => 'a~b~c'
  • pull
    简述:移除数组array中所有和给定值相等的元素 这个也不赘述

    返回值:返回数组

var array = [1, 2, 3, 1, 2, 3];
 
_.pull(array, 2, 3);
console.log(array);
// => [1, 1]
  • reverse
    简述:反转数组

    返回值:返回数组

var array = [1, 2, 3];
 
_.reverse(array);
// => [3, 2, 1]
 
console.log(array);
//**加粗样式** => [3, 2, 1]
  • uniq
    简述:数组去重

    返回值: 返回数组

_.uniq([2, 1, 2]);
// => [2, 1]

集合:
这里我要先说这个…超级好用呀

  • keyBy
    简述:创建一个对象组成, key(键) 是 collection(集合)中的每个元素经过 iteratee(迭代函数) 处理后返回的结果。 每个 key(键)对应的值是生成key(键)的最后一个元素。iteratee(迭代函数)调用1个参数:(value)。 如果你没看懂,不是咱们的问题可能官方描述的太啰嗦了。就是将对象数组变成对象,将原来的每个数组元素分配一个key。

    返回值:返回一个组成聚合的对象。

var array = [
  { 'dir': 'left', 'code': 97 },
  { 'dir': 'right', 'code': 100 }
];
 
_.keyBy(array, function(o) {
  return String.fromCharCode(o.code);
});
// => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
 
_.keyBy(array, 'dir');
// => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }
  • filter
    简述:过滤数组,这个应该是超级常用的

    返回值:返回一个新的过滤后的数组。

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];
 
_.filter(users, function(o) { return !o.active; });
// => objects for ['fred']
 
// The `_.matches` iteratee shorthand.
_.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']
 
// The `_.matchesProperty` iteratee shorthand.
_.filter(users, ['active', false]);
// => objects for ['fred']
 
// The `_.property` iteratee shorthand.
_.filter(users, 'active');
// => objects for ['barney']
  • find
    简述:官网写的太长了…就是找到匹配的数据

    返回值: 返回匹配元素,否则返回 undefined。

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
_.find(users, function(o) { return o.age < 40; });
// => object for 'barney'
 
// The `_.matches` iteratee shorthand.
_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'
 
// The `_.matchesProperty` iteratee shorthand.
_.find(users, ['active', false]);
// => object for 'fred'
 
// The `_.property` iteratee shorthand.
_.find(users, 'active');
// => object for 'barney'
  • sample
    简述:返回一个随机数

    返回值:返回一个随机元素

_.sample([1, 2, 3, 4]);
// => 2
  • sortBy
    简述:创建一个元素数组。 以 iteratee 处理的结果升序排序。 这个方法执行稳定排序,也就是说相同元素会保持原始排序。

    返回值: 返回排序后的数组。

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];
 
_.sortBy(users, function(o) { return o.user; });
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
 
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]
 
_.sortBy(users, 'user', function(o) {
  return Math.floor(o.age / 10);
});
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

未完待续…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值