lodash常用方法合集

安装lodash

建议安装lodash-es，lodash-es 是 lodash 的 es modules 版本 ，是着具备 ES6 模块化的版本，体积小。按需引入。

示例

npm i lodash-es

import { chunk,compact } from 'lodash-es'; /**按需引入*/

lodash常用方法

1.chunk 数组分组

chunk(array, [size=1])

参数

array (Array): 需要处理的数组

[size=1] (number): 每个数组区块的长度 */

示例

const arr = [2, 4, 6, 8, 10];
const newArr = chunk(arr, 3);

console.log("newArr:", newArr);
// [ [ 2, 4, 6 ], [ 8, 10 ] ]

2.compact 过滤假值

创建一个新数组，包含原数组中所有的非假值元素。例如false, null,0, "", undefined, 和 NaN 都是被认为是“假值”。

compact(array)

参数

array (Array): 待处理的数组 */

示例

const arr = [0, 1, false, 2, "", 3];
const newArr = compact(arr);

console.log("newArr:", newArr);
// [ 1, 2, 3 ]

3.differenceBy 根据指定的规则去除指定的值

differenceBy(array, [values], [iteratee=_.identity])

调用array 和 values 中的每个元素以产生比较的标准。 结果值是从第一数组中选择。iteratee 会调用一个参数：(value)。（注：首先使用迭代器分别迭代array 和 values中的每个元素，返回的值作为比较值）。

参数

1. array (Array): 要检查的数组。
2. [values] (...Array): 排除的值。
3. [iteratee=_.identity] (Array|Function|Object|string): iteratee 调用每个元素。示例

 示例：

differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
// => [3.1, 1.3]
/*上面的代码实际上是两个数组根据第三个参数Math.floor进行迭代处理，
最后两个数组根据[3,2,1]和[4,2]进行比较*/
 
// The `_.property` iteratee shorthand.
differenceBy([{ 'x': 2,'y':1 }, { 'x': 1,'y':2 }], [{ 'x': 1,'y':1 }], 'y');
// => [{ 'x': 1,'y':2 }]
/*上面的代码实际上是两个数组根据第三个参数'y'进行迭代处理，
最后两个数组根据 键'y' 进行比较*/

4.differenceWith 根据比较器去除指定的值

differenceWith(array, [values], [comparator])

它接受一个 comparator （注：比较器），它调用比较array，values中的元素。 结果值是从第一数组中选择。comparator 调用参数有两个：(arrVal, othVal)。

参数

1. array (Array): 要检查的数组。
2. [values] (...Array): 排除的值。
3. [comparator] (Function): comparator 调用每个元素。

示例

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
 
differenceWith(objects, [{ 'x': 1, 'y': 2 }], isEqual);
// => [{ 'x': 2, 'y': 1 }]
/*以上代码根据比较器isEqual比较两个数组里的值是否相等（不比较地址），
是的话去除*/

5.   tail 获取除了array数组第一个元素以外的全部元素         

tail(array)

参数

1. array (Array): 要检索的数组。

示例

const arr = [{ name: "xiaoming" }, { name: "dog" }, { name: "cat" }];
const newArr = tail(arr);

console.log(newArr);
//[ { "name": "dog" }, { "name": "cat" } ]

6.unionBy 合并数组，并且根据指定的规则去重

unionBy([arrays], [iteratee=_.identity])

参数

1. [arrays] (...Array): 要检查的数组。
2. [iteratee=_.identity] (Array|Function|Object|string): 迭代函数，调用每个元素。

示例

const arr = [{ name: "xiaoming" }];
const newArr = unionBy(
  arr,[{ name: "dog" }, { name: "xiaoming" }],"name"
);
console.log(newArr);
//[ { "name": "xiaoming" }, { "name": "dog" } ]


unionBy([2.1], [1.2, 2.3], Math.floor);
// => [2.1, 1.2]

7.unionWith 合并数组，根据比较器去重

unionWith([arrays], [comparator])

参数

1. [arrays] (...Array): 要检查的数组。
2. [comparator] (Function): 比较函数，调用每个元素。

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
 
