Lodash入门及方法汇总（全）

小咪咪 2023-02-12 08:28 25阅读 0赞

## 1.  Lodash工具 ##

> 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
> 
> 内部封装非常多使用函数，操作数组操作对象的方法。可以说是一个非常实用的工具函数。
> 
> Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

## 2.  引入使用 ##

完整版下载地址 ： [https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/lodash.js][https_raw.githubusercontent.com_lodash_lodash_4.17.15-npm_lodash.js]

浏览器环境：

通过 npm：

> 全局安装

$ npm i -g npm

> 安装在项目里

$ npm i --save lodash

> node.js中使用

// Load the full build.
    const _ = require('lodash');

> Vue 组件内使用

首先在babel.config.js里加入

module.exports = {
      presets: ['@vue/app'],
      plugins: [
        'lodash'
      ]
    };

组件内调用

import _ from 'lodash';

## 3. 常用方法汇总 ##

> **使用 \_ 下划线表示了lodash的对象，类似于jquery的$ ** 
> 
> **我的建议是文档撸一遍，以后想用的时候知道有这个功能来查文档即可。**

### 3.1 数组方法 ###

> ### `_.chunk(array, [size=1])` ###

将数组（array）拆分成多个 `size` 长度的区块，并将这些区块组成一个新数组。 如果`array` 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

返回一个包含拆分区块的新数组（注：相当于一个二维数组）。

_.chunk(['a', 'b', 'c', 'd'], 2);
    // => [['a', 'b'], ['c', 'd']]
    _.chunk(['a', 'b', 'c', 'd'], 3);
    // => [['a', 'b', 'c'], ['d']]

> ### `_.compact(array)` ###

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

返回值

返回过滤掉假值的新数组。

例子

_.compact([0, 1, false, 2, '', 3]);
    // => [1, 2, 3]

> ### `_.concat(array, [values])` ###

创建一个新数组，将`array`与任何数组 或 值连接在一起。

var array = [1];
    var other = _.concat(array, 2, [3], [[4]]);
    console.log(other);
    // => [1, 2, 3, [4]]
     console.log(array);
    // => [1]

> ### `_.difference(array, [values])` ###

创建一个具有唯一`array`值的数组，每个值不包含在其他给定的数组中。（注：即创建一个新数组，这个数组中的值，为第一个数字（`array` 参数）排除了给定数组中的值。）

_.difference([3, 2, 1], [4, 2]);
    // => [3, 1]

> ### `_.drop(array, [n=1])` ###

创建一个切片数组，去除`array`前面的`n`个元素。（`n`默认值为1。）

_.drop([1, 2, 3]);
    // => [2, 3]
     
    _.drop([1, 2, 3], 2);
    // => [3]
     
    _.drop([1, 2, 3], 5);
    // => []
     
    _.drop([1, 2, 3], 0);
    // => [1, 2, 3]

> ### `_.fill(array, value, [start=0], [end=array.length])` ###

使用 `value` 值来填充（替换） `array`，从`start`位置开始, 到`end`位置结束（但不包含`end`位置）。

参数

1.  `array` *(Array)*: 要填充改变的数组。
2.  `value` *(\*)*: 填充给 `array` 的值。
3.  `[start=0]` *(number)*: 开始位置（默认0）。
4.  `[end=array.length]` *(number)*:结束位置（默认array.length）。

var array = [1, 2, 3];
     
    _.fill(array, 'a');
    console.log(array);
    // => ['a', 'a', 'a']
     
    _.fill(Array(3), 2);
    // => [2, 2, 2]
     
    _.fill([4, 6, 8, 10], '*', 1, 3);
    // => [4, '*', '*', 10]

> ### `_.flatten(array)` ###

减少一级`array`嵌套深度。

_.flatten([1, [2, [3, [4]], 5]]);
    // => [1, 2, [3, [4]], 5]

> ### `_.flattenDeep(array)` ###

将`array`递归为一维数组。

_.flattenDeep([1, [2, [3, [4]], 5]]);
    // => [1, 2, 3, 4, 5]

> ### `_.fromPairs(pairs)` ###

这个方法返回一个由键值对`pairs`构成的对象。

_.fromPairs([['fred', 30], ['barney', 40]]);
    // => { 'fred': 30, 'barney': 40 }

> ### `_.initial(array)` ###

