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循环进行嵌套,提升运行效率