# 区别

  • 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 还提供了诸如 mapfilterreducegroupBy 等常见的数据处理函数,以便更方便地操作和处理数组和对象。可以查阅 lodash 的官方文档以获取更详细的信息。