获取数组`array`中除了最后一个元素之外的所有元素（注：去除数组`array`中的最后一个元素）。

_.initial([1, 2, 3]);
    // => [1, 2]

> ### `_.intersection([arrays])` ###

创建唯一值的数组，这个数组包含所有给定数组都包含的元素 （取其交集）

_.intersection([2, 1], [4, 2], [1, 2]);
    // => [2]

> ### `_.nth(array, [n=0])` ###

获取`array`数组的第n个元素。如果`n`为负数，则返回从数组结尾开始的第n个元素。

var array = ['a', 'b', 'c', 'd'];
     
    _.nth(array, 1);
    // => 'b'
     
    _.nth(array, -2);
    // => 'c';

> ### `_.pull(array, [values])` ###

移除数组`array`中所有和给定值相等的元素

var array = [1, 2, 3, 1, 2, 3];
     
    _.pull(array, 2, 3);
    console.log(array);
    // => [1, 1]

> ### `_.pullAll(array, values)` ###

这个方法类似`_.pull，`区别是这个方法接收一个要移除值的数组。

var array = [1, 2, 3, 1, 2, 3];
     
    _.pullAll(array, [2, 3]);
    console.log(array);
    // => [1, 1]

> ### `_.remove(array, [predicate=_.identity])` ###

移除数组中`predicate`（断言）返回为真值的所有元素，并返回移除元素组成的数组。`predicate`（断言） 会传入3个参数： *(value, index, array)*。

var array = [1, 2, 3, 4];
    var evens = _.remove(array, function(n) {
      return n % 2 == 0;
    });
     
    console.log(array);
    // => [1, 3]
     
    console.log(evens);
    // => [2, 4]

### `_.reverse(array)` ###

反转`array`，使得第一个元素变为最后一个元素，第二个元素变为倒数第二个元素，依次类推。

var array = [1, 2, 3];
     
    _.reverse(array);
    // => [3, 2, 1]
     
    console.log(array);
    // => [3, 2, 1]

> ### `_.sortedUniq(array)` ###

返回一个新的不重复的数组。

_.sortedUniq([1, 1, 2]);
    // => [1, 2]

> ### `_.sortedUniqBy(array, [iteratee])` ###

返回一个新的不重复的数组。

_.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor);
    // => [1.1, 2.3]

> ### `_.tail(array)` ###

获取除了`array`数组第一个元素以外的全部元素。

_.tail([1, 2, 3]);
    // => [2, 3]

> ### `_.take(array, [n=1])` ###

返回 `array` 数组的切片（从起始元素开始`n`个元素）。

_.take([1, 2, 3]);
    // => [1]
     
    _.take([1, 2, 3], 2);
    // => [1, 2]
     
    _.take([1, 2, 3], 5);
    // => [1, 2, 3]
     
    _.take([1, 2, 3], 0);
    // => []

> ### `_.takeRight(array, [n=1])` ###

创建一个数组切片，从`array`数组的最后一个元素开始提取`n`个元素。

_.takeRight([1, 2, 3]);
    // => [3]
     
    _.takeRight([1, 2, 3], 2);
    // => [2, 3]
     
    _.takeRight([1, 2, 3], 5);
    // => [1, 2, 3]
     
    _.takeRight([1, 2, 3], 0);
    // => []

> ### `_.zip([arrays])` ###

创建一个分组元素的数组，数组的第一个元素包含所有给定数组的第一个元素，数组的第二个元素包含所有给定数组的第二个元素，以此类推。

_.zip(['fred', 'barney'], [30, 40], [true, false]);
    // => [['fred', 30, true], ['barney', 40, false]]

> ### `_.zipObject([props=[]], [values=[]])` ###

它接受2个数组，第一个数组中的值作为属性标识符（属性名），第二个数组中的值作为相应的属性值。

_.zipObject(['a', 'b'], [1, 2]);
    // => { 'a': 1, 'b': 2 }

### 3.2 集合方法 ###

> ### `_.forEach(collection, [iteratee=_.identity])` ###

_([1, 2]).forEach(function(value) {
      console.log(value);
    });
    // => Logs `1` then `2`.
     
    _.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
      console.log(key);
    });
    // => Logs 'a' then 'b' (iteration order is not guaranteed).

> ### `_.forEachRight(collection, [iteratee=_.identity])` ###

