vue中判断a对象实在中id是否与b对象数组的id相等,有则删除(通过id求ab两对象数组的差集)

实际项目开发中常常遇到处理数组的需求,其中就有包括求两数组的差集,需要我们通过b对象数组的id来判断a对象数组中是否存在相同的id有则将a对象数组中的对象删除,简单的理解就是求ab两对象数组中的差集,以下简单介绍了几种方法可自行参考。

一、filter()和some()结合使用

备注: filter()遍历数组,创建一个新的数组检查返回数组中符合条件的元素
            some()方法检查数组中是否存在某个元素,如果存在放回true否则放回false

代码如下:

data() {
			return {
				a: [{
					id: 1,
					name: '我的1'
				}, {
					id: 2,
					name: '我的2'
				}, {
					id: 3,
					name: '我的3'
				}],
				b: [{
					id: 1,
					name: '我的1'
				}, {
					id: 2,
					name: '我的2'
				}]
			}
		},
		onLoad() {
			this.handleArray()
		},
		methods: {
			handleArray() {
				let c = this.a.filter(item => !this.b.some(i => i.id === item.id))
                console.log(c)
				// 首先遍历a数组当获取到第一项时
				let d = this.a.filter(item => {
					// 遍历b数组
					let f = this.b.some(i => {
						// 查找b数组中是否有id相等有则返回true,没有则返回false
						return i.id === item.id
					})
					// 取反则表示剔除a数组中包含b的
					return !f
				})
				console.log(d)
			},

二、使用filter(),includes(),map()

备注:includes()判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

注意:对象数组不能使用includes()方法来检测

代码如下:将一下代码替换方法一种的handleArray()方法即可

handleArray() {
				// 由于对象数组不能使用includes()方法来检测,所以在使用是需要先将b数组转化为字符串数组
				let c = this.b.map(item => {
					return item.id
				})
				// 以下为变型,因为只有一个处理条件可以缩写为
				// let c = this.b.map(item => item.id)
				// 获取b数组中以id组合的数组后
				let d = this.a.filter(item => !c.includes(item.id)) //符合查找条件为true,否则为false,我们需要过滤相同的则需取反
				console.log(d)
			},

三、后续优化

猜你喜欢

转载自blog.csdn.net/A1123352950/article/details/132764637