这些lodash方法真香！！
前言
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash官网
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
1、 遍历 array、object 和 string
2、对值进行操作和检测
3、创建符合功能的函数
安装lodash和lodash-es模块：
npm i --save lodash lodash-es
lodash-es模块使得我们能按需引入lodash对应的工具方法。
注意：如果下面碰到方法不能使用的情况，请检查安装lodash版本是否已经支持该版本了。
列出来的这些方法都是开发中常用到的，如有遗漏欢迎留言补充~~
操作【数组】的方法
concat
创建一个新数组，将array与任何数组 或 值连接在一起。
// 可对concat设置别名lodashConcat
import { concat as lodashConcat } from 'lodash-es'// 用lodash前：要注意两个都是数组类型才能拼接，返回新数组。concat用于简单的数组中是深拷贝，用于复杂的数组是浅拷贝
const arr1 = [1, 2, 3]
const arr2 = [5, 6, 7]
const resArr = arr1.concat(arr2)
console.log(resArr) // [1, 2, 3, 5, 6, 7]// 用lodash后：可将array与任何数组 或 值连接在一起，返回新数组。
const resultArr = lodashConcat(arr1, arr2, 11)
console.log(resultArr) // [1, 2, 3, 5, 6, 7, 11]
说明：上面提到的concat用于简单数组、复杂数组、浅拷贝、深拷贝相关知识，可见这里。lodash中的concat是否有上述的情况可以自行去测试下。
findIndex
返回检索的数组第一个匹配元素的 索引值（index），否则返回 -1。
import { findIndex as lodashFindIndex } from 'lodash-es'// 用lodash前：用原生的数组方法findIndex，只有一种写法检索方式。
const users = [{ user: 'barney', active: false },{ user: 'fred', active: false, name: 'winne' },{ user: 'pebbles', active: true }
]
const resIndex = users.findIndex((item) => item.user === 'barney') // 0// 用lodash后：可以传入多种检索方式。
const resultIndex1 = lodashFindIndex(users, (item) => item.user === 'barney') // 0
const resultIndex2 = lodashFindIndex(users, { user: 'fred', active: false }) // 1
const resultIndex3 = lodashFindIndex(users, ['active', false]) // 0
说明：与该方法使用类似的还有find方法。find方法返回检索的数组第一个匹配的元素项，否则返回undefined。
intersection
返回一个包含所有传入数组交集元素的新数组。
import { intersection } from 'lodash-es'const arr1 = [2, 1]
const arr2 = [4, 2]
const arr3 = [1, 2]
const arr4 = []
const newArr = intersection(arr1, arr2, arr3) // [2]
const newArr2 = intersection(arr1, arr2, arr4) // []
说明：还有一个高级的返回交集的方法intersectionBy他可以自定义每一项的比对来返回交集。
union
返回一个新的联合（并集）数组。数组按顺序返回，返回数组的元素是唯一的。
import { union } from 'lodash-es'const arr1 = [2, 3]
const arr2 = [1, 2]
const resArr = union(arr1, arr2) // [2, 3, 1]
说明：还有一个高级的返回并集的方法unionBy他可以自定义每一项的比对来返回并集。
uniq
返回新的去重后的数组。
import { uniq } from 'lodash-es'const arr1 = [2, 3, 2, 4, 5]
const resArr = uniq(arr1) // [2, 3, 4, 5]
说明：还有一个高级的返回去重后的方法uniqBy他可以自定义每一项的比对来返回去重后的数组。
head / last
head 返回数组 array的第一个元素。
last 返回array中的最后一个元素。
import { head, last } from 'lodash-es'const arr = [1, 2, 3]
const headItem = head(arr) // 1
const lastItem = last(arr) // 3
操作【对象/json】的方法
get
get(object, path, [defaultValue])
根据 object对象的path路径获取值。 如果解析 value 是 undefined 会以 defaultValue 取代。
import { get } from 'lodash-es'const object = {a: [{ b: { c: 3 } }],info: { name: 'winne', age: '18' }
}
// 传入属性字符串路径方式
const res1 = get(object, 'a[0].b.c') // 3// 传入属性数组方式
const res2 = get(object, ['a', '0', 'b', 'c']) // 3// 最后一个参数为设置找不到时的默认值
const res3 = get(object, 'info.like', 'wa') // 'wa'const res4 = get(object, 'a[0].b.c.d.f') // undefined
说明: 用get方法就算路径上获取不到也不会报错了，会返回undefined，此时按需设置一个默认值即可。
不再需要像以前那样使用很多的判断来防止路径获取不到而报错的情况了。
set
set(object, path, value)
设置 object对象中对应 path 属性路径上的值，如果path不存在，则创建。 缺少的索引属性会创建为数组，而缺少的属性会创建为对象。
(这个方法会改变 object)
const obj = {a: [{ id: 1, name: 'winne', age: 18 }],b: 11,c: 33
}
set(obj, 'a[0].like', 'hi')
set(obj, 'a[0].say.my', 'hello')
set(obj, ['d', 'j'], 'come')
/** obj的值：{a: [{ id: 1, name: 'winne', like: 'hi', age: 18, say: { my: 'hello'} }],b: 11,c: 33,d: { j: 'come'}}*/merge
merge(object, [sources])
它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在，被解析为undefined的sources 来源对象属性将被跳过。数组和普通对象会递归合并，其他对象和值会被直接分配覆盖。源对象从从左到右分配。后续的来源对象属性会覆盖之前分配的属性。
import { merge } from 'lodash-es'const obj = {a: [{ id: 1, name: 'winne', age: 18 }],b: 11
}
const other = {a: [{ name: 'xf', age: 10 }],b: 1,c: 33
}
const regMerge = merge(obj, other)
/** regMerge的值：* {a: [{ id: 1, name: 'xf', age: 10 }],b: 1,c: 33}*/
omit
把一个对象的指定属性剔除。
import { omit } from 'lodash-es'const obj = {a: [{ id: 1, name: 'winne', age: 18 }],b: 11,c: 33
}
const reg = omit(obj, ['a[0].age', 'b', 'c']) // { a: [{ id: 1, name: 'winne' }] }
说明：用于处理传递参数给接口时去除少量多余的属性字段时非常有用。
pick
从一个对象中挑选指定属性。
import { pick } from 'lodash-es'const obj = {a: [{ id: 1, name: 'winne', age: 18 }],b: 11,c: 33
}
const reg = pick(obj, ['a[0].age', 'b']) // { a: [{ age: 18 }], b: 11 }
说明：用于处理传递参数给接口时挑选少量属性字段时非常有用。
操作【字符串】的方法
trim
trim([string=''], [chars=whitespace])
默认从string字符串中移除前面和后面的 空格 ，也可以配置移除首尾指定的字符。
import { trim } from 'lodash-es'// 默认移除首尾空格
console.log(trim(' abc ')) // abc
// 移除指定字符
console.log(trim('-_*abc_', '*_-')) // abc
说明: 当指定字符进行移除时，首尾只要是能匹配到的单个指定字符都会被移除（配置的指定字符不需要关注顺序）。
实用函数
uniqueId
uniqueId([prefix=''])
生成唯一ID。 如果提供了 prefix ，会被添加到ID前缀上。
import { uniqueId } from 'lodash-es'console.log(uniqueId()) // 1
console.log(uniqueId()) // 2
for (let i = 0; i < 100; i++) {console.log(uniqueId('winne')) // winne3 ~ winne102
}
console.log(uniqueId('xf')) // xf103
说明：无论是加前缀还是不加前缀，生成的ID都是唯一的。
cloneDeep
cloneDeep(value)
返回深拷贝后的值。
import { cloneDeep } from 'lodash-es'const obj = {a: 111,b: {arr: [1, { b: 55 }, 33]}
}
const copyObj = cloneDeep(obj) // copyObj为obj深拷贝后的值
isEqual
isEqual(value, other)
执行深比较来确定两者的值是否相等。如果 两个值完全相同，那么返回 true，否则返回 false。
import { cloneDeep } from 'lodash-es'const obj = {a: 111,b: {arr: [1, { b: 55 }, 33]}
}
const obj2 = {a: 111,b: {arr: [1, { b: 55 }, 33]}
}
const obj3 = {b: {arr: [1, { b: 55 }, 33]},a: 111
}
const obj4 = {a: 111,b: {arr: [1, { b: 55 }, 33]},c: ''
}// 两个值完全相同
console.log(isEqual(obj, obj2)) // true
// 两个键值对的值完全相同，对象类型键名顺序不重要
console.log(isEqual(obj, obj3)) // true
// 两个对象键值对不完全相同
console.log(isEqual(obj, obj4)) // false
说明：这个方法支持比较 arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, 以及 typed arrays. Object 对象值比较自身的属性，不包括继承的和可枚举的属性。 不支持函数和DOM节点比较。
isMatch
isMatch(object, source)
执行一个深度比较，来确定 object 是否含有和 source 完全相等的属性值。
如果object匹配，那么返回 true，否则返回 false。
import { isMatch } from 'lodash-es'const obj = {a: [{ id: 1, app: 2, pc: 3 }],
b: {arr: [1, { b: 55 }, 33]
},
c: 2,
d: 33
}
const source2 = {a: [{ id: 1, app: 2, pc: 3 }],
b: {arr: [1, { b: 55 }, 33]
},
c: 2
}
const source3 = {a: [{ app: 2, pc: 3 }],
b: {arr: [1, { b: 55 }, 33]
},
c: 2
}
const source4 = {a: [{ id: 1, app: 2 }],
b: {arr: [1, { b: 55 }, 33]
},
c: 2,
d: 33
}
const source5 = {a: [{ id: 1, app: 2, pc: 3 }],
b: {arr: [1, { b: 55 }, 33]
},
c: 2,
d: 33,
e: 66
}// source2少了d属性，存在包含关系
console.log(isMatch(obj, source2)) // true
// source3少了d属性、a[0].id属性，存在包含关系
console.log(isMatch(obj, source3)) // true
// source4少了a[0].pc属性，存在包含关系
console.log(isMatch(obj, source4)) // true
// source5多了一个e属性，不存在包含关系
console.log(isMatch(obj, source5)) // false
说明：一般应用于数据比对，且要比对的两个对象存在包含关系即为数据未发生改变的情况。
toString
toString(value)
转换 value 为字符串。 null 和 undefined 将返回空字符串。-0 将被转换为字符串"-0"。
import { toString } from 'lodash-es'const a = 123
const b = null
const c = [4, 5, 6]
console.log(toString(a)) // '123'
console.log(toString(b)) // ''
console.log(toString(c)) // '4,5,6'// 下面是内置的转字符串方法
console.log(a.toString()) // '123'
console.log(c.toString()) // '4,5,6'
console.log(b.toString()) // 报错
说明：从上面可以看出，使用lodash中的toString方法容错性比较强。
throttle
throttle(func, [wait=0], [options=])
创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。
import { throttle } from 'lodash-es'const fn = throttle(() => {console.log('节流函数执行了')
}, 500)
window.addEventListener('resize', fn)
说明：一段时间只做一件事情，时间没到就不做。
实际应用：表单的提交（解决多次频繁点击提交表单的bug）、监听浏览器窗口发生变化做某些事情。
debounce
debounce(func, [wait=0], [options=])
创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。
import { debounce } from 'lodash-es'const fn = debounce(() => {console.log('防抖函数执行了')
}, 500)
// 这个例子不太合适，仅供看效果
window.addEventListener('resize', fn)
说明：当持续触发事件，一定时间内没有再触发事件，事件处理函数就会执行一次。如果设定的定时器延迟到来之前 又触发了事件，那么就会重新开始计时。
实际应用：输入搜索
orderBy
orderBy(collection, [iteratees=[_.identity]], [orders]
collection 为用来迭代的集合。允许指定 iteratee（迭代函数）结果如何排序。 如果没指定 orders（排序），所有值以升序排序。 否则，指定为"desc" 降序，或者指定为 “asc” 升序，排序对应值。返回排序后的新数组
import { orderBy } from 'lodash-es'const users = [{ user: 'fred', age: 48 },{ user: 'barney', age: 34 },{ user: 'fred', age: 40 },{ user: 'barney', age: 36 }
]// 以 `user` 升序排序 再 `age` 以降序排序。
const u1 = orderBy(users, ['user', 'age'], ['asc', 'desc'])
console.log('
这些lodash方法真香！！相关推荐
- 好用到飞，Python 办公自动化这10个方法真香啊
在编程世界里,Python 已经是名副其实的网红了.曾经一个学汉语言的研究生,问我怎么学Python,因为他们课程论文里需要用到文本分析,用 Python 来跑数据.我和他说,你看两天语法,就可以上手 ...
- android ios语音转码,手机如何将语音转文字？这几种方法真简单，安卓苹果通用...
原标题:手机如何将语音转文字?这几种方法真简单,安卓苹果通用 手机可以将语音转文字吗? 当然可以啦,方法还不止一种,下面就简单给大家介绍几种,安卓苹果手机通用的方法吧. 1.输入法-实时语音转文字 手 ...
- 神经网络Drop大法真香定律
drop方法从一开始提出的时候,就用来当作正则化使用,提升模型的鲁棒性.近年来drop方法被玩出花来,drop方法有两种明显的趋势: 随机drop-> 自适应drop 像素级drop -> ...
- 如此美妙，Python 处理CSV、JSON和XML数据的方法真简便
Python 尤其是优秀的简洁和易用性成为网络编程语言的首选,是数据和编程语言的首选,其主要的数据库和算法库成为python入门数据科学的首选语言. 在日常使用中,CSV,JSON和XML三种数据格式 ...
- 如何把图片快速生成PDF?这个方法真不错!
在我们办公学习时候,经常会遇见图片转换PDF的情况,那么怎样把图片快速生成PDF呢?有时候呢,图片在电脑上可以直接在电脑进行处理,但是在手机上时候怎么操作呢?今天小编分享一个方法,在手机上将图片转换P ...
- 魅蓝note3联通卡显示无服务器,魅蓝Note3手机卡(SIM卡)安装方法真机图文详解
魅蓝note3采用与或卡托设计,靠近内部卡槽位为SIM1且只能安装Nano-SIM(迷你卡):而靠近外部的卡槽为为SIM2/TF卡,这个卡槽也支持TF卡扩展,在安装单卡或者双卡的时候,需要按照以下的S ...
- js some方法和every方法的使用
前言: 在以外的开发中,接触过some这个方法,但是只限于在代码里看见过,还没有自己去了解并且写过,今天碰到个需求时发现使用some这个方法真香,写此文章加深印象. 定义和用法 some() 方法检查 ...
- 算法与数据结构的python概述
引子 问题一:1+2+3+4+5+-+10000=? 第一种解法: 1+2=3,3+3=6,6+4=10,10+5=15- 这是要算到猴年马月的节奏呀 果断弃之 第二种解法: 聪明的高斯,这样玩: ( ...
- JavaScript工具库之Lodash
你还在为JavaScript中的数据转换.匹配.查找等烦恼吗?一堆看似简单的foreach,却冗长无趣,可仍还在不停的repeat it!也许你已经用上了Underscore.js,不错,你已经进步很 ...
最新文章
- iOS下的类似Android的toast提示
- 11MYSQL:慢查询以及优化步骤
- 高校各部门老师真实生活图鉴，哈哈哈哈哈哈哈
- Docker精华问答：Docker与虚拟机的区别？| 技术头条
- Shell判断参数是否为数字的6种方法（是否为整形）
- 研究员轻松劫持2.8万台打印机
- python导入第三方库dlib报错解决
- Vue - 搜索关键字标红高亮（用户输入关键词搜索后，在搜索结果的列表标题上匹配并标红加粗）怎么使内容文本标红高亮的最详细教程，Nuxt.js uni-app 也适用，搜索功能及搜索结果关键字高亮源码
- Python输出emoji表情包
- C++中的常成员函数以及const用于函数重载
- METTLER TOLEDO托利多Bplus 标签格式设置教程（scale manager）
- 数据标注案例分析-足球比赛时间轴打点标注项目
- php 购买车票,jQuery实现买火车票城市选择切换功能
- 进程和线程最生动的理解
- 服务器上的 Git - 在服务器上部署 Git
- springboot蓝天幼儿园管理系统、
- Sql Server 数据类型
- 计算机专业英语名词解释大汇总
- sql语句筛选一个月内生日的用户列表
- Python 怎样导入自己另外的py文件？
热门文章