这个方法类似 `_.forEach`，不同之处在于，`_.forEachRight `是从右到左遍历集合中每一个元素的。

_.forEachRight([1, 2], function(value) {
      console.log(value);
    });
    // => Logs `2` then `1`.

> ### `_.every(collection, [predicate=_.identity])` ###

如果所有元素经 predicate（断言函数） 检查后都都返回真值，那么就返回`true`，否则返回 `false`

和es6中every相同

_.every([true, 1, null, 'yes'], Boolean);
    // => false
     
    var users = [
      { 'user': 'barney', 'age': 36, 'active': false },
      { 'user': 'fred',   'age': 40, 'active': false }
    ];
     
    // The `_.matches` iteratee shorthand.
    _.every(users, { 'user': 'barney', 'active': false });
    // => false
     
    // The `_.matchesProperty` iteratee shorthand.
    _.every(users, ['active', false]);
    // => true
     
    // The `_.property` iteratee shorthand.
    _.every(users, 'active');
    // => false

> ### `_.reduce(collection, [iteratee=_.identity], [accumulator])` ###

通过遍历，返回累加后的值， 每次返回的值作为下次迭代使用，第三个参数作为前一个函数的第一个参数，可以理解为初始值。

_.reduce([1, 2], function(sum, n) {
      return sum + n;
    }, 0);
    // => 3
     
    _.reduce({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {
      (result[value] || (result[value] = [])).push(key);
      return result;
    }, {});
    // => { '1': ['a', 'c'], '2': ['b'] } (无法保证遍历的顺序)

> ### `_.orderBy(collection, [iteratees=[_.identity]], [orders])` ###

排序！ 指定 iteratee（迭代函数）结果如何排序。 如果没指定 `orders`（排序），所有值以升序排序。 否则，指定为"desc" 降序，或者指定为 "asc" 升序，排序对应值。

var users = [
      { 'user': 'fred',   'age': 48 },
      { 'user': 'barney', 'age': 34 },
      { 'user': 'fred',   'age': 40 },
      { 'user': 'barney', 'age': 36 }
    ];
     
    // 以 `user` 升序排序 再  `age` 以降序排序。
    _.orderBy(users, ['user', 'age'], ['asc', 'desc']);
    // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

> ### `_.sample(collection)` ###

返回随机元素。

_.sample([1, 2, 3, 4]);
    // => 2

> ### `_.includes(collection, value, [fromIndex=0])` ###

如果找到 `value` 返回 `true`， 否则返回 `false`。

_.includes([1, 2, 3], 1);
    // => true
     
    _.includes([1, 2, 3], 1, 2);
    // => false
     
    _.includes({ 'user': 'fred', 'age': 40 }, 'fred');
    // => true
     
    _.includes('pebbles', 'eb');
    // => true

> ### `_.sampleSize(collection, [n=1])` ###

获得 `n` 个随机元素

_.sampleSize([1, 2, 3], 2);
    // => [3, 1]
     
    _.sampleSize([1, 2, 3], 4);
    // => [2, 3, 1]

> ### `_.shuffle(collection)` ###

返回打乱的新数组。

_.shuffle([1, 2, 3, 4]);
    // => [4, 1, 3, 2]

> ### `_.now()` ###

返回当前时间戳

### 3.3 函数方法 ###

> ### `_.after(n, func)` ###

此方法创建一个函数，当他被调用`n`或更多次之后将马上触发

let a = 20;
    let done = _.after(5, function() {
     console.log(a++)
    })
    for(let i=0;i< 10 ; i++) {
      console.log(i);
      done();
    }
    
    // 结果 
    0 1 2 3 4 20 5 21 6 22 7 23 8 24 9 25

> ### `_.before(n, func)` ###

限制执行  创建一个调用`func`的函数，通过`this`绑定和创建函数的参数调用`func`，调用次数不超过 `n` 次。 之后再调用这个函数，将返回一次最后调用`func`的结果。

> ### `_.curry(func, [arity=func.length])` ###

返回新的柯里化（curry）函数。

var abc = function(a, b, c) {
      return [a, b, c];
    };
     
    var curried = _.curry(abc);
     
    curried(1)(2)(3);
    // => [1, 2, 3]
     
    curried(1, 2)(3);
    // => [1, 2, 3]
     
    curried(1, 2, 3);
    // => [1, 2, 3]
     
    // Curried with placeholders.
    curried(1)(_, 3)(2);
    // => [1, 2, 3]

> ### `_.debounce(func, [wait=0], [options={}])` ###

防抖动   简单点来说，在一定时间内函数只执行一次。

// 避免窗口在变动时出现昂贵的计算开销。
    jQuery(window).on('resize', _.debounce(calculateLayout, 150));

> ### `_.delay(func, wait, [args])` ###

延迟 `wait` 毫秒后调用 `func`。 调用时，任何附加的参数会传给`func`。

_.delay(function(text) {
      console.log(text);
    }, 1000, 'later');
    // => 一秒后输出 'later'。

> ### `_.once(func)` ###

创建一个只能调用 `func` 一次的函数。 重复调用返回第一次调用的结果。

var initialize = _.once(createApplication);
    initialize();
    initialize();
    // `initialize` 只能调用 `createApplication` 一次。

> ### `_.throttle(func, [wait=0], [options={}])` ###

创建一个节流函数

// 避免在滚动时过分的更新定位
    jQuery(window).on('scroll', _.throttle(updatePosition, 100));
     
    // 点击后就调用 `renewToken`，但5分钟内超过1次。
    var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
    jQuery(element).on('click', throttled);
     
    // 取消一个 trailing 的节流调用。
    jQuery(window).on('popstate', throttled.cancel);

> ### `_.clone(value)` ###

创建一个 `value` 的浅拷贝。

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

> ### `_.cloneDeep(value)` ###

深拷贝

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

### 3.4 数学相关 ###

*  [`_.add`][.add]
 *  [`_.ceil`][.ceil]
 *  [`_.divide`][.divide]
 *  [`_.floor`][.floor]
 *  [`_.max`][.max]
 *  [`_.maxBy`][.maxBy]
 *  [`_.mean`][.mean]
 *  [`_.meanBy`][.meanBy]
 *  [`_.min`][.min]
 *  [`_.minBy`][.minBy]
 *  [`_.multiply`][.multiply]
 *  [`_.round`][.round]
 *  [`_.subtract`][.subtract]
 *  [`_.sum`][.sum]
 *  [`_.sumBy`][.sumBy]

> ### `_.random([lower=0], [upper=1], [floating])` ###

产生一个包括 `lower` 与 `upper` 之间的数。 如果只提供一个参数返回一个`0`到提供数之间的数。 如果 `floating` 设为 `true`，或者 `lower` 或 `upper` 是浮点数，结果返回浮点数。

_.random(0, 5);
    // =>  0 and 5 之间数字
     
    _.random(5);
    // =>  0 and 5 之间数字
     
    _.random(5, true);
    // =>  0 and 5 的小数
     
    _.random(1.2, 5.2);
    // =>  1.2 and 5.2  小数

### 3.5 对象操作 ###

> ### `_.assign(object, [sources])` ###

分配来源对象的可枚举属性到目标对象上。

> ### `_.has(object, path)` ###

检查参数 `path` 是否是`object`对象的直接属性。

官方文档地址： [https://www.lodashjs.com/][https_www.lodashjs.com]

[https_raw.githubusercontent.com_lodash_lodash_4.17.15-npm_lodash.js]: https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/lodash.js
[.add]: https://www.lodashjs.com/docs/lodash.add
[.ceil]: https://www.lodashjs.com/docs/lodash.ceil
[.divide]: https://www.lodashjs.com/docs/lodash.divide
[.floor]: https://www.lodashjs.com/docs/lodash.floor
[.max]: https://www.lodashjs.com/docs/lodash.max
[.maxBy]: https://www.lodashjs.com/docs/lodash.maxBy
[.mean]: https://www.lodashjs.com/docs/lodash.mean
[.meanBy]: https://www.lodashjs.com/docs/lodash.meanBy
[.min]: https://www.lodashjs.com/docs/lodash.min
[.minBy]: https://www.lodashjs.com/docs/lodash.minBy
[.multiply]: https://www.lodashjs.com/docs/lodash.multiply
[.round]: https://www.lodashjs.com/docs/lodash.round
[.subtract]: https://www.lodashjs.com/docs/lodash.subtract
[.sum]: https://www.lodashjs.com/docs/lodash.sum
[.sumBy]: https://www.lodashjs.com/docs/lodash.sumBy
[https_www.lodashjs.com]: https://www.lodashjs.com/