js 过滤 json 数据
- 一、一维数组过滤
- 1、filter
- 2、map
- 二、复杂数组过滤
- 三、树形数据过滤
- 四、过滤附件数组 — filter、map、findIndex
一、一维数组过滤
1、filter
let arr = [
{id: 1,name: "张三",age: 18},
{id: 2,name: "李四",}
]
arr = arr.filter(item => !!item.age);
console.log(arr) // [{id: 1,name: "张三",age: 18}]
2、map
let arr = [
{id: 1,name: "张三",},
{id: 2,name: "李四",}
]
let ids = arr.map(item => item.id);
console.log(ids) // [1,2]
二、复杂数组过滤
map、filter 结合使用
/**
* sub.id: 123
* row.id: "id-123"
* 输出sub.id和row.id不同的项
*/
let new_arr = old_arr.map((item, index) => {
if (!!item.children)
item.children = item.children.filter(sub => sub.id !== row.id)
return item;
}).filter(item => item.children && item.children.length > 0);
三、树形数据过滤
递归
// 过滤有文件的数据
filterTree(tree) {
const result = [];
for (const item of tree) {
const res = this.heplFun(item);
if (res) {
result.push(res);
}
}
return result;
},
// 过滤文件的条件
heplFun(item) {
// 判断条件地方
if (item.pageCount) {
return item;
}
const curent = { ...item, children: [] };
if (item.children && item.children.length > 0) {
for (const child of item.children) {
const res2 = this.heplFun(child);
if (res2) {
curent.children.push(res2);
}
}
}
return curent.children.length > 0 ? curent : null;
},
四、过滤附件数组 — filter、map、findIndex
/**
* 给fileList数组的url加api前缀
* previewSrcList 过滤fileList的url组成新数组
* Index 附件预览时图片地址在previewSrcList数组中的下标
*/
fileList.filter(item => {
return item.url = item.url.indexOf('/Api') > -1 ? item.url : '/Api' + item.url
})
previewSrcList = fileList.map(item => item.url)
Index = previewSrcList.findIndex(item => item === file.url);