lodash和lodash-es区别 - js - 前端 - 技术设计

区别

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 的官方文档以获取更详细的信息。

区别