安装lodash
建议安装lodash-es，lodash-es 是 lodash 的 es modules 版本 ，是着具备 ES6 模块化的版本，体积小。按需引入。
示例
javascript
npm i lodash-esimport { chunk,compact } from 'lodash-es'; /**按需引入*/1.chunk 数组分组
chunk(array, [size=1])
参数
array (Array): 需要处理的数组
size=1\] (number): 每个数组区块的长度 \*/ #### 示例 ```javascript 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): 待处理的数组 \*/ #### 示例 ```javascript 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 调用每个元素。示例 #### 示例： ```javascript 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 调用每个元素。 #### 示例 ```javascript 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)*: 要检索的数组。 示例 ```javascript 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)*: 迭代函数，调用每个元素。 #### 示例 ```javascript 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)*: 比较函数，调用每个元素。 ```javascript 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)*: 要检查的数据 #### 示例 ```javascript 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\[\]))*: 这个函数决定排序。 ```javascript 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` *(\*)*: 要拷贝的值 示例 ```javascript const objects = [{ 'a': 1 }, { 'b': 2 }]; var shallow = clone(objects); console.log(shallow[0] === objects[0]); // => true ``` ### 11.`cloneDeep 深拷贝` `cloneDeep(value)` ##### 参数 1. `value` *(\*)*: 要深拷贝的值。 #### 示例 ```javascript 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` *(\*)*: 另一个用来比较的值。 ```javascript 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. 二次封装防抖，节流 ```javascript 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 ); //页面使用 ```