Lodash入门及方法汇总（全）

1.  Lodash工具

是一个一致性、模块化、高性能的 JavaScript 实用工具库。

内部封装非常多使用函数，操作数组操作对象的方法。可以说是一个非常实用的工具函数。

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

2.  引入使用

完整版下载地址 ： https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/lodash.js

浏览器环境：

<script src="lodash.js"></script>

通过 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
• _.ceil
• _.divide
• _.floor
• _.max
• _.maxBy
• _.mean
• _.meanBy
• _.min
• _.minBy
• _.multiply
• _.round
• _.subtract
• _.sum
• _.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])

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

function Foo() {
  this.a = 1;
}
 
function Bar() {
  this.c = 3;
}
 
Foo.prototype.b = 2;
Bar.prototype.d = 4;
 
_.assign({ 'a': 0 }, new Foo, new Bar);
// => { 'a': 1, 'c': 3 }

_.has(object, path)

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

var object = { 'a': { 'b': 2 } };
var other = _.create({ 'a': _.create({ 'b': 2 }) });
 
_.has(object, 'a');
// => true
 
_.has(object, 'a.b');
// => true
 
_.has(object, ['a', 'b']);
// => true
 
_.has(other, 'a');
// => false

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