Vue3使用lodash-es

大家好，欢迎来到IT知识分享网。

1.Lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 遵循 MIT 开源协议发布，并且支持最新的运行环境。

Lodash 是一个非常流行的 JavaScript 实用工具库，涵盖了数组处理、对象操作、函数式编程、字符串处理等。

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法非常适用于：

• 遍历 array、object 和 string
• 对值进行操作和检测
• 创建符合功能的函数

2.lodash-es

lodash为了良好的浏览器兼容性, 它使用了旧版es5的模块语法; 而lodash-es则使用了es6的模块语法, 这让webpack之类的打包工具可以对其进行tree shake以删除未使用的代码来优化打包尺寸。

lodash-es 是 Lodash 库的 ECMAScript 模块版本，支持 ES6 模块的环境下提供的模块化版本。与传统的 lodash 库相比，lodash-es 允许你以模块化的方式导入和使用其中的功能，以便在现代 JavaScript 应用中更好地利用模块系统。

3.Vue3 使用 lodash-es

安装：

npm install lodash-es npm install @types/lodash-es

引入：

import * as _ from 'lodash-es'; //引入所有 import _ from "lodash-es"; //定义变量_ (_是官方推荐的，你可以自由定义)，接受所有 import { assign } from "lodash-es"; // 按需引入，推荐使用这个

4.示例

4.1cloneDeep

该函数用于深拷贝一个对象或数组，创建一个完全独立的副本。拷贝后的对象与原始对象没有任何引用关系。

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'] }

4.2 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

4.3 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

4.4 debounce

该函数用于创建一个防抖函数，用于限制某个操作在指定时间内只执行一次。常用于输入框搜索、窗口调整等场景。

import { debounce } from 'lodash-es'; const handleInput = debounce(function() { // 在这里执行你的逻辑操作 }, 300); inputElement.addEventListener('input', handleInput);

4.5 throttle

throttle 函数与 debounce 函数类似，但它确保一个操作在指定时间间隔内至少执行一次。可用于限制触发频率较高的事件处理函数的执行次数。

import { throttle } from 'lodash-es'; const handleScroll = throttle(function() { // 在这里执行你的逻辑操作 }, 100); window.addEventListener('scroll', handleScroll);

4.6 uniqBy

根据数组的某个属性去重

import { uniqBy } from "lodash-es"; messageList = uniqBy(messageList, "msg_id");// 数组、你的对象内的字段

4.7 forEach

循环，可以循环对象、数组。

import { forEach } from "lodash-es"; // 循环对象 forEach({ 'a': 1, 'b': 2 }, function(value, key) { console.log(key); // a b }); // 循环数组 forEach(item.list, (listItem) => { });

4.8 includes

数组，对象，字符串中是否包含。

import { includes} from "lodash-es"; includes([1, 2, 3], 1);// => true includes([1, 2, 3], 1, 2);// => false 这里是说在数组的下标为2的值，是否==1 includes({ 'user': 'fred', 'age': 40 }, 'fred');// => true includes('pebbles', 'eb');// => true

4.9 filter

过滤，使用与 js 的 filter 过滤差不多，不过搜索条件支持的不仅仅是函数，还有对象、数组、字符串。

import { filter } from "lodash-es"; const arr = [ { 'user': 'barney', 'age': 36, 'active': true }, { 'user': 'fred', 'age': 40, 'active': false } ]; //跟js中的filter一样，支持函数 filter(arr, (o)=>!o.active ); // 通过对象过滤 filter(arr, { 'age': 36});// 结果是：{ 'user': 'barney', 'age': 36, 'active': true } // 根据数组过滤 active===false filter(arr, ['active', false]);//结果是：{ 'user': 'fred', 'age': 40, 'active': false } // 根据字符串过滤 filter(arr, 'active');// =>结果是： { 'user': 'barney', 'age': 36, 'active': true }

4.10 find

查找，可以针对数组、对象进行查找，返回指定数据 || undefined。

import { find } from "lodash-es"; // 对象中查找 find(obj, (item) => item.value === 111) // 数组中查找,跟js一样的 find(arr, (item) => item.value === 111)

5.Lodash 中文文档

https://www.lodashjs.com/