关于数组问题的处理(使用lodash)

1,919 阅读4分钟

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是相等的,那么就根据这个联系找到相关的数据
处理思路:

  1. 循环遍历arr2,拿出它的每一项值。
  2. 在循环遍历的过程中,找到与数组arr1相配置的数据,使用一个变量来接收
  3. 将返回的数组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包括...的长度