嗨，今天周二了哎！ 期待周五
文章目录
- 一、js只保留数组对象的某个属性
- 二、合并公共类型的数据
- 二、选择树形结构的数据，并保留每个节点的name
一、js只保留数组对象的某个属性
let data = [{ id: 1, name: '哈哈' }, { id: 2, name: '嘻嘻' }]
let newData = []
data.map(item => {
newData.push(Object.assign({}, { name: item.name, }))
})
console.log(newData, 'pyq')
map 和 foreach 相似，但是map 有返回值
二、合并公共类型的数据
let data = [
{
cost_name: "分检费",
number: "12",
unit: "吨",
total_price: "60"
},
{
cost_name: "冷冻费",
number: "5",
unit: "吨",
total_price: "10"
},
{
cost_name: "分检费",
number: "6",
unit: "吨",
total_price: "30"
},
{
cost_name: "冷冻费",
number: "30",
unit: "吨",
total_price: "600"
},
{
cost_name: "包装费",
number: "12",
unit: "吨",
total_price: "100"
}
];
let newData = [
{
cost_name: "分检费",
number: "18",
unit: "吨",
total_price: "90"
},
{
cost_name: "冷冻费",
number: "35",
unit: "吨",
total_price: "610"
},
{
cost_name: "包装费",
number: "12",
unit: "吨",
total_price: "100"
}
];
我们的需求是将 data 的数据合并称 newData 的数据，先将数据按公共合并
先将数据扁平化
let arr = [];
let obj = {};
let objChild = {};
data.forEach(item => {
obj = {
cost_name: item.cost_name,
unit: item.unit,
spend: []
};
objChild = {
number: item.number,
total_price: item.total_price
};
obj.spend.push(objChild);
arr.push(obj);
});
结果
let data = [
{
cost_name: "分检费",
unit: "吨",
spend:[
{ number: "12",total_price: "60" }
]
},
{
cost_name: "冷冻费",
unit: "吨",
spend:[
{ number: "5",total_price: "10"}
]
},
{
cost_name: "分检费",
unit: "吨"
spend:[
{ number: "6",,total_price: "30"}
]
},
{
cost_name: "冷冻费",
unit: "吨",
spend:[
{ number: "30",total_price: "600"}
]
},
{
cost_name: "包装费",
unit: "吨",
spend:[
{ number: "12",total_price: "600"}
]
}
];
我们的需求是将
数据 再次处理成为我们想要的结果
let newData = [];
let newObj = {};
arr.forEach((el, i) => {
if (!newObj[el.cost_name]) {
// 循环遍历 arr 每一项，如果费用不存在，就将这个条数据添加至新数组里
// 并且给 newObj 对象费用类别做个标记，下次再走这个费用类别时，说明存在就走另一个判断
// {分检费：true,包装费：true,....}
newData.push(el);
newObj[el.cost_name] = true;
} else {
// 在收集的新数据里，我们要用之前的数据和当前项判断
// 找到相同项，添加至新的新数据项里
newData.forEach(el2 => {
if (el2.cost_name === arr[i].cost_name) {
el2.spend = [...el2.spend, ...arr[i].spend]; // es6语法
}
});
}
});
二、选择树形结构的数据，并保留每个节点的name
最近做了一个功能，后端返回一个树形结构的数据，里面有很多节点，选中某个节点，需要保留它上级的name,大家也能想想到树形的数据，当前的 id 等于 上层的 pid, 要注意这个是很重要的 ！！
扁平化数据，变成 [ { } , { } , { } , … ]
flatTreeAndSetLevel(tree, level = 1) {
// tree 要处理的树形数据
// 遍历 tree 树形数据，如果存在子项（all_childer）就删了
// 这是处理第一层，处理完毕，把第一层数据放到新的数组里
//
// 对tree树形结构的子项进行处理，递归处理，先处理每层，先删除子项，并打个标记
// 最后得到的数据 list = [{},{},{}...]
const list = [];
tree.forEach(item => {
const o = JSON.parse(JSON.stringify(item));
if (o.all_children) delete o.all_children;
o.level = level;
list.push(o);
if (item.all_children && item.all_children.length) {
list.push(...this.flatTreeAndSetLevel(item.all_children, level + 1));
}
});
return list;
},
对比找数据
getParentAreas(pid, list) {
// pid 是要对比的 id
// list 是要对比的数据
// 遍历整个 list 数据，如果找到 id = pid ，就把当前的pid 当作 id 继续递归对比，
// 也是找父级的一个过程，最后这个数据为一个数组
const target = [];
const o = list.find(item => item.id == pid) || {};
if (JSON.stringify(o) != "{}") target.push(o);
if (o.pid) target.push(...this.getParentAreas(o.pid, list));
return target;
},
