Lodash的常用方法
安装 Lodash
首先,确保你已经安装了 Lodash 库。你可以使用 npm 或 yarn 来安装:
npm install lodash
或者
yarn add lodash
1、使用 Lodash 进行类型检查
在 JavaScript 开发中,类型检查是一个非常重要的环节,尤其是在处理复杂的数据结构时。Lodash 提供了一系列强大的类型检查函数,可以帮助我们更安全、更高效地进行类型判断。本文将详细介绍这些函数的用法和示例。
常用的类型检查函数及其用法
常用的类型检查函数如下:
函数名称 | 功能描述 | 示例 |
---|---|---|
cloneDeep | 创建一个对象或数组的深拷贝 | cloneDeep({ a: [1, 2, 3], b: { c: 4 } }) |
isArray | 检查值是否为数组 | isArray([]) |
isFunction | 检查值是否为函数 | isFunction(function() {}) |
isObject | 检查值是否为对象(包括数组和函数) | isObject({}) |
isNaN | 检查值是否为 NaN | isNaN(NaN) |
isNumber | 检查值是否为数字 | isNumber(123) |
isInteger | 检查值是否为整数 | isInteger(123) |
isNil | 检查值是否为 null 或 undefined | isNil(null) |
isEmpty | 检查值是否为空 | isEmpty('') |
isArguments | 检查值是否为 arguments 对象 | isArguments(arguments) |
isBuffer | 检查值是否为 Node.js 的 Buffer 对象 | isBuffer(Buffer.from('abc')) |
isDate | 检查值是否为 Date 对象 | isDate(new Date()) |
isElement | 检查值是否为 DOM 元素 | isElement(document.createElement('div')) |
isRegExp | 检查值是否为正则表达式对象 | isRegExp(/abc/) |
isSet | 检查值是否为 Set 对象 | isSet(new Set()) |
isString | 检查值是否为字符串 | isString('abc') |
isSymbol | 检查值是否为符号 | isSymbol(Symbol('abc')) |
isUndefined | 检查值是否为 undefined | isUndefined(undefined) |
isError | 检查值是否为 Error 对象 | isError(new Error()) |
isFinite | 检查值是否为有限数值 | isFinite(123) |
isLength | 检查值是否为有效的数组长度 | isLength(5) |
isMap | 检查值是否为 Map 对象 | isMap(new Map()) |
isMatch | 检查对象是否匹配指定的属性值 | isMatch({ a: 1, b: 2 }, { a: 1 }) |
isNative | 检查值是否为原生函数 | isNative(Array.prototype.push) |
isPlainObject | 检查值是否为纯对象(即通过 {} 或 new Object 创建的对象) | isPlainObject({}) |
isTypedArray | 检查值是否为类型化数组(如 Uint8Array 、Int32Array 等) | isTypedArray(new Uint8Array()) |
isWeakMap | 检查值是否为 WeakMap 对象 | isWeakMap(new WeakMap()) |
isWeakSet | 检查值是否为 WeakSet 对象 | isWeakSet(new WeakSet()) |
以下是具体使用方法
1. cloneDeep
用于创建一个对象或数组的深拷贝,拷贝意味着不仅复制对象的顶层属性,还会递归地复制所有嵌套的对象和数组,从而确保原始对象和拷贝对象完全独立,互不影响。
import { cloneDeep } from 'lodash';const original = { a: [1, 2, 3], b: { c: 4 } };
const copied = cloneDeep(original);console.log(copied); // { a: [1, 2, 3], b: { c: 4 } }
console.log(copied === original); // false
console.log(copied.a === original.a); // false
console.log(copied.b === original.b); // false
2. isArray
检查值是否为数组。
import { isArray } from 'lodash';console.log(isArray([])); // true
console.log(isArray({})); // false
console.log(isArray('string')); // false
3. isFunction
检查值是否为函数。
import { isFunction } from 'lodash';console.log(isFunction(function() {})); // true
console.log(isFunction(() => {})); // true
console.log(isFunction({})); // false
4. isObject
检查值是否为对象(包括数组和函数)。
import { isObject } from 'lodash';console.log(isObject({})); // true
console.log(isObject([])); // true
console.log(isObject(function() {})); // true
console.log(isObject(123)); // false
5. isNaN
检查值是否为 NaN(注意:NaN 是唯一不等于自身的值)。
import { isNaN } from 'lodash';console.log(isNaN(NaN)); // true
console.log(isNaN(123)); // false
console.log(isNaN('string')); // false
6. isNumber
检查值是否为数字。
import { isNumber } from 'lodash';console.log(isNumber(123)); // true
console.log(isNumber(123.45)); // true
console.log(isNumber('123')); // false
7. isInteger
检查值是否为整数。
import { isInteger } from 'lodash';console.log(isInteger(123)); // true
console.log(isInteger(123.45)); // false
console.log(isInteger('123')); // false
8. isNil
检查值是否为 null 或 undefined。
import { isNil } from 'lodash';console.log(isNil(null)); // true
console.log(isNil(undefined)); // true
console.log(isNil('string')); // false
9. isEmpty
检查值是否为空。对于不同类型的值,isEmpty
的判断标准如下:
- 字符串:长度为 0。
- 数组:长度为 0。
- 对象:没有自己的可枚举属性。
- Map 和 Set:大小为 0。
- 其他:总是返回
false
。
import { isEmpty } from 'lodash';console.log(isEmpty('')); // true
console.log(isEmpty([])); // true
console.log(isEmpty({})); // true
console.log(isEmpty(new Map())); // true
console.log(isEmpty(new Set())); // true
console.log(isEmpty('string')); // false
console.log(isEmpty([1, 2, 3])); // false
console.log(isEmpty({ key: 'value' })); // false
10. isArguments
检查值是否为 arguments
对象。
import { isArguments } from 'lodash';function test() {console.log(isArguments(arguments)); // true
}test();
console.log(isArguments([])); // false
11. isBuffer
检查值是否为 Node.js 的 Buffer
对象。
import { isBuffer } from 'lodash';console.log(isBuffer(Buffer.from('abc'))); // true
console.log(isBuffer([])); // false
12. isDate
检查值是否为 Date
对象。
import { isDate } from 'lodash';console.log(isDate(new Date())); // true
console.log(isDate('2023-10-01')); // false
13. isElement
检查值是否为 DOM 元素。
import { isElement } from 'lodash';const div = document.createElement('div');
console.log(isElement(div)); // true
console.log(isElement({})); // false
14. isRegExp
检查值是否为正则表达式对象。
import { isRegExp } from 'lodash';console.log(isRegExp(/abc/)); // true
console.log(isRegExp('abc')); // false
15. isSet
检查值是否为 Set
对象。
import { isSet } from 'lodash';console.log(isSet(new Set())); // true
console.log(isSet({})); // false
16. isString
检查值是否为字符串。
import { isString } from 'lodash';console.log(isString('abc')); // true
console.log(isString(123)); // false
17. isSymbol
检查值是否为符号。
import { isSymbol } from 'lodash';console.log(isSymbol(Symbol('abc'))); // true
console.log(isSymbol('abc')); // false
18. isUndefined
检查值是否为 undefined
。
import { isUndefined } from 'lodash';console.log(isUndefined(undefined)); // true
console.log(isUndefined(null)); // false
19. isError
检查值是否为 Error
对象。
import { isError } from 'lodash';console.log(isError(new Error())); // true
console.log(isError('error message')); // false
20. isFinite
检查值是否为有限数值。
import { isFinite } from 'lodash';console.log(isFinite(123)); // true
console.log(isFinite(Infinity)); // false
console.log(isFinite(NaN)); // false
21. isLength
检查值是否为有效的数组长度。
import { isLength } from 'lodash';console.log(isLength(5)); // true
console.log(isLength(0)); // true
console.log(isLength(-1)); // false
console.log(isLength(1.5)); // false
console.log(isLength('5')); // false
22. isMap
检查值是否为 Map
对象。
import { isMap } from 'lodash';console.log(isMap(new Map())); // true
console.log(isMap({})); // false
23. isMatch
检查对象是否匹配指定的属性值。
import { isMatch } from 'lodash';const object = { a: 1, b: 2 };
console.log(isMatch(object, { a: 1 })); // true
console.log(isMatch(object, { a: 2 })); // false
24. isNative
检查值是否为原生函数。
import { isNative } from 'lodash';console.log(isNative(Array.prototype.push)); // true
console.log(isNative(function() {})); // false
25. isPlainObject
检查值是否为纯对象(即通过 {}
或 new Object
创建的对象)。
import { isPlainObject } from 'lodash';console.log(isPlainObject({})); // true
console.log(isPlainObject(new Object())); // true
console.log(isPlainObject([1, 2, 3])); // false
console.log(isPlainObject(new Date())); // false
26. isTypedArray
检查值是否为类型化数组(如 Uint8Array
、Int32Array
等)。
import { isTypedArray } from 'lodash';console.log(isTypedArray(new Uint8Array())); // true
console.log(isTypedArray([])); // false
27. isWeakMap
检查值是否为 WeakMap
对象。
import { isWeakMap } from 'lodash';console.log(isWeakMap(new WeakMap())); // true
console.log(isWeakMap({})); // false
28. isWeakSet
检查值是否为 WeakSet
对象。
import { isWeakSet } from 'lodash';console.log(isWeakSet(new WeakSet())); // true
console.log(isWeakSet({})); // false
2、在项目中Lodash 中常用的函数及其功能和示例
这些函数包括 omit、pick、debounce、has、get、cloneDeep、uniqueId、merge、assign、keys、compact、difference、findIndex、includes 和 remove。
函数名称 | 功能描述 | 示例 |
---|---|---|
omit | 创建一个不包含指定键的新对象 | omit({ a: 1, b: 2, c: 3 }, ['a', 'c']) |
pick | 创建一个只包含指定键的新对象 | pick({ a: 1, b: 2, c: 3 }, ['a', 'c']) |
debounce | 创建一个防抖函数,延迟执行直到最后一次调用后经过指定时间 | const debounced = debounce(console.log, 1000); |
has | 检查对象是否有指定的路径属性 | has({ a: { b: 2 } }, 'a.b') |
get | 获取对象中指定路径的值,如果路径不存在返回默认值 | get({ a: { b: 2 } }, 'a.b', 0) |
cloneDeep | 创建一个对象或数组的深拷贝 | cloneDeep({ a: [1, 2, 3], b: { c: 4 } }) |
uniqueId | 生成一个唯一的 ID | uniqueId('prefix-') |
merge | 合并多个对象,支持嵌套对象的合并 | merge({ a: { b: 1 } }, { a: { c: 2 } }) |
assign | 将源对象的所有可枚举属性复制到目标对象 | assign({ a: 1 }, { b: 2 }, { c: 3 }) |
keys | 获取对象的所有键 | keys({ a: 1, b: 2, c: 3 }) |
compact | 移除数组中的假值(false、null、0、“”、undefined、NaN) | compact([0, 1, false, 2, '', 3]) |
difference | 返回两个数组的差集 | difference([1, 2, 3], [2, 3, 4]) |
findIndex | 查找数组中满足条件的第一个元素的索引 | findIndex([1, 2, 3, 4], n => n > 2) |
includes | 检查数组是否包含指定的值 | includes([1, 2, 3, 4], 3) |
remove | 移除数组中满足条件的元素,并返回被移除的元素 | remove([1, 2, 3, 4], n => n % 2 === 0) |
具体使用方法如下:
1. omit
功能描述:创建一个不包含指定键的新对象。
参数:
- object (Object):要操作的对象。
- [paths]… (string|string[]):要省略的键或键路径。
返回值: - (Object):一个新的对象,不包含指定的键。
示例:
const obj = { a: 1, b: 2, c: 3 };
const result = _.omit(obj, ['a', 'c']);
console.log(result); // { b: 2 }// 省略嵌套对象的键
const nestedObj = { a: 1, b: { c: 2, d: 3 } };
const result2 = _.omit(nestedObj, ['b.c']);
console.log(result2); // { a: 1, b: { d: 3 } }
实际应用:
在处理表单数据时,可能需要从提交的数据中移除某些不需要的字段。
2. pick
功能描述:创建一个只包含指定键的新对象。
参数:
- object (Object):要操作的对象。
- [paths]… (string|string[]):要保留的键或键路径。
返回值: - (Object):一个新的对象,只包含指定的键。
示例:
const obj = { a: 1, b: 2, c: 3 };
const picked = _.pick(obj, ['a', 'c']);
console.log(picked); // { a: 1, c: 3 }// 选择嵌套对象的键
const nestedObj = { a: 1, b: { c: 2, d: 3 } };
const result2 = _.pick(nestedObj, ['b.c']);
console.log(result2); // { b: { c: 2 } }
实际应用:
在处理 API 请求时,可能只需要发送部分数据字段。
3. debounce
功能描述:创建一个防抖函数,延迟执行直到最后一次调用后经过指定时间。
参数:
- func (Function):要防抖的函数。
- wait (number):等待的时间(毫秒)。
- [options] (Object):可选配置对象。
- leading (boolean):是否在第一次调用时立即执行。
- maxWait (number):最大等待时间。
返回值:
- (Function):防抖后的函数。
示例:
const debounced = _.debounce(console.log, 1000);
debounced('Hello'); // 1秒后输出 'Hello'// 配置选项
const debounced2 = _.debounce(console.log, 1000, { leading: true, maxWait: 2000 });
debounced2('Hi'); // 立即输出 'Hi'
实际应用:
在处理滚动事件或输入事件时,防止频繁触发导致性能问题。
4. has
功能描述:检查对象是否有指定的路径属性。
参数:
- object (Object):要检查的对象。
- path (string|string[]):要检查的路径。
返回值: - (boolean):是否存在指定路径的属性。
示例:
const nestedObj = { a: { b: 2 } };
console.log(_.has(nestedObj, 'a.b')); // true
console.log(_.has(nestedObj, 'a.c')); // false
实际应用:
在处理复杂对象时,确保某个路径存在再进行操作。
5. get
功能描述:获取对象中指定路径的值,如果路径不存在返回默认值。
参数:
- object (Object):要获取值的对象。
- path (string|string[]):要获取的路径。
- [defaultValue] (any):路径不存在时的默认值。
返回值: - (any):指定路径的值或默认值。
示例:
const nestedObj = { a: { b: 2 } };
console.log(_.get(nestedObj, 'a.b', 0)); // 2
console.log(_.get(nestedObj, 'a.c', 0)); // 0
实际应用:
在处理不确定结构的数据时,安全地获取值。
6. cloneDeep
功能描述:创建一个对象或数组的深拷贝。
参数:
- value (any):要拷贝的值。
返回值: - (any):深拷贝后的值。
示例:
const original = { a: [1, 2, 3], b: { c: 4 } };
const copied = _.cloneDeep(original);
console.log(copied); // { a: [1, 2, 3], b: { c: 4 } }
console.log(copied === original); // false
console.log(copied.a === original.a); // false
console.log(copied.b === original.b); // false
实际应用:
在处理复杂数据结构时,避免引用问题。
7. uniqueId
功能描述:生成一个唯一的 ID。
参数:
- [prefix=‘’] (string):ID 的前缀。
返回值: - (string):唯一的 ID。
示例:
console.log(_.uniqueId('prefix-')); // prefix-1
console.log(_.uniqueId('prefix-')); // prefix-2
实际应用:
在生成唯一标识符时,确保每个 ID 都是唯一的。
8. merge
功能描述:合并多个对象,支持嵌套对象的合并。
参数:
- object (Object):目标对象。
- [sources]… (Object):源对象。
返回值: - (Object):合并后的对象。
示例:
const merged = _.merge({ a: { b: 1 } }, { a: { c: 2 } });
console.log(merged); // { a: { b: 1, c: 2 } }
实际应用:
在处理配置文件或状态管理时,合并多个对象。
9. assign
功能描述:将源对象的所有可枚举属性复制到目标对象。
参数:
- object (Object):目标对象。
- [sources]… (Object):源对象。
返回值: - (Object):合并后的对象。
示例:
const assigned = _.assign({ a: 1 }, { b: 2 }, { c: 3 });
console.log(assigned); // { a: 1, b: 2, c: 3 }
实际应用:
在处理简单对象合并时,快速复制属性。
10. keys
功能描述:获取对象的所有键。
参数:
- object (Object):要获取键的对象。
返回值: - (Array):对象的所有键组成的数组。
示例:
const keysArray = _.keys({ a: 1, b: 2, c: 3 });
console.log(keysArray); // ['a', 'b', 'c']
实际应用:
在遍历对象的键时,获取所有键的列表。
11. compact
功能描述:移除数组中的假值(false、null、0、“”、undefined、NaN)。
参数:
- array (Array):要操作的数组。
返回值: - (Array):移除假值后的数组。
示例:
const compacted = _.compact([0, 1, false, 2, '', 3]);
console.log(compacted); // [1, 2, 3]
实际应用:
在处理数组时,过滤掉无效的值。
12. difference
功能描述:返回两个数组的差集。
参数:
- array (Array):第一个数组。
- [values]… (Array):其他数组。
返回值: - (Array):差集数组。
示例:
const diff = _.difference([1, 2, 3], [2, 3, 4]);
console.log(diff); // [1]
实际应用:
在比较两个数组时,找出独有的元素。
13. findIndex
功能描述:查找数组中满足条件的第一个元素的索引。
参数:
- array (Array):要操作的数组。
- [predicate=_.identity] (Function|Object|string):用于确定哪些元素满足条件的断言函数、对象或字符串。
- [fromIndex=0] (number):开始搜索的索引。
返回值: - (number):满足条件的第一个元素的索引,如果未找到返回 -1。
示例:
const index = _.findIndex([1, 2, 3, 4], n => n > 2);
console.log(index); // 2
实际应用:
在数组中查找特定元素的位置。
14. includes
功能描述:检查数组是否包含指定的值。
参数:
- collection (Array|Object):要检查的集合。
- value (any):要检查的值。
- [fromIndex=0] (number):开始检查的索引。
返回值: - (boolean):是否包含指定的值。
示例:
console.log(_.includes([1, 2, 3, 4], 3)); // true
console.log(_.includes([1, 2, 3, 4], 5)); // false
实际应用:
在数组或对象中检查某个值是否存在。
15. remove
功能描述:移除数组中满足条件的元素,并返回被移除的元素。
参数:
- array (Array):要操作的数组。
- [predicate=_.identity] (Function|Object|string):用于确定哪些元素应该被移除的断言函数、对象或字符串。
返回值: - (Array):被移除的元素组成的数组。
示例:
const array = [1, 2, 3, 4];
const removed = _.remove(array, n => n % 2 === 0);
console.log(removed); // [2, 4]
console.log(array); // [1, 3]
实际应用:
在处理数组时,根据条件移除元素。
总结
以上是 Lodash 中一些常用函数的详细解释和示例代码。这些函数可以帮助你在处理数据时更加高效和简洁。如果你有任何进一步的问题或需要更多的示例,请随时提问!