1. 简介

• Lodash是一个一致性、模块化、高性能的JavaScript实用库。
• Lodash通过降低array、number、objects、string等等的使用难度从而让JavaScript变得简单。Lodash的模块方法，非常适用于：
  • 遍历array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数

1.1 安装

• 浏览器环境： <script src="lodash.js"></script>
• npm安装：npm i --save lodash
• Node.js环境中：
  • // Load the full build.
    var _ = require('lodash');
  • // Load the core build.
    var _ = require('lodash/core');
  • // Load the FP build for immutable auto-curried iteratee-first data-last methods.
    var fp = require('lodash/fp');
  • // Load method categories.
    var array = require('lodash/array');
var object = require('lodash/fp/object');
  • // Cherry-pick methods for smaller browserify/rollup/webpack bundles.
    var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

2. API介绍之数组

2.1 _.drop(array, [n=1])

• 创建一个切片数组，去除array前面的n个元素。（n默认为1）。返回array剩余切片。

2.1.1 API讲解示例

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

2.1.2 业务场景：

行情部分本身后端会返回全部规格信息数组，但只要求展示两个规格品类信息，若有三个及以上规格，默认展示除"通货"外的前两个需求。通货默认在第一个，所以我们可以通过 _.drop(arr, 1)来实现。

webapp-hq中：
this.specs = res.result.spec.slice(1);
---To---
this.specs = _.drop(res.result.spec, 1);

2.1.3 相似API

• _.dropRight(array, [n=1]) 从末尾开始进行删除
• _.dropWhile(array, [predicate=_.identity]) 从头开始删除迭代器指定情形下的值，返回剩余值
• _.dropRightWhile(array, [predicate=_.identity]) 同上功能，只不过从后面开始删除

2.1.3 dropWhile对应业务场景 TODO:待补充

类似于filter，返回一堆数据，过滤出自己真正想要的数据，找个例子

2.2 _.head(array)

获取数组array的第一个元素。

2.2.1 API讲解示例

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

2.2.2 业务场景

if (!this.specId || this.specId === 0 || this.specId === "0") {this.specId =this.specs &&this.specs.length &&this.specs[0] &&this.specs[0].id;console.log(this.specId, "自己获取的");// this.specId = _.head(this.specs) && _.head(this.specs).id;// console.log(this.specId, "lodash获取的");this.$emit("changeSpec", this.specId);
}

2.2.3 相似API

• _.first 别名

2.3 _.take(array, [n=1])

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

2.3.1 API 讲解示例

_.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);
// => []

2.3.2 业务场景

• 当规格较多时，我们只想保留前几条数据用于展示时，可以使用该API
• 我们可以先切掉头部内容，之后再进行take提取

this.specs = _.take(_.drop(res.result.spec, 1));

• 若最后规格表示最新出现的，可以通过takeRight进行提取

2.3.3 相似API

• _.takeRight(array, [n=1]) 创建一个数组切片，从array数组的最后一个元素开始提取n个元素。
• _.takeRightWhile(array, [predicate=_.identity]) 从array数组的最后一个元素开始提取元素，直到 predicate 返回假值。predicate 会传入三个参数： (value, index, array)。
• _.takeWhile(array, [predicate=_.identity]) 从array数组的起始元素开始提取元素，，直到 predicate 返回假值。predicate 会传入三个参数： (value, index, array)。

3. API介绍之集合

3.1 _.filter(collection, [predicate=_.identity])

遍历 collection（集合）元素，返回 predicate（断言函数）返回真值 的所有元素的数组。 predicate（断言函数）调用三个参数：(value, index|key, collection)。

3.1.1 API讲解示例

var users = [{ 'user': 'barney', 'age': 36, 'active': true },{ 'user': 'fred',   'age': 40, 'active': false }
];_.filter(users, function(o) { return !o.active; });
// => objects for ['fred']// The `_.matches` iteratee shorthand.
_.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']// The `_.matchesProperty` iteratee shorthand.
_.filter(users, ['active', false]);
// => objects for ['fred']// The `_.property` iteratee shorthand.
_.filter(users, 'active');
// => objects for ['barney']

3.1.2 业务场景

当返回一个规格列表/任意对象列表，需要按照要求来过滤其中自己需要的数据，这时候需要用到_.filter进行过滤比较方便。

