要想提高网站排名应该如何做,家具能在什么网站上做,广州网站建设商城,企业所得税怎么算小规模纳税人1. 简介
Lodash是一个一致性、模块化、高性能的JavaScript实用库。Lodash通过降低array、number、objects、string等等的使用难度从而让JavaScript变得简单。Lodash的模块方法#xff0c;非常适用于#xff1a; 遍历array、object 和 string对值进行操作和检测创建符合功能的…1. 简介
Lodash是一个一致性、模块化、高性能的JavaScript实用库。Lodash通过降低array、number、objects、string等等的使用难度从而让JavaScript变得简单。Lodash的模块方法非常适用于 遍历array、object 和 string对值进行操作和检测创建符合功能的函数
1.1 安装
浏览器环境 script srclodash.js/scriptnpm安装npm i --save lodashNode.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, [n1])
创建一个切片数组去除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, [n1]) 从末尾开始进行删除_.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, [n1])
创建一个数组切片从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, [n1]) 创建一个数组切片从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], [fromIndex0])
遍历 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 barney3.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], [fromIndexcollection.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, [n1]) 从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 });
// false5.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);
// default6.1.2 业务场景
在进行图表数据存储时对象进行存储key作为几天的idvalue则是这一天对应的数据。 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你无须超越谁只要超越昨天的自己就好~