unionWith(objects, others, isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]

8.size 检测数据长度

size(collection)

参数

1. collection (Array|Object|String): 要检查的数据

示例

size([1, 2, 3]);
// => 3
 
size({ 'a': 1, 'b': 2 });
// => 2
 
size('pebbles');
// => 7

9.sortBy 数组对象排序

sortBy(collection, [iteratees=[_.identity]])

参数

1. collection (Array|Object): 用来迭代的集合。
2. [iteratees=[_.identity]] (...(Array|Array[]|Function|Function[]|Object|Object[]|string|string[])): 这个函数决定排序。

const users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];
 

sortBy(users, function(o) { return o.user; });
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

sortBy(users, 'age' });
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]
 
sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]
 
sortBy(users, 'user', function(o) {
  return Math.floor(o.age / 10);
});
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

10.clone 浅拷贝

clone(value)

参数

1. value (*): 要拷贝的值

示例

const objects = [{ 'a': 1 }, { 'b': 2 }];
 
var shallow = clone(objects);
console.log(shallow[0] === objects[0]);
// => true

11.cloneDeep 深拷贝

cloneDeep(value)

参数

1. value (*): 要深拷贝的值。

示例

const objects = [{ 'a': 1 }, { 'b': 2 }];
 
const deep = cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

12.isEqual 深比较来确定两者的值是否相等

isEqual(value, other)

参数

1. value (*): 用来比较的值。
2. other (*): 另一个用来比较的值。

const arr = [
    { name: "xiaoming" },
    { name: "dog" },
    { name: "cat", info: { address: "翻斗花园" } },
 ];
const newArr = [
    { name: "xiaoming" },
    { name: "dog" },
    { name: "cat", info: { address: "翻斗花园" } },
 ];

console.log(isEqual(arr, newArr));
// true
 
arr === newArr;
// => false

13. 二次封装防抖，节流

import {throttle,debounce} from 'lodash-es';
//节流
export const throttled = throttle(
  (fun, ...args) => fun(...args),
  1500,
  {
    leading: true,
    trailing: false
  }
);
//防抖
export const debounced = debounce(
  (fun, ...args) => fun(...args),
  500
);

//页面使用
<button @click=throttled(handleQuery,name,id)>查询</button>

拓展： 

lodash是什么，我们为什么要使用lodash？

Lodash 是一个 JavaScript 实用工具库，它提供了许多有用的函数，用于处理数组、对象和字符串等数据类型。Lodash 的函数是模块化的，并且可以独立使用，这使得它非常灵活和可扩展。

使用 Lodash的好处：

1. 简化代码：Lodash 提供了许多常用的函数，这些函数可以简化你的代码，使你的代码更易于理解和维护。

2. 提高性能：Lodash 的函数是用纯 JavaScript 编写的，并且经过优化，这使得它们通常比手写的函数更快。

3. 减少错误：Lodash 的函数经过了广泛的测试，并且已经修复了许多已知的问题。使用 Lodash 可以减少你的代码中的错误。

4. 易于扩展：Lodash 的函数是模块化的，并且可以独立使用。这使得你可以只使用你需要的函数，而不需要加载整个库。

 总的来说，Lodash 是一个非常有用的 JavaScript 库，它可以帮助你编写更简洁、更高效、更可靠的代码。

lodash和lodash-es的区别

Lodash 和 Lodash-es 是两个版本的 Lodash 库，它们的主要区别在于模块系统的使用。

Lodash 是一个传统的 CommonJS 模块，它使用 require 来导入模块，并使用 module.exports 来导出模块。Lodash 的 CommonJS 版本适用于 Node.js 环境。

Lodash-es 是 Lodash 的 ES 模块版本，它使用 import 和 export 来导入和导出模块。Lodash-es 的 ES 模块版本适用于现代的 JavaScript 环境，例如浏览器和现代的 JavaScript 运行时。

请注意，虽然 Lodash 和 Lodash-es 在功能上是相同的，但它们的使用方式是不同的。你应该根据你的项目环境和需求来选择使用哪个版本。