js获取两个数组对象的差集实现方法
更新时间：2023年08月03日 11:59:24 作者：我的一个道姑朋友
这篇文章主要为大家介绍了js获取两个数组对象的差集实现方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
获取两个数组对象中都没不包含的元素
获得两个数组对象的差集，就是获取两个数组对象中都没不包含的元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获得两个数组对象的差集</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
margin: 50px;
}
.item {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="item">
原数组：
<div v-for="(item, index) in selectedText" :key="index">{{item}}</div>
</div>
<div class="item">
和原数组对比的数组：
<div v-for="(item, index) in brightTextArr" :key="index">{{item}}</div>
</div>
<div class="item">
差集：
<div v-for="(item, index) in differenceSet" :key="index">{{item}}</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
// 原数组
selectedText: [
{
"parentId": "1665538708874002433",
"childId": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7"
]
},
{
"parentId": "1665538708861419522",
"childId": [
"0",
"1",
"2",
"3",
"4",
"5"
]
}
],
// 要对比的数组
brightTextArr: [
{
"parentId": "1665538708861419522",
"childId": [
"3",
"4",
"5",
'9'
]
},
{
"parentId": "1665538708869808130",
"childId": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7"
]
}
],
// 差集
differenceSet: []
}
},
created() {
this.subtractionFun(this.selectedText, this.brightTextArr)
},
methods: {
subtractionFun(selectedText, brightTextArr) {
this.differenceSet = JSON.parse(JSON.stringify(brightTextArr));
// 转换成对象，parentId为属性名，childId为属性值,
// 格式为 { 1665538708861419522: ['3', '4', '5', '9'] }
const brightTextMap = this.differenceSet.reduce((pre, cur) => {
return {
...pre,
[cur.parentId]: cur.childId,
};
}, {});
selectedText.forEach((item, index) => {
const childId = item.childId || [];
const parentChildId = brightTextMap[item.parentId] || [];
// 求两个数组的差集
const subtraction = parentChildId.filter((v) => !childId.includes(v));
const parentChildIdIndex = this.differenceSet.findIndex(
(v) => v.parentId === item.parentId
);
if (parentChildIdIndex >= 0) {
// 找到和原数组有相同有parentId并且有差集的那一项，替换成差集
this.differenceSet[parentChildIdIndex].childId = subtraction;
}
});
console.log(this.differenceSet, '差集')
},
}
})
</script>
</body>
</html>遇到的问题
1.将要对比的数组对象转换成以parentId为属性名，childId为属性值格式的对象，这样好对比。
格式为 { 1665538708861419522: ['3', '4', '5', '9'] }
2.需要找到和原数组有相同有parentId并且有差集的那一项，替换成差集
以上就是js获取两个数组对象的差集实现方法的详细内容，更多关于js获取两个数组对象差集的资料请关注脚本之家其它相关文章！
相关文章
javascript FAQ函数，当点击问题时显示下面的回复内容。2009-07-07
前端判断变量不等于undefined不等于null的方法推荐
在前端开发（JavaScript/TypeScript）中,判断一个变量既不等于 undefined 也不等于 null,通常被称为判断空值或有效存在,本文给大家推荐了几种常用的方法,需要的朋友可以参考下2026-02-02
扫雷是一款相当大众的小游戏,游戏目标是在最短的时间内根据点击格子出现的数字找出所有非雷格子,同时避免踩雷。今天我们来看看如何使用javascript来实现这款小游戏2015-03-03
这篇文章主要给大家介绍了关于前端实现Word在线预览功能的相关资料,工作中经常有时会遇到需要给用户创建word文档并实现word文档在线预览的需求,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了在JavaScript中构建ArrayList，很实用,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了基于JavaScript实现简单扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
下面小编就为大家带来一篇JS之获取样式的简单实现方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
理解javascript中try...catch...finally
这篇文章主要帮助大家理解javascript中try...catch...finally，从浅入深，一步步掌握javascript中try...catch...finally的使用方法，感兴趣的小伙伴们可以参考一下2015-12-12
js open() 与showModalDialog()方法使用介绍
项目开发中经常要用到js open() 与showModalDialog()方法，下面有个不错的示例，喜欢的朋友可以研究下2013-09-09
这篇文章主要给大家介绍了关于TypeScript基础入门教程之三重斜线指令的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-10-10
最新评论