const testArr = [{id: 1,name: '二两',isShow: true},{id: 2,name: '四两',isShow: false},{id: 3,name: '六两',isShow: true},{id: 4,name: '八两',isShow: true},{id: 5,name: '十两',isShow: false},]
const filterArr = testArr.filter((item) => item.isShow)const filterArr = _.filter(testArr, ['isShow', true])
const filterArr = _.filter(testArr, 'isShow')

3.2 _.find(collection, [predicate=_.identity], [fromIndex=0])

遍历 collection（集合）元素，返回 predicate（断言函数）第一个返回真值的第一个元素。predicate（断言函数）调用3个参数： (value, index|key, collection)。

3.2.1 API讲解示例

var users = [{ 'user': 'barney',  'age': 36, 'active': true },{ 'user': 'fred',    'age': 40, 'active': false },{ 'user': 'pebbles', 'age': 1,  'active': true }
];_.find(users, function(o) { return o.age < 40; });
// => object for 'barney'// The `_.matches` iteratee shorthand.
_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'// The `_.matchesProperty` iteratee shorthand.
_.find(users, ['active', false]);
// => object for 'fred'// The `_.property` iteratee shorthand.
_.find(users, 'active');
// => object for 'barney'

3.2.2 业务场景

大讲堂中，detail接口中返回了多个模块的数据，以code为标识
此时，我们将数据分别提取出来进行使用。

历史用法：
this.headerList =res.data.find((item) => {return item.code === "top_banner";
}).nodes || [];lodash用法：
this.headerList = _.find(res.data, ['code', 'top_banner']).nodes || []

3.2.3 相似API

• _.findLast(collection, [predicate=_.identity], [fromIndex=collection.length-1]) 类似于find，查到一个就停止，不同之处在于find是从左向右查找，findLast是从右向左查找。

3.3 _.sample(collection)

从collection（集合）中获得一个随机元素。

3.3.1 API讲解示例

_.sample([1, 2, 3, 4]);
// => 2const arr = [{name: 'lihua',age: 12,},{name: 'xiaoming',age: 32,},{name: 'wang',age: 28,},];
_.sample(arr)
// => {name: 'lihua', age: 12}

3.3.2 业务场景

平台专享处的轮播，会随机选取姓氏进行处理，通过Math.random()方式，我们可以通过_.sample来进行改写。

surnameArr 常见姓氏列表（取样集合）const randomIdx = Math.floor(Math.random() * 43);
return surnameArr[randomIdx];return _.sample(surnameArr);

3.3.3 相似API

• _.sampleSize(collection, [n=1]) 从collection集合中随机获取n个元素

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

4. API介绍之Seq

5. API介绍之语言

5.1 _.eq(value, other)

执行SameValueZero 比较两者的值，来确定它们是否相等。

5.1.1 API讲解示例

var object = { 'a': 1 };
var other = { 'a': 1 };_.eq(object, object);
// => true_.eq(object, other);
// => false_.eq('a', 'a');
// => true_.eq('a', Object('a'));
// => false_.eq(NaN, NaN);
// => true

5.1.2 业务场景

当有需求需要判断两个值是否相等时，如：判断当前是否是vip

!_.eq(this.customer_vip, 0);this.customer_vip !== 0;

5.1.3 相似API

• _.gt(value, other) 检查value是否大于other
• _.gte(value, other) 检查value是够大于等于other
• _.isEqual(value, other) 执行深比较来确定两者的值是否相等。支持比较 arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, 以及 typed arrays. Object 对象值比较自身的属性，不包括继承的和可枚举的属性。 不支持函数和DOM节点比较。
• _.isEqualWith(value, other, [customizer]) 这个方法类似_.isEqual。 除了它接受一个 customizer 用来定制比较值。
• _.lt(value, other) 检查 value 是否小于 other。
• _.lte(value, other) 检查 value 是否小于等于 other。

5.2 _.isEmpty(value)

检查 value 是否为一个空对象，集合，映射或者set。 判断的依据是除非是有枚举属性的对象，length 大于 0 的 arguments object, array, string 或类jquery选择器。

5.2.1 API讲解示例

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

5.1.2 业务场景

