js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标(js去掉数组中的空字符串)

js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标 一、js去掉两个数组相同的元素

推荐整理分享js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标(js去掉数组中的空字符串)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js去掉两个数组的重复值,js去掉两个数组的一个值,js数组删除另一个数组,js数组删除另一个数组,js去除数组,js去掉两个数组的重复值,js去掉两个数组的一个值,js去掉两个数组的一个值,内容如对您有帮助，希望把文章链接给更多的朋友！

注意：这里并非是数组去重，数组去重是去掉一个数组中相同的元素，这里是比较两个数组，过滤掉二者相同的，留下不同的。

通过 some() 在对方数组里面查找相同元素，再利用filter() 过滤掉当前数组里与对方数组相同的元素。

const arr1 = [1, 2, 3, 56]const arr2 = [1, 2, 3, 780]const res = arr2.filter(item1 => !arr1.some(item2 => item2 === item1))console.log(res); // [780]arr2 与 arr1相同的元素有 1,2,3 ，res的结果就是 780const res2 = arr1.filter(item1 => !arr2.some(item2 => item2 === item1))console.log(res2); // [56]如果是数组对象(同上，查找对象 id 属性) let arr1 = [ {id:1,name:'小明',age:18}, {id:2,name:'小红',age:16}, {id:4,name:'小紫',age:22}, {id:5,name:'小绿',age:20}, ] let arr2 =[ {id:2,sex:'女'}, {id:5,sex:'男'}, ]let newArr = arr1.filter((item) => !arr2.some((ele) => ele.id === item.id));

打印结果：

还可利用 includeslet getId = arr2.map(item=>item.id)let newArr2 = arr1.filter(item=>!getId.includes(item.id))

打印结果：

二、js删除数组中某一个对象let arr1 = [ {id:1,name:'小明',age:18}, {id:2,name:'小红',age:16}, {id:4,name:'小紫',age:22}, {id:5,name:'小绿',age:20}, ] //假设 去掉name为小明的 这条数据 arr.splice(arr.indexOf(arr.find((e) => { return e.name=== "小明"; })), 1);

参考：https://blog.csdn.net/weixin_43743175/article/details/125257773

三、js快速查找数组中重复项下标var ARR = [1,2,3,4,5,1,2];var rep = [];ARR.forEach((item,index)=>{if(ARR.indexOf(item)!=index){rep.push(ARR.indexOf(item),index)}})

打印结果： 参考：https://blog.csdn.net/smz8023/article/details/86164751

例子：

假如后台返回了个这样的简单数据：

list: [ { totalNum: 1000, touchNum: 300, kpiName: '浏览量', itemStyleColor: ['#4CA4EC', '#B6D9F6'] }, { totalNum: 2000, touchNum: 600, kpiName: '任务领取个数', itemStyleColor: ['#624cec', '#b6bbf6'] } { totalNum: 3232, touchNum: 800, kpiName: '浏览量', itemStyleColor: ['#4CA4EC', '#B6D9F6'] } ]

而前端需要下面这样的数据结构，后端不好处理，让前端处理

list: [ { chartList: [ { totalNum: 1000, touchNum: 300, kpiName: '浏览量', itemStyleColor: ['#4CA4EC', '#B6D9F6'] }, { totalNum: 2000, touchNum: 600, kpiName: '任务领取个数', itemStyleColor: ['#624cec', '#b6bbf6'] } ], groupName: '寿险公司', groupId: 'gruop1' }, { chartList: [{ totalNum: 3232, touchNum: 800, kpiName: '浏览量', itemStyleColor: ['#4CA4EC', '#B6D9F6'] }], groupName: '电商公司', groupId: 'group2' }],

思路：根据某种规律，先拆分数据，采用 总-分-总 的模式，遇到难解决的数据分类拆分-最后合并。

参考实现：

/** * @Description: 机构数据整理 * @param {*Array} list 目标数据 * @return {*Array} 最终数据 */ matchFun(list) { const typeColor1 = ['#624cec', '#b6bbf6'] const typeColor2 = ['#4CA4EC', '#B6D9F6'] let arr1 = [] //转发 let arr2 = [] //浏览 let chartObj let newList = [] list.forEach((item, index) => { if (item.type == 1) { arr1.push(item) } else if (item.type == 2) { arr2.push(item) } }) for (let index = 0; index < arr1.length; index++) { chartObj = { chartList: [] } const element1 = arr1[index] chartObj.groupName = element1.groupName chartObj.groupId = element1.groupId for (let j = 0; j < arr2.length; j++) { const element2 = arr2[j] if (element1.groupId === element2.groupId) { chartObj.chartList[0] = element2 chartObj.chartList[1] = element1 } } newList.push(chartObj) newList.forEach((item) => { item.chartList.forEach((itm) => { itm.itemStyleColor = itm.type == '1' ? typeColor1 : typeColor2 }) }) newList = newList.filter((item) => item.chartList.length > 0) } /处理单个图表数据// let arrSet1 = [] //去重后的单个指标图表 let arrSet2 = [] arrSet1 = arr1.filter((item) => !arr2.some((ele) => ele.groupId == item.groupId)) arrSet2 = arr2.filter((item) => !arr1.some((ele) => ele.groupId == item.groupId)) arrSet1.forEach((item) => { let chartList = [{}] item.chartList = chartList item.chartList[0] = { itemStyleColor: item.type == '1' ? typeColor1 : typeColor2, checkId: item.checkId, groupId: item.groupId, type: item.type, total: item.total, num: item.num } }) arrSet2.forEach((item) => { let chartList = [{}] item.chartList = chartList item.chartList[0] = { itemStyleColor: item.type == '1' ? typeColor1 : typeColor2, checkId: item.checkId, groupId: item.groupId, type: item.type, total: item.total, num: item.num } }) // 最后合并二者 newList = [...newList, ...arrSet1, ...arrSet2] return newList }