Lodash的常用方法整理

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 中一些常用函数的详细解释和示例代码。这些函数可以帮助你在处理数据时更加高效和简洁。如果你有任何进一步的问题或需要更多的示例，请随时提问！

---