lodash

最新推荐文章于 2024-03-24 17:39:38 发布
最新推荐文章于 2024-03-24 17:39:38 发布
阅读量620 收藏 1
点赞数
分类专栏： 功能组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxj124/article/details/105135249
版权

获取地址

文档地址

中文api地址

一.“Array” 方法:

_.compact(array)  

作用：创建一个新数组，包含原数组中所有的非假值元素。例如false, null, 0, "", undefined, 和 NaN 都是被认为是“假值”。

 

  例如：

var arr = [2, 2, 1, 3, 2, 4, 22, false, 0, 100]
    arr = _.compact(arr);
    console.log(arr)  //[2, 2, 1, 3, 2, 4, 22, 100]

 

_.uniq(array) 

作用：去重，创建一个去重后的array数组副本。使用了 SameValueZero 做等值比较。只有第一次出现的元素才会被保留。 

  例如：

var arr = [2, 2, 1, 3, 2, 4, 22, false, 0, 100]
    arr = _.uniq(arr);
    console.log(arr)  //[2, 1, 3, 4, 22, false, 0, 100]

很多情况可以将 _.compact和_.uniq配合使用，已得到一个去重的，去除假值的数据

 

针对数组对象去重：

场景：需要将数组对象中TeamId属性值相同的去重

 var arr = [{'TeamId',1},{'TeamId',3},{'TeamId',2},{'TeamId',4},{'TeamId',1}]

var newarr = _.uniqBy(arr , 'TeamId');

 

 

_.uniqBy([2.1, 1.2, 2.3], Math.floor);

// => [2.1, 1.2]

 

// The `_.property` iteratee shorthand.

_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');

// => [{ 'x': 1 }, { 'x': 2 }]

 

_.findIndex(array, [predicate=_.identity], [fromIndex=0])

作用：该方法类似_.find，区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值（index），而不是元素本身。

参数

  1. array (Array): 要搜索的数组。
  2. [predicate=_.identity] (Array|Function|Object|string): 这个函数会在每一次迭代调用。
  3. [fromIndex=0] (number): The index to search from.

返回值

(number): 返回找到元素的 索引值（index），否则返回 -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

 _.findLastIndex(array, [predicate=_.identity], [fromIndex=array.length-1])

这个方式类似 _.findIndex， 区别是它是从右到左的迭代集合array中的元素。 找到最后一个，从后往前找

 

_.indexOf(array, value, [fromIndex=0])

作用：使用 SameValueZero 等值比较，返回首次 value 在数组array中被找到的 索引值， 如果 fromIndex 为负值，将从数组array尾端索引进行匹配。

参数

  1. array (Array): 需要查找的数组。
  2. value (*): 需要查找的值。
  3. [fromIndex=0] (number): 开始查询的位置。

返回值

(number): 返回 值value在数组中的索引位置, 没有找到为返回-1。

_.indexOf([1, 2, 1, 2], 2);
// => 1
 
// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3

if (_.indexOf(hero_data.raceIdList, race_data.raceId) === -1) {//等于-1说明没有找到这一项
           arr.push(2)
 }

 

_.lastIndexOf(array, value, [fromIndex=array.length-1])

作用：这个方法类似 _.indexOf ，区别是它是从右到左遍历array的元素。

参数

  1. array (Array): 要搜索的数组。
  2. value (*): 要搜索的值。
  3. [fromIndex=array.length-1] (number): 开始搜索的索引值。

返回值

(number): 返回匹配值的索引值，否则返回 -1。

_.lastIndexOf([1, 2, 1, 2], 2);
// => 3
 
// Search from the `fromIndex`.
_.lastIndexOf([1, 2, 1, 2], 2, 2);
// => 1

 

二.“集合” 方法(“Collection” Methods)：

 

_.flatMap(collection, [iteratee=_.identity])

