最近做一个需求,可以对多个资源进行批量设置某些属性,同时
单个资源也可以进行自己独有的属性设置,但是在批量设置界面,需要展示多个资源公共的部分并将其渲染出来,数据处理结果如下
批量设置属性界面:
单个属性设置界面:
需求简化如下:实际就是考验对数组和对象的处理,demo如下
<script> //求多个资源中每个属性都出现,且属性出现的次数和资源条数相同的结构 let arr = [{ id: 1, tag: { 'tagtother': [1, 2, 3, 4, 5, 6], 'tagtime': [7, 8, 9], 'taglocation': [10, 11, 12], 'tagperson': [13, 14, 15], 'tagperxx': ['nn', 'mm'], } }, { id: 2, tag: { 'tagtother': [1, 2, 3, 90], 'tagtime': [7, 8, 80], 'taglocation': [10, 11, 23], 'tagperson': [13, 14, 15, 78], 'tagmm': ['red', 'green'], } }, ] let obj = {} let newarr = [] arr.forEach(item => { newarr.push(...Object.keys(item.tag)) // 并且要过滤只有相同属性的对象 for (const key in item.tag) { if (!obj[key]) { obj[key] = item.tag[key] } else { obj[key].push(...item.tag[key]) } } }) // console.log(obj) // 过滤相同属性名 let nameobj = {} newarr.forEach((item => { if (!nameobj[item]) { nameobj[item] = 1 } else { nameobj[item]++ } })) let dataArr = [] for (let key in nameobj) { if (nameobj[key] == arr.length) { //证明每个数组都出现过这个属性 dataArr.push(key) } } console.log(dataArr, obj) let dataArray = [] for (let key in obj) { dataArr.forEach((item, index) => { if (key == item) { //如果存在这个对象则保留,否则删除 dataArray.push({ id: item, tags: obj[key] }) } }) } console.log(dataArray) // let lasrArr = [] dataArray.forEach((item, index) => { let tags = {} // 数组成员的出现次数要和总的数据条数相同 item.tags.forEach((ii, indx) => { if (tags[ii]) { tags[ii]++ } else { tags[ii] = 1 } }) console.log(tags) item.tags = [] for (let key in tags) { if (tags[key] == arr.length) { item.tags.push(key * 1) } } }) console.log(dataArray) </script>