Lodash工具库相关_lodash-es文档

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

中文文档Lodash 简介 | Lodash 中文文档 | Lodash 中文网

1.安装

•  完整引入(不推荐)

import _ from 'lodash';
import { debounce } from 'lodash'

直接像上面这样引入lodash构建时构建工具将整个lodash库打包了进来，而非它其中被我们使用到的一部分。

• 按需引入(推荐)

        (1)从lodash-es引入

import { uniq, uniqBy } from 'lodash-es';

lodash-es使用了ES module组织模块，构建工具构建时在做体积优化(tree shaking)的时候，通过对模块的依赖分析，能将lodash包中未使用到的模块都移除掉。

        (2) 使用babel插件做转换: 使用lodash官方提供的lodash/babel-plugin-lodash

2.相关方法

_.uniq(array) 创建一个去重后的array数组副本。使用了SameValueZero 做等值比较。只有第一次出现的元素才会被保留。

_.uniqBy(array, [iteratee=_.identity]) 这个方法类似_.uniq ，除了它接受一个 iteratee （迭代函数），调用每一个数组（array）的每个元素以产生唯一性计算的标准。iteratee 调用时会传入一个参数：(value)。

1. array (Array): 要检查的数组。
2. [iteratee=_.identity] (Array|Function|Object|string): 迭代函数，调用每个元素。

uniq([2, 1, 2]); // => [2, 1]
 
 
uniqBy([2.1, 1.2, 2.3], Math.floor); // => [2.1, 1.2]
 
_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }, { 'y': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }, { 'y': 1 }]

_.pick(object, [props])  创建一个从 object 中选中的属性的对象，返回新对象。 

1. object (Object): 来源对象。
2. [props] (...(string|string[])): 要被忽略的属性。（注：单独指定或指定在数组中。）

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

_.omit(object, [props]) 

这个方法一个对象，这个对象由忽略属性之外的object自身和继承的可枚举属性组成。（注：可以理解为删除object对象的属性）。

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.omit(object, ['a', 'c']);
// => { 'b': '2' }

_.isEmpty(value) 检查 value 是否为一个空对象，集合，映射或者set

_.isEmpty(null);
// => true
 
_.isEmpty(true);
// => true
 
_.isEmpty(1);
// => true
 
_.isEmpty([1, 2, 3]);
// => false
 
_.isEmpty({ 'a': 1 });
// => false

_.debounce(func, [wait=0], [options=])  创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法         

1. func (Function): 要防抖动的函数。
2. [wait=0] (number): 需要延迟的毫秒数。
3. [options=] (Object): 选项对象。
4. [options.leading=false] (boolean): 指定在延迟开始前调用。
5. [options.maxWait] (number): 设置 func 允许被延迟的最大值。
6. [options.trailing=true] (boolean): 指定在延迟结束后调用。

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);
 

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

创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用

1. func (Function): 要节流的函数。
2. [wait=0] (number): 需要节流的毫秒。
3. [options=] (Object): 选项对象。
4. [options.leading=true] (boolean): 指定调用在节流开始前。
5. [options.trailing=true] (boolean): 指定调用在节流结束后。

function handler() {
  // some code
}
var throttled = _.throttle(handler, 500)
// 滚动过程中，每隔 500 ms 调用一次 handler 函数
window.addEventListener('scroll', throttled)

 _.isEqual(value, other) 执行深比较来确定两者的值是否相等, 比较值而非引用。

        **注意: Object 对象值比较自身的属性，不包括继承的和可枚举的属性。 不支持函数和DOM节点比较。

var object = { 'a': 1 };
var other = { 'a': 1 };
 
_.isEqual(object, other);
// => true
 
object === other;
// => false

_.cloneDeep(value) 递归拷贝 value。（注：也叫深拷贝）

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

_.truncate([string=''], [options=]) 截断string字符串，如果字符串超出了限定的最大值。 被截断的字符串后面会以 omission 代替，omission 默认是 "..."。

_.truncate('hi-diddly-ho there, neighborino');
// => 'hi-diddly-ho there, neighbo...'
 
_.truncate('hi-diddly-ho there, neighborino', {
  'length': 24,
  'separator': ' '
});
// => 'hi-diddly-ho there,...'
 
_.truncate('hi-diddly-ho there, neighborino', {
  'length': 24,
  'separator': /,? +/
});
// => 'hi-diddly-ho there...'
 
_.truncate('hi-diddly-ho there, neighborino', {
  'omission': ' [...]'
});
// => 'hi-diddly-ho there, neig [...]'

_.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

_.get(object, path, [defaultValue]) 根据 object对象的path路径获取值。 如果解析 value 是 undefined 会以 defaultValue 取代。

var object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.get(object, 'a[0].b.c');
// => 3
 
_.get(object, ['a', '0', 'b', 'c']);
// => 3
 
_.get(object, 'a.b.c', 'default');
// => 'default'