lodash.js工具库 常用整理

官网：最新版地址 链接

本文将整理常用的，案例也是官网的，只是自己再实战演练一下。所以到此，客官可以戳上面链接进入官网。当然，如果你看着官网，方法真的多，感觉很蒙的话，就把我整理的常用的先看看吧。有时候真的要多看看大佬写的代码，lodash.js也是我看大佬用过一次才知道的。

安装lodash

1）CDN 链接

2）NPM

npm i --save lodash

var _ = require('lodash'); // 全局引用

var array = require('lodash/array'); //按需
var object = require('lodash/fp/object');

cdn也有按需引入，官网有

Array 数组

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

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

const a =_.chunk(['a', 'b', 'c', 'd'], 2);
console.log(a)  // [['a', 'b'], ['c', 'd']] // size=2

_.flattenDepth(array, [depth=1])

官网定义
根据 depth 递归减少 array 的嵌套层级

const i = [1, [2, [3, [4]], 5]];
 
const j = _.flattenDepth(i, 1);
console.log(j) // [1, 2, [3, [4]], 5]
 
const k = _.flattenDepth(i, 2);
console.log(k) // [1, 2, 3, [4], 5]

_.compact(array)

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

const b =_.compact([0, 1, false, 2, '', 3]);
console.log(b)  // [1, 2, 3]

_.concat(array, [values])

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

const c = [1];
var d = _.concat(c, 2, [3], [[4]]);
console.log(d)  // [ 1, 2, 3, [ 4 ] ]

_.difference(array, [values])

官网定义
创建一个具有唯一array值的数组，每个值不包含在其他给定的数组【values】中

const e = _.difference([3, 2, 1], [4, 2]);
console.log(e) // [3, 1]

_ .findIndex(array, [predicate=_.identity], [fromIndex=0])

官网定义
返回第一个通过 predicate 判断为真值的元素的索引值（index），而不是元素本身

const f = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
const g = _.findIndex(f, function(o) { return o.user == 'barney'; });
console.log(g) // 0
const h = _.findIndex(f, { 'user': 'fred', 'active': false });
console.log(h) // 1

_.uniq(array)

官网定义
创建一个去重后的array数组副本。只有第一次出现的元素才会被保留。

const l =_.uniq([2, 1, 2]);
console.log(l) // [2, 1]

_.zip([arrays])

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

const m=_.zip(['fred', 'barney'], [30, 40], [true, false]);
console.log(m) //  [['fred', 30, true], ['barney', 40, false]]

_unzip 就是相反操作

Object

_.defaults(object, [sources])

官网定义
分配来源对象的可枚举属性到目标对象所有解析为 undefined 的属性上。 来源对象从左到右应用。 一旦设置了相同属性的值，后续的将被忽略掉。

const n=_.defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });
console.log(n) //  { 'a': 1, 'b': 2 }

_ .findKey(object, [predicate=_.identity])

官网定义
这个方法类似 _.find 。 除了它返回最先被 predicate 判断为真值的元素 key，而不是元素本身。

const o = {
  'barney':  { 'age': 36, 'active': true },
  'fred':    { 'age': 40, 'active': false },
  'pebbles': { 'age': 1,  'active': true }
};
 
const p = _.findKey(o, function(o) { return o.age < 40; });
console.log(p) //  'barney' (iteration order is not guaranteed)

_.merge(object, [sources])

官网定义
除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在，被解析为undefined的sources 来源对象属性将被跳过。数组和普通对象会递归合并，其他对象和值会被直接分配覆盖。源对象从从左到右分配。后续的来源对象属性会覆盖之前分配的属性。

const r = {
  'a': [{ 'b': 2 }, { 'd': 4 }]
};
 
const s = {
  'a': [{ 'c': 3 }, { 'e': 5 }]
};
 
const t =_.merge(r, s);
console.log(t) //  { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

_.pick(object, [props])

官网定义
创建一个从 object 中选中的属性的对象。

const u = { 'a': 1, 'b': '2', 'c': 3 };
 
const v =_.pick(u, ['a', 'c']);

console.log(v) // { 'a': 1, 'c': 3 }

_.omit(object, [props]) 与_pick() 是反的 {‘b’:‘2’}

Collection

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

官网定义
检查 value(值) 是否在 collection(集合) 中。如果 collection(集合)是一个字符串，那么检查 value（值，子字符串） 是否在字符串中， 否则使用 SameValueZero 做等值比较。 如果指定 fromIndex 是负数，那么从 collection(集合) 的结尾开始检索。

const w = _.includes([1, 2, 3], 1);
console.log(w) //  true
 
const x = _.includes([1, 2, 3], 1, 2);
console.log(x) // false

_ .map(collection, [iteratee=_.identity])

官网定义
创建一个数组， value（值） 是 iteratee（迭代函数）遍历 collection（集合）中的每个元素后返回的结果。 iteratee（迭代函数）调用3个参数：
(value, index|key, collection).

function square(n) {
  return n * n;
}
 
const y = _.map([4, 8], square);
console.log(y) //  [16, 64]
 
const aa = _.map({ 'a': 4, 'b': 8 }, square);
console.log(aa) //  [16, 64]

const ab = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];

const ac = _.map(ab, 'user');
console.log(ac) //  ['barney', 'fred']

Lang

_.clone(value)

官网定义
创建一个 value 的浅拷贝。

const ad = [{ 'a': 1 }, { 'b': 2 }];
 
const ae = _.clone(ad);
console.log(ad[0] === ae[0]); // true 地址指针一样

_.cloneDeep(value)

官网定义
深拷贝

const af = [{ 'a': 1 }, { 'b': 2 }];
 
const ag = _.clone(ad);
console.log(af[0] === ag[0]);  // false 地址指针不一样

Function

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

官网定义
创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options（选项） 对象决定如何调用 func 方法，options.leading 与|或 options.trailing 决定延迟前后如何触发（是 先调用后等待 还是 先等待后调用）。 func 调用时会传入最后一次提供给 debounced（防抖动）函数 的参数。 后续调用的 debounced（防抖动）函数返回是最后一次 func 调用的结果。

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
 
// 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
 
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);

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

官网定义
创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options 对象决定如何调用 func 方法， options.leading 与|或 options.trailing 决定 wait 前后如何触发。 func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。

// 避免在滚动时过分的更新定位
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);