lodash常用方法合集

安装lodash

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

示例

npm i lodash-es

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

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>