Lodash的常用方法整理

Lodash的常用方法

安装 Lodash

首先，确保你已经安装了 Lodash 库。你可以使用 npm 或 yarn 来安装：

npm install lodash

或者

yarn add lodash

1、使用 Lodash 进行类型检查

在 JavaScript 开发中，类型检查是一个非常重要的环节，尤其是在处理复杂的数据结构时。Lodash 提供了一系列强大的类型检查函数，可以帮助我们更安全、更高效地进行类型判断。本文将详细介绍这些函数的用法和示例。

常用的类型检查函数及其用法

常用的类型检查函数如下：

以下是具体使用方法

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。

具体使用方法如下：

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