作用：创建一个扁平化（注：同阶数组）的数组，这个数组的值来自collection（集合）中的每一个值经过 iteratee（迭代函数） 处理后返回的结果，并且扁平化合并。 iteratee 调用三个参数： (value, index|key, collection)。 

 

参数

  1. collection (Array|Object): 一个用来迭代遍历的集合。
  2. [iteratee=_.identity] (Array|Function|Object|string): 每次迭代调用的函数。

返回

(Array): 返回新扁平化数组。

 

例如：想得到一个新数组，由一个数组对象中所有的hero_id组成

    var arr = [
        { TFTID: "175", hero_id: "1" },
        { TFTID: "175", hero_id: "2" },
        { TFTID: "175", hero_id: "4" },
        { TFTID: "175", hero_id: "5" },
        { TFTID: "175", hero_id: "7" },
        { TFTID: "175", hero_id: "7" }
    ];
    var newarr = _.flatMap(arr, function test(n){
       return n.hero_id

    });
    console.log(arr)
    console.log(newarr)  //获取到所有的hero_id ["1", "2", "4", "5", "7", "7"]

 

如果需求是将这些数组对象中的没个对象，添加一个type=1，则可以这样写：

    var arr = [
        { TFTID: "175", hero_id: "1" },
        { TFTID: "175", hero_id: "2" },
        { TFTID: "175", hero_id: "4" },
        { TFTID: "175", hero_id: "5" },
        { TFTID: "175", hero_id: "7" },
        { TFTID: "175", hero_id: "7" }
    ];
    var newarr = _.flatMap(arr, function (n){
       n['type']=1;
       return n
    });
    console.log(arr)
    console.log(newarr)

 

_.flatMap配合_.find的使用规则：相当于双重遍历的效果，将chessId等于hero_id_list某项的对象存为一个新数组

    var hero_id_list = ['6', '1', '2', '9', '7', '8']
    var hero_data_all = [
        { 'chessId': '6', 'type': 1 },
        { 'chessId': '1', 'type': 1 },
        { 'chessId': '2', 'type': 1 },
        { 'chessId': '9', 'type': 1 },
        { 'chessId': '7','type': 1 },
        { 'chessId': '8','type': 1 },
        { 'chessId': '11','type': 1 },
        { 'chessId': '81','type': 1 }
    ]
    var hero_data_List = _.flatMap(hero_id_list, function(hero_id) {
        //找到这个英雄id对应英雄数据
        return _.find(hero_data_all, { chessId: '' + hero_id });
    });

    console.log(hero_data_List)

 得到的结果是：

_.sample(collection)

 作用：从collection（集合）中获得一个随机元素。

例如：随机取数组【1,2,3,4】中的一项

_.sample([1, 2, 3, 4]);

// => 2

如果需要取的是数组对象中的某个属性值作为随机元素，则：

    var arr = [
        { TFTID: "175", hero_id: "1" },
        { TFTID: "171", hero_id: "2" },
        { TFTID: "170", hero_id: "4" },
        { TFTID: "172", hero_id: "5" },
        { TFTID: "173", hero_id: "7" },
        { TFTID: "174", hero_id: "7" }
    ];
     arr = _.sample(arr).TFTID
    console.log(arr)

 

 _.find(collection, [predicate=_.identity], [fromIndex=0])

作用：遍历 collection（集合）元素，返回 predicate（断言函数）第一个返回真值的第一个元素。predicate（断言函数）调用3个参数： (value, index|key, collection)。 

参数

  1. collection (Array|Object): 一个用来迭代的集合。
  2. [predicate=_.identity] (Array|Function|Object|string): 每次迭代调用的函数。
  3. [fromIndex=0] (number): 开始搜索的索引位置。

返回

(*): 有的话则返回第一个返回真值的第一个元素；无的话则返回 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' 'age': 36

 
// 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'

默认第三个参数不传，都是从集合的0项开始从头往后找，如果想要从后往前找的话，在加一个参数：

