lodash常⽤的⼀些⽅法
⾸先要明⽩的是lodash的所有函数都不会在原有的数据上进⾏操作，⽽是复制出⼀个新的数据⽽不改变原有数据。类似immutable.js的理念去处理。
lodash是⼀套⼯具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。
lodash的引⽤
import _ from'lodash'
<script src="cdn.bootcss/lodash.js/4.17.11/lodash.js"></script>
⽤⼀个数组遍历来说明为什么要使⽤lodash
常规数组遍历
agent.forEach(function (n,key) {
agent[key].agent_id = agent[key].agent_name;
}) return agent;
使⽤lodash来遍历
_.forEach(agent,function(n,key) {
agent[key].agent_id= agent[key].agent_name
})
这是⼀个常见的forEach的数组遍历，使⽤了lodash过后，_.forEach()这是⼀个值，⽽不是⼀个函数。就可以直接
const arr = _.forEach();
这时候arr就是新的数组agent。⽽在常规的js数组遍历中，还需要考虑return的值和this的指向问题。虽然这样看起来，⼆者相差不⼤，但是在实际的开发过程中，熟练的使⽤lodash能⼤⼤的提⾼开发的效率。
_.sortBy
_.sortBy(collection, [iteratees=[_.identity]])
_sortBy仅是升序排序
创建⼀个元素数组。以 iteratee 处理的结果升序排序。这个⽅法执⾏稳定排序，也就是说相同元素会保持原始排序。 iteratees 调⽤1个参数： (value)。
var users = [
{ 'user': 'fred',  'age': 48 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred',  'age': 40 },
{ 'user': 'barney', 'age': 34 }
];
_.sortBy(users, function(o) { return o.user; });
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]
_.sortBy(users, 'user', function(o) {
return Math.floor(o.age / 10);
});
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
_.orderBy
_.orderBy(collection, [iteratees=[_.identity]], [orders])
此⽅法类似于_.sortBy，除了它允许指定 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'], ['desc', 'desc']);
// => objects for [['fred', 48], ['fred', 40], ['barney', 36], ['barney', 34]]
再来总结⼀些lodash常⽤函数（还是推荐⼤家能去官⽹把所有的函数看⼀遍增加⼀些印象）
1.chunk，将数组进⾏切分。（也是官⽹的第⼀个函数）
const arr = [1,2,3,4,5,6,7,8,9];
_.chunk(arr,2);
// =>[[1,2],[3,4],[5,6],[7,8],[9]]
这个函数把数组按照⼀定的长度分开，返回新的数组。（⽚段化数组）
2pact，去除假值。（将所有的空值，0，NaN过滤掉）
_pact(['1','2','',0])
// => ['1','2']
对应的还有⼀个数组去重函数，这在实际的开发中很有作⽤。
3.uniq，数组去重。（将数组中的对象去重，只能是数组去重，不能是对象去重。）
_.uniq([1,1,3])
// => [1,3]
这跟介绍的第⼆个函数compact有很好的配合作⽤。（后端接⼝传来的数据很多是有重复或者空值的，这时候就可以使⽤两个函数来过滤数据。ladash只是最基础的库，其实可以将⼏个函数封装起来组件⾃⼰的库。）
4.filter和reject，过滤集合，传⼊匿名函数。（⼆者放在⼀起讨论的原因是，两个函数类似但返回的值
是相反。）
_.filter([1,2],x => x = 1)
// => [1]
_.reject([1,2],x => x=1)
// => [2]
这两个过滤器，第⼆个参数值是false的时候返回是reject的功能，相反是true的时候是filter。
5.map和forEach，数组遍历。（相似）
如果不明⽩map和forEach有什么相似的可以百度⼀下，简单说⼀下不同点就是，map的回调函数中是⽀持return返回值的。
不过⼆者都不改变原来的数组。
_.map([1,2],x => x+1)
// => [2,3]
推荐使⽤map。
<，参数合并。（merge函数像是Git的merge分⽀操作⼀样，将两个参数合并在⼀起。）
官⽹的解释是，递归的将源对象和继承的可枚举字符串监控属性合并到⽬标对象中。源对象从左到右引⽤，后续来源将覆盖以前来源的属性分配。
var object = {
'a': [{ 'b': 2 }, { 'd': 4 }]
};
var other = {
'a': [{ 'c': 3 }, { 'e': 5 }]
};
_.merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }
这⾥就像借⽤官⽹的代码来解释⼀下了。在实际开发中，前端在接⼝的请求可以merge⼀下之前的query和现在改变的查询的值，再去请求后端接⼝的数据。
function Foo() {
this.a = 1;
}
function Bar() {
this.c = 3;
}
Foo.prototype.b = 2;
Bar.prototype.d = 4;
_.assignIn({ 'a': 0 }, new Foo, new Bar);
// => { 'a': 1, 'b': 2, 'c': 3, 'd': 4 }
8.cancat，数组连接
var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
console.log(other);
lodash有哪些方法// => [1, 2, 3, [4]]
console.log(array);
// => [1]
可以接受多个参数，将多个参数合并为⼀个数组元素。
9.keys ，取出对象中所有的key值组成新的数组。function Foo() {
this.a = 1;
this.b = 2;
}
Foo.prototype.c = 3;
_.keys(new Foo);
// => ['a', 'b'] (iteration order is not guaranteed)
_.keys('hi');
// => ['0', '1']
类似object.keys()，返回对象中可枚举属性的数组。
_.range(10)
//⽣成元素为0到9的数组
_.times(10, (i)=>console.log(i))
/
/循环10次
_.uniqueId()
//⽣成不同的id，⽤于元素中的id值再好不过
_.startWith
//判断字符串是否以xx开头
_.endWith
//判断字符串是否以xx结尾
_.truncat
//截取指定长度后加… ⽤于处理标题过长再好不过
_.template
//es6有字符串模板的语法，⽽lodash是es5的替代⽅案
_.assign
//合并，es6有Object.assign，类似于d
_.assignIn
//lodash⾥很多⽅法带In的都是可枚举原型链上的属性
_.defaults
//安全合并，即忽略undefined/null的重写
_.findKey
//根据value的属性值key
.mapKeys
//遍历重写key, 相当于.forIn
.mapValues
/
/遍历重写value , 相当于.forIn
_.invert
//反转映射，快速通过value值key
_.omit
//返回移除部分属性的副本，⽐如提交表单时有些字段不要提交_.pick
//与omit相反，提取部分属性的副本，⽐如只提交某些字段
_. clamp
//确认所给值只在min,max之间
_.max
//最⼤
_.min
/
/最⼩
_.sum
//求和
_.random
//⽣成随机数
_.round
//四舍五⼊，允许指定精确位数
_.isNumber
_.isInterger
_.isFunction
_.isPlainObject
_.isArray
_.isDate
_.isElement
_.isNil
//null or undefined
_.isEmpty
//{} or 空数组
_.isEqual
//⽀持对象和数组
_.isMatch
//匹配对象属性值
_.cloneDeep
//深度复制
_.clone
//浅复制
_.once
//只执⾏⼀次
_.before
//最多n-1次
_.after
//n次后执⾏
_.debounce
/
/忽略频繁执⾏
_.union
//合并两数组，去重
_.uniq
//去重
_.pull(array,element1,element2)
// 直接在array中移除元素，
_.without(array,element1,element2)
//得到新array中移除元素
_.remove(array, function)
//直接在array移除在function返回true的元素_.sameple(array)
/
/随机取1
_.samepleSize(array, int)
//  随机取n
_.shuffle(array)
//乱序, jQuery.shuffle
_.find(array, function | object)
//根据function返回值和对象查1个结果
_.filter(array, function | object)
//根据function返回值和对象查多个结果
_.groupBy(array, string)
//分组，与多合⼀相反
_.keyBy(array, string)
//分组，类似groupBy, 但只有唯⼀值
_.countBy(array, string)
//分组统计
_.orderBy(array, array, array)
_.sortBy(array, array)
_.difference(array1,array2)
//不同于array2，元素是Object⽤differenceBy _.xor(array1,array2)
//得到⾮交集，元素是Object⽤xorBy
_.intersection(array1,array2)
//得到交集，元素是Object⽤intersectionBy

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。