我们经常为了兼容，获取数组中第一个元素进行压中或发送下一个网络请求的操作，之前是要判断这个数组是否存在，并且数组的length属性。&&下来就会使整个判断条件变得十分的长和复杂，此时，可以通过isEmpty来进行判断。

            this.trend_id =this.trendChartOptions &&this.trendChartOptions.length &&this.trendChartOptions[0] &&this.trendChartOptions[0].id;this.trendChartActive = this.trendChartOptions[0];-----this.trend_id =!_.isEmpty(this.trendChartOptions) &&this.trendChartOptions[0].id;

6. API介绍之对象

6.1 _.get(object, path, [defaultValue])

根据 object对象的path路径获取值。 如果解析 value 是 undefined 会以 defaultValue 取代。返回解析后的值。

6.1.1 API讲解示例

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'

6.1.2 业务场景

在进行图表数据存储时对象进行存储，key作为几天的id，value则是这一天对应的数据。

    const daysMap = {0: ['七', '天', '图', '表', '数', '据'],3: ['三', '十', '天', '图', '表', '数', '据'],6: ['六', '十', '天', '图', '表', '数', '据'],}console.log(_.get(daysMap, 0, ['默', '认', '图', '表', '数', '据']));

这样，我们在点击对应的activeOptions(七天、30天、60天)时，即可获取当天对应的id，然后通过id就可以获取到当天对应的数据。

6.1.3 相似API

• _.result(object, path, [defaultValue]) 这个方法类似_.get， 除了如果解析到的值是一个函数的话，就绑定 this 到这个函数并返回执行后的结果。

• _.set(object, path, value) 设置 object对象中对应 path 属性路径上的值，如果path不存在，则创建。 缺少的索引属性会创建为数组，而缺少的属性会创建为对象。 使用_.setWith 定制path创建。

• _.setWith(object, path, value, [customizer]) 这个方法类似_.set，除了它接受一个 customizer，调用生成对象的 path。 如果 customizer 返回 undefined 将会有它的处理方法代替。 customizer 调用3个参数： (nsValue, key, nsObject)。

6.2 _.invoke(object, path, [args])

调用object对象path上的方法。

6.2.1 API讲解示例

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

6.2.2 业务场景

之前有一次后端处理数据有误，7天和30天请求时都返回了30天的数据，因为后期开发需要时间，所以需要前端暂时将返回的30天数据截取7天来进行使用，此时，我们就可以通过invoke进行截取。

    const daysDataMap = {0: {trend: {price_list: [{tem: "1.01",time: "04-26",},{tem: "1.81",time: "04-27",},{tem: "2.01",time: "04-28",},{tem: "1.51",time: "04-29",},{tem: "0.91",time: "04-30",},{tem: "1.31",time: "05-01",},{tem: "1.11",time: "05-02",},]}}}console.log(_.invoke(daysDataMap, '0.trend.price_list.slice', 0, 3))

6.3 _.omitBy(object, [predicate=_.identity])

这个方法一个对象，这个对象忽略 predicate（断言函数）判断不是真值的属性后，object自身和继承的可枚举属性组成。predicate调用与2个参数：(value, key)。

6.3.1 API讲解示例

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

6.3.2 业务场景

过滤接口参数，若不同场景有的参数存在，则不必传给后端。

      let queryParams = {stateCode: options.stateCode,customerId: options.qrid,};之前过滤参数写法：Object.entries(queryParams).forEach((f) => {if (!(f && f.length && f[1])) {delete queryParams[f[0]];}});console.log(queryParams, "之前方式过滤后的参数值");lodash 过滤参数写法：const lodashRes = _.omitBy(queryParams, _.isEmpty);console.log(lodashRes, "lodash处理后的值");

6.3.3 相似API

• _.omit(object, [props]) 这个方法一个对象，这个对象由忽略属性之外的object自身和继承的可枚举属性组成。（注：可以理解为删除object对象的属性）。

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

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

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

• _.pickBy(object, [predicate=_.identity]) 创建一个对象，这个对象组成为从 object 中经 predicate 判断为真值的属性。 predicate调用2个参数：(value, key)。

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

Seq、函数

总结：

• 处理数组对象时的 js 方法例如 forEach、map、filter、reduce、find等，使用lodash封装好的会更加整洁、代码行数更少。

注意事项

注意事项一： lodash在不同平台上的使用情况

• 微信小程序可通过该方法引入lodash

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~