项目中数组的一些操作

87 阅读2分钟

1.数组列表将相同类型的值前后放在一起

前言

在项目开发中,当后台接口返回的值相同的类别并没有前后放在一起,但我们在用element-ui里面table组件的合并行或列时,需要将相同的类别放在一起然后实现合并相同行 例如后台返回的数据为:

 let arr = [
 {id:1,category:'cat'},
 {id:2,category:'cat'},
 {id:3,category:'dog'},
 {id:4,category:'cat'},
 {id:5,category:'pig'},
 {id:6,category:'cat'},
 {id:4,category:'dog'},
 ]

需要的数据为

 let arr = [
 {id:1,category:'cat'},
 {id:2,category:'cat'},
 {id:4,category:'cat'},
 {id:6,category:'cat'},
 {id:3,category:'dog'},
 {id:4,category:'dog'},
 {id:5,category:'pig'},
 ]

这样就好实现上下行的合并,类似效果:

代码如下:

function trans(data){
    //data代表需要合并的数组
    let cache = {} // cache存储的键是category,值是这个eid在indices数组中的下标
    let indices = [] // 数组中的每一个值是一个数组,数组中的每一个元素是原数组中相同eid的下标
    data.forEach((item, i) => {
        let eid = item.category;
        let index = cache[eid]
        if (index !== undefined) {
            indices[index].push(i)
        } else {
            cache[eid] = indices.length
            indices.push([i])
        }
    })
    /**
     * 此时,cache:{cat: 0, dog: 1, pig: 2}
     * indices: [[0, 1, 3, 5], [2, 6], [4]}
     * indices中的第1项是eid为cat的数组下标
     * indices中的第2项是eid为dog的数组下标
     * indices中的第3项是eid为pig的数组下标
     */
    let result = []
    indices.forEach(item => {
        item.forEach(index => {
        result.push(data[index]) // 依次把index对应的元素data[index]添加进去即可
        })
    })
    return result
}

2.过滤数组中相同的元素

举例:有时我们在项目中的功能是选择商品添加到一个数组中,可能会第一次选择的商品在后面几次会有重复的,这是我们就需要对选择商品与目前在数组的商品进行对比,如果有相同的就过滤掉 代码如下:

function filterArr(tableData,data){
    //tableData为原有的数组,data为选择的数组
    let obj = {};   //临时对象
    let arrResult = [];
    tableData.forEach(function(item,index){
      obj[item.id] = item.id //将数组tableData中的元素值作为obj 中的键,值为id;
    })

    data.forEach(function(item,index){//找不同相同去掉取反即可
      if(!obj[item.id]){   //通过此对象key的布尔值来作判断,没有则显示underfind取反为true
          arrResult.push(item) 
      }
    })
    let arr = [];
    arr = tableData.concat(arrResult);
    return arr;
}

主要利用对象属性的唯一性,避免使用for循环进行嵌套,提升运行效率