1.在一个数组中找到与第二个数组相匹配的数据
在对数据的处理中,后端给我们返回的往往是一个数组,我们在此基础上对数组进行处理,从而得到我们需要的值。
// 数组1
var arr1 = [
{title: '进行中', value: 'running'},
{title: '开始', value: 'start'},
{title: '完成', value: 'completed'}
]
// 数组2
var arr2 = [
{status: 'running', count: 1},
{status: 'completed', count: 2}
]
数据处理目的: 从arr1中得到与arr2中相匹配的数据,比如arr1中的value和arr2中的status是相等的,那么就根据这个联系找到相关的数据
处理思路:
- 循环遍历arr2,拿出它的每一项值。
- 在循环遍历的过程中,找到与数组arr1相配置的数据,使用一个变量来接收
- 将返回的数组push进一个空数组中,从而这个数组中就是我们所需要的值
代码:
var temp = []
_.forEach(arr2, item => {
const arrF = _.find(arr1, {value: item.status})
temp.push(arrF)
})
console.log(temp) // 0: {title: "进行中", value: "running"} 1: {title: "完成", value: "completed"}
简化版代码:
var newArr = _.filter(arr1, item => {
return _.find(arr2, { status: item.value})
})
console.log(newArr) // {title: "进行中", value: "running"} {title: "完成", value: "completed"}
2.在一个数组中找到相匹配的值
上面介绍的是两个数组相匹配的数据,那么根据一个值如何在数组中找到相匹配的那一项呢? 这里的相匹配条件又划分为两种,一种是确定的、已知不变的,一种是不确定的。
- 确定的值:keyward 与arr中的每一项中的value相等
- 适用场景:根据不同的状态对按钮做不同样式、文字的显示。
var keyward = 'success'
var arr = [{value: 'success', title: '成功', color: red}, {value: 'fail', title: '失败', color: orange}, { value: 'running', title: '运行中', color: blue}]
var newArr = _.find(arr, { value: keyward})
console.log(newArr) // {value: "success", title: "成功", color: red}
- 未知的值:keyward 与arr中的每一项中的某个值,可能是value,可能是color等等去相等
- 使用场景:用户搜索查询
var keyward = 'success'
var arr = [{value: 'success', title: '成功', color: red}, {value: 'fail', title: '失败', color: orange}, { value: 'running', title: '运行中', color: blue}]
var newArr = _.filter(arr, item => { return Object.keys(item).some(el => item[el] == keyward) })
console.log(newArr) // {value: "success", title: "成功"} {value: "running", title: "success"}
3.将一个数组中重复的值的次数累加并将数组去重
// 数组
var arr = [{status: 'running'},{status: 'start'}, {status: 'running'},{status: 'completed'},{status: 'completed'}]
目的:将arr这个数组中重复的值比如status:'running',在数组中重复了2次,那么就计算出现的次数,最后再将数组去重。
实现思路:
- 需要使用累加来计算重复出现的次数,通过使用_reduce
- 准备一个空对象用来去重
- 根据判断数组中是否有当前的status,做出判断
代码:
var arr = [{status: 'running'},{status: 'start'}, {status: 'running'},{status: 'completed'},{status: 'completed'}]
var temp = {}
const result = _.reduce(arr, (acc, cur)=> {
if (temp[cur.status]) {
_.map(acc, (e, i) => {
cur.status === e.status ? acc[i].num++ : ''
})
} else {
cur.num = 1
temp[cur.status] = true
acc.push(cur)
}
return acc
}, [])
console.log(result) //{status: "running", sum: 2} {status: "start", sum: 1} {status: "completed", sum: 2}
这里还有一种优化写法(划重点)
var arr = [{status: 'running'}, {status: 'failed'}, {status: 'running'}, {status: 'completed'}]
var Obj = _.reduce(arr, (acc, cur) => {
acc[cur.status] = acc[cur.status] || 0
acc[cur.status]++
return acc
}, {})
console.log(Obj) //{running: 2, failed: 1, completed: 1}
// 简化2.0
var arr = [{status: 'running'}, {status: 'failed'}, {status: 'running'}, {status: 'completed'}]
var Obj = arr.reduce((acc, cur) => {
acc[cur.status] = acc[cur.status] ? ++acc[cur.status] : 1
return acc
}, {})
console.log(Obj) // {running: 2, failed: 1, completed: 1}
var hash = {}
var acc = this.rightData.reduce(function(acc, cur){
hash[cur.type] ? '' : (hash[next.type] = true && acc.push(cur))
return acc
}, [])
4.两个数组中去掉一样的值
var arr1 = [{name: 'zs', age: 18}, {name: 'ls', age: 22}, {name: 'ww', age: 19}]
var arr2 = [{name: 'zs', age: 18}, {name: 'ls', age: 22}]
目的:相当于给两个数组做差,去掉相同的
实现思路:
- filter过滤arr1
- 在箭头函数中需要做的事情:查找第二个数组中与第一个数组不相同的值,通过every返回boolean来作为过滤的条件 代码:
var temp = _.filter(arr1, item => _.every(arr2, ele => item.name !== ele.name))
console.log(temp) // [{name: "ww", age: 19}]
应用场景:可以做批量删除的时候使用,当多选按钮选中删除项时,就是删除两个数组中共有的,取不一样的。
values
5.pick
最近在做一些表单提交的时候,发现在最后submit有一些值是不需要跟后端提交的,在之前往往都是把对象里面的key给删掉,现在发现了pick,顾名思义从对象里面pick需要的key
let obj = {
name: 'zs',
age: 18,
height: 180,
};
let pickAfter = _.pick(obj, ['name', 'age']);
console.log(pickAfter) // { name: 'zs', age: 18 }
6.omit
有pick拿出需要的,就有想要丢弃的,omit此时正适合,从一个对象里面排除掉不需要的key
let obj = {
name: 'zs',
age: 18,
height: 180,
};
let omitAfter = _.omit(obj, ['name', 'age']);
console.log(omitAfter) // { height: 180 }
7.truncate
在处理标题过长的时候经常需要截取使用'...'代替的
_.truncate('此处是标题过长过长', { length: 5, omission: '...' })
// "此处..." tag: 此时的length包括...的长度