# 区别
lodash 是默认的 commonjs 版本
lodash-es 是 lodash 的 es modules 版本,体积也更小
如果使用打包工具,二者都是可以使用的。
# 一些常用的 lodash 函数:
# _.debounce
该函数用于创建一个防抖函数,用于限制某个操作在指定时间内只执行一次。常用于输入框搜索、窗口调整等场景。
import { debounce } from 'lodash-es'; | |
const handleInput = debounce(function() { | |
// 在这里执行你的逻辑操作 | |
}, 300); | |
inputElement.addEventListener('input', handleInput); |
# _.throttle
throttle
函数与 debounce
函数类似,但它确保一个操作在指定时间间隔内至少执行一次。可用于限制触发频率较高的事件处理函数的执行次数。
import { throttle } from 'lodash-es'; | |
const handleScroll = throttle(function() { | |
// 在这里执行你的逻辑操作 | |
}, 100); | |
window.addEventListener('scroll', handleScroll); |
# _.cloneDeep
该函数用于深拷贝一个对象或数组,创建一个完全独立的副本。拷贝后的对象与原始对象没有任何引用关系。
import { cloneDeep } from 'lodash-es'; | |
const originalObj = { name: 'Alice', age: 25, hobbies: ['reading', 'music'] }; | |
const clonedObj = cloneDeep(originalObj); | |
clonedObj.name = 'Bob'; | |
clonedObj.hobbies.push('sports'); | |
console.log(originalObj); // { name: 'Alice', age: 25, hobbies: ['reading', 'music'] } | |
console.log(clonedObj); // { name: 'Bob', age: 25, hobbies: ['reading', 'music', 'sports'] } |
# _.isEmpty
该函数用于检查一个值是否为空,包括空对象、空数组、空字符串和 null/undefined。
import { isEmpty } from 'lodash-es'; | |
console.log(isEmpty({})); // true | |
console.log(isEmpty([])); // true | |
console.log(isEmpty('')); // true | |
console.log(isEmpty(null)); // true | |
console.log(isEmpty(undefined)); // true | |
console.log(isEmpty({ name: 'Alice' })); // false |
# _.isEqual
该函数用于深度比较两个值是否相等,递归地比较对象和数组的内容。
import { isEqual } from 'lodash-es'; | |
const obj1 = { name: 'Alice', age: 25 }; | |
const obj2 = { name: 'Alice', age: 25 }; | |
const arr1 = [1, 2, { prop: 'value' }]; | |
const arr2 = [1, 2, { prop: 'value' }]; | |
console.log(isEqual(obj1, obj2)); // true | |
console.log(isEqual(arr1, arr2)); // true |
这些只是 lodash
提供的众多实用函数中的几个例子。 lodash
还提供了诸如 map
、 filter
、 reduce
、 groupBy
等常见的数据处理函数,以便更方便地操作和处理数组和对象。可以查阅 lodash
的官方文档以获取更详细的信息。