这里加上了users.length-1，则从后往前找

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; },users.length-1);
// => object for 'pebbles' 'age': 1

_.findLast(collection, [predicate=_.identity], [fromIndex=collection.length-1])

作用：这个方法类似_.find ，不同之处在于，_.findLast是从右至左遍历collection （集合）元素的。 

参数

  1. collection (Array|Object): 一个用来迭代的集合。
  2. [predicate=_.identity] (Array|Function|Object|string): 每次迭代调用的函数。
  3. [fromIndex=collection.length-1] (number): 开始搜索的索引位置。

返回

(*): 返回匹配元素，否则返回 undefined。

_.findLast([1, 2, 3, 4], function(n) {
  return n % 2 == 1;
});
// => 3

 

dxj124
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
lodash.js资源文件
03-23
lodash.js cdn地址 https://cdn.baomitu.com/lodash.js https://lib.baomitu.com/lodash.js/0.10.0/lodash.js
babel-plugin-lodash：模块化Lodash轻松构建
02-02
babel-plugin-lodash 一个简单的转换为精挑细选的Lodash模块，因此您不必这样做。 与结合使用，可以生成更小的樱桃精选版本！ 安装 $ npm i --save lodash $ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env 例 变身 import _ from 'lodash' import { add } from 'lodash/fp' const addOne = add ( 1 ) _ . map ( [ 1 , 2 , 3 ] , addOne ) 大致到 import _add from 'lodash/fp/add' import _map from 'lodash/map' const addOne = _add ( 1 ) _map ( [ 1 , 2 , 3 ] , addOne ) 用法 .babelrc { " plugins " : [ " lodash " ], " presets " : [[ " @babel/env " , { "
2024 年还在用 Lodash？这个现代化替代品更安全、好用！
最新发布
weixin_45727472的博客
03-24 946
公众号：程序员白特，欢迎一起交流学习~原文作者：前端充电宝相信许多前端开发者对Lodash都耳熟能详，作为 JavaScript 领域的一款常用实用工具库，它在前端开发中广受欢迎， npm 周下载量高达 5200 万。然而，时光荏苒，转眼已是 2024 年，Lodash 是否仍然值得使用呢？它的确为开发者带来了许多便利，但同样存在一些不容忽视的问题。本文将深入探讨 Lodash 的局限性，并推荐一个更为现代化、值得一试的 JavaScript 实用工具库 —— Radash。
Lodash.min.js最新版4.17.21下载【亲测可用】
08-09
最新版Lodash.min.js 4.17.21下载 Lodash 通过降低 array，number，objects，string 等等的使用难度从而让 JavaScript 变得更简单 Lodash 的模块化方法 非常适用于： 遍历 array、object 和 string 对值进行操作和检测 创建符合功能的函数 按照官方说明部署的是未压缩版的lodash.js,这里分享一下压缩版最新的Lodash.min.js 亲测可用。 按照官方说明部署的是未压缩版的lodash.js,这里分享一下压缩版最新的Lodash.min.js 亲测可用。 按照官方说明部署的是未压缩版的lodash.js,这里分享一下压缩版最新的Lodash.min.js 亲测可用。 按照官方说明部署的是未压缩版的lodash.js,这里分享一下压缩版最新的Lodash.min.js 亲测可用。 按照官方说明部署的是未压缩版的lodash.js,这里分享一下压缩版最新的Lodash.min.js 亲测可用。
lodash.js下载
12-22
lodash.js下载
Lodash
02-08
Lodash Lodash方法实现
lodash常用方法汇总
dzqdzq123的博客
06-19 574
lodash官网 lodash中文网 array _.flatten(array) //减少一级array嵌套深度。 _.fromPairs([['fred', 30], ['barney', 40]]) //返回{ 'fred': 30, 'barney': 40 } _.initial(array) //获取数组array中除了最后一个元素之外的所有元素 _.tail(array) //获取数组array中除了第一个元素之外的所有元素 _.last(array) //最后一个元素 _.int
lodash速览：集合方法（一）
weixin_34396103的博客
07-20 201
集合指(Array|Object)。 1、_.countBy(collection, [iteratee=_.identity])：按照一定规则统计数量。返回一个对象，key为迭代器运算的结果，value为匹配该结果的数量。 _.countBy(['one', 'two', 'three'], 'length'); // =>...
Lodash使用
enjoyhpr的博客
04-08 166
Lodash
Lodash一个一致性、模块化、高性能的JavaScript实用工具库
JackieDYH的博客
07-25 1288
Lodash通过降低array、number、objects、string等等的使用难度从而让JavaScript变得更简单。遍历array、object和string对值进行操作和检测创建符合功能的函数futil-js是一套用来补足lodash的实用工具集。
JS数组专题1️⃣_番外篇 ➖ lodash中的flatten
weixin_34280237的博客
08-13 525
专题一已经给大家介绍了数组扁平化，本篇将给大家介绍 lodash 中的 flatten 是如何实现的。 一、lodash源码 1.基础函数 isFlattenable.js // isFlattenable.js import isArguments from '../isArguments.js' // 检查 value 是否是一个类 arguments 对象，在本篇不予讲解。 // ...
lodash 集合处理方法 map和filter区别
weixin_33971977的博客
07-13 595
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=
Lodash教程--（3）“集合”方法 （“Collection” Methods）
我未来一定会是个很厉害的程序媛嗯！
08-23 657
Lodash教程--（3）“集合”方法 （“Collection” Methods）(1)_.countBy(collection, [iteratee= _.identity])(2)_.every(collection, [predicate= _.identity])(3)_.filter(collection, [predicate= _.identity])(4)_.find(colle...
lodash库——封装好的collection集合函数
热门推荐
编程知识分享，主打前端
10-13 3万+
Lodash _.集合方法集合collectioncountBy—返回组成对象forEach方法—遍历元素every方法—判断数据filter方法—过滤真值 集合collection Array数组 set集合（存储的元素是有序不重复的） Map集合（存储的元素以键值对key:value的形式） let array=['y','m','a',1,6] let set={} let map=[{'value1':1,'value2':2}] countBy—返回组成对象 countBy(collecti
js-lodash-对象
junjiahuang的博客
06-28 551
lodash 对象操作
手撸 JS flat 和 flatMap 函数
写好每一行代码
06-02 973
偶然看到 flat 和 flatMap 函数，原来一直用 lodash 的 flatten 函数，所以自己手撸一个 flat 和 flatMap 惩罚下自己没有好好阅读 es6 手册。
在 JavaScript 中从数组中选择一个随机元素
six6de6的博客
10-14 5417
在 JavaScript 中从数组中选择一个随机元素
使用ES6来代替lodash
weixin_33725722的博客
10-17 874
lodash是一个很强大的第三方库，但是缺点也是很明显的，就是太tm的大了，就算能够部分引用，但是如果js本身就能提供这些方法不是更快更小吗？那么一起来看看那些方法现在可以用ES6来代替了吧。 Map map这个应该是用的最多的方法了吧，因为我们几乎在任何应用中都要做遍历处理，lodash和ES6的使用方式差不多 Lodash 的map使用 _.map([1,2,3,4,5], it =&gt...
lodash的2个数组对象操作
雨夜幕雨
04-21 1万+
根据数组对象 下的属性名称 来返回相应 的值数据格式如下var data=[{test1:[...]},{test2:[...]},{test3:[...]},{test4:[...]},{test5:[...]}] var key='test1';对象的每个属性名称不是相同的，对应的值 是一个数组 方法1：将data初始化到lodash中，map相应的key,使用filter过滤 掉undef
uniapp Lodash
09-11
Lodash is a popular JavaScript utility library that provides a lot of helpful functions for working with arrays, objects, strings, and more. It offers a wide range of methods that can greatly simplify...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值