两个数组对象,比较后取出不同项变成新数组

本文介绍了一种通过遍历两个数组,并对比其中元素的方法来找出不同项的技术。具体实现了从第一个数组中去除与第二个数组中相同的元素,得到只属于第一个数组的独特元素集合。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、现有两个数组

	let arr1 = [
		{name: 'bob1', age: 11},
		{name: 'bob2', age: 12},
		{name: 'bob3', age: 13},
		{name: 'bob4', age: 14},
		{name: 'bob5', age: 15},
		{name: 'bob6', age: 16},
		{name: 'bob7', age: 17},
	]
	let arr2 = [
		{name: 'bob1', age: 11},
		{name: 'bob2', age: 12},
		{name: 'bob3', age: 13},
	]

2、期望 arr1 与 arr2 比较后,返回新数组 :

let newArr = [
		{name: 'bob4', age: 14},
		{name: 'bob5', age: 15},
		{name: 'bob6', age: 16},
		{name: 'bob7', age: 17},
	]

3、具体实现:

let res = []
for(let i = 0; i < arr1.length; i++){
	let isExit = false
	let item1 = arr1[i]
	let itemName1 = arr1[i].name
	for(let j = 0; j < arr2.length; j++){
		let item2 = arr2[j]
		let itemName2 = arr2[i].name
		 if(itemName1 === itemName2 ){
              isExist = true;
              break;
         }
	}
	
	if(!isExit){
		res.push(item1)
	}
}
console.log(res) // 最终比较后,所得不同数据组成的数组

就记录到这里,祝大家开心
在这里插入图片描述

<think>我们有两个任务:1.从两个数组中找出相同的元素(值),并生成新数组。2.从两个数组对象中提取具有相同元素(可能是某个属性相同)的对象并组成一个新数组。根据引用,我们可以找到几种方法:对于第一个任务(基本数组):-引用[3]提供了一种使用双重循环的方法,将相同的元素放入新数组。-引用[4]提供了一种使用filter和includes的方法,不过它找的是不同元素。我们可以反过来用,找相同元素:用filter过滤出arr1中那些arr2也包含的元素。对于第二个任务(数组对象):-我们需要根据某个属性(比如id)来比较两个数组中的对象,将具有相同属性值的对象取出来(或者合并)组成新数组。用户的问题描述中包含了两个部分,但最后的问题聚焦在“从两个数组中找出相同的元素并生成新数组”,但前面提到了“数组对象”。所以我们需要明确。由于用户的问题有两个可能:1.基本数组:找出相同的元素(值相同)2.数组对象:找出相同属性值的对象(比如id相同)我们先解决基本数组的情况,再解决数组对象的情况。根据引用[3]和引用[4]的思路,我们可以用以下方法:方法一:使用双重循环(适用于基本数组对象数组,但对象数组需要比较特定属性)方法二:使用filter和includes(适用于基本数组,对于对象数组,我们可以结合map和includes,或者使用find/findIndex)但是,对于对象数组,我们不能直接用includes,因为对象是引用类型,除非我们比较的是对象的某个属性值。下面我们分别给出示例:一、基本数组(元素为基本类型,如数字、字符串)示例数组:letarr1= [1,2,3,4];let arr2 =[3,4,5,6];目标:得到[3,4]方法1:使用filter和includes(简单高效)let commonElements= arr1.filter(item =>arr2.includes(item));方法2:使用Set(先转换一个数组为Set,然后过滤)let set2 =new Set(arr2);let commonElements =arr1.filter(item=> set2.has(item));方法3:双重循环(如引用[3])二、数组对象(根据某个属性,比如id)示例数组:let arrObj1 =[{ id:1,name:'A' },{ id:2,name:'B' }];let arrObj2= [{id:2, name: 'C'}, {id:3, name: 'D'}];目标:找出两个数组中id相同的对象,并组成新数组。注意,这里可能有多种需求:a.只要第一个数组中匹配到的对象,如:[{ id:2,name:'B' }]b.合并两个数组中匹配到的对象,比如将两个数组中id相同的对象合并成一个新对象(如引用[1]中的操作),或者将两个对象都放入新数组。但是用户问题描述是“提取具有相同元素的对象”,这里相同元素指的是相同属性值(如id相同),那么我们可以提取出两个数组中id相同的对象,然后放入新数组(可能是从第一个数组提取,也可能是从第二个数组提取,或者两个都提取?)通常,我们可以提取第一个数组中那些在第二个数组中有相同id的对象:letcommonIds= arrObj1.filter(item1=> arrObj2.some(item2=> item2.id=== item1.id));这样得到的是arrObj1中id在arrObj2中存在的对象。如果我们要从两个数组中提取所有id相同的对象(每个数组中的都提取),那么可以:letcommonInArr1= arrObj1.filter(item1 =>arrObj2.some(item2 =>item2.id ===item1.id));letcommonInArr2= arrObj2.filter(item2 =>arrObj1.some(item1 =>item1.id ===item2.id));//然后合并这两个数组?但是这样同一个id会出现两次(分别在两个对象中),所以可能不是用户想要的。另一种可能是,用户想要的是:将两个数组中id相同的对象合并成一个新对象(包含两个对象的属性),然后组成新数组。这类似于引用[1]的操作。由于用户的问题描述不够详细,我们将分别给出两种情况的示例:情况1:提取第一个数组中与第二个数组有相同id的对象(仅第一个数组中的对象)情况2:提取两个数组中id相同的对象,并合并成一个新对象(例如,将两个对象的属性合并)我们参考引用[1]中的操作,它根据channelId合并两个数组,生成一个新的数组新数组的每个元素包含一个channelId和一个top数组(来自第一个数组)和一个block数组(来自第二个数组)。所以这是一种合并操作。因此,我们给出两种解决方案:方案A(仅提取相同id的对象)://假设我们提取第一个数组中的对象letcommonObjects= arrObj1.filter(item1=> arrObj2.some(item2=> item2.id=== item1.id));方案B(合并相同id的对象):letcommonObjects= arrObj1.map(item1 =>{let matchedItem =arrObj2.find(item2=> item2.id=== item1.id);if (matchedItem) {//合并两个对象,使用展开运算符return{ ...item1, ...matchedItem};//或者根据需求,只合并部分属性,比如:// return{ id: item1.id, fromArr1:item1, fromArr2: matchedItem };}else {returnnull;//或者不处理,后面过滤掉}}).filter(item =>item !==null);或者,更高效的写法(避免两次遍历):let commonObjects =[];arrObj1.forEach(item1=> {letmatchedItem= arrObj2.find(item2 =>item2.id ===item1.id);if(matchedItem){commonObjects.push({...item1,...matchedItem });}});但是,如果两个数组都很大,使用find可能会导致性能问题(O(n^2))。我们可以先构建一个arrObj2的Map,然后遍历arrObj1:let map2 =new Map();arrObj2.forEach(item=> map2.set(item.id, item));let commonObjects =arrObj1.reduce((acc, item1)=> {if(map2.has(item1.id)){acc.push({ ...item1, ...map2.get(item1.id) });}returnacc;},[]);这样效率更高(O(n+m))。根据用户的问题,我们重点解决基本数组数组对象两种情况。由于用户最后的问题是:“请问javascript两个数组中找出相同的元素并生成新数组”,这里可能指的是基本数组。但为了全面,我们也提供数组对象的方案。下面我们给出代码示例:</think>在JavaScript中,从两个数组中提取相同元素并生成新数组有多种实现方式,以下是针对基本类型数组对象数组的解决方案: ### 一、基本类型数组(数字/字符串) #### 方法1:使用 `filter()` + `includes()`(推荐) ```javascript const arr1 = [1, 3, 5, 7]; const arr2 = [2, 3, 6, 7]; // 找出相同元素 const commonElements = arr1.filter(item => arr2.includes(item)); console.log(commonElements); // 输出: [3, 7] ``` #### 方法2:使用 `Set` 优化性能(大数据量时) ```javascript const set2 = new Set(arr2); const commonElements = arr1.filter(item => set2.has(item)); ``` #### 方法3:双重循环(传统方法) ```javascript let commonElements = []; for (let i = 0; i < arr1.length; i++) { for (let j = 0; j < arr2.length; j++) { if (arr1[i] === arr2[j]) { commonElements.push(arr1[i]); break; } } } ``` ### 二、对象数组(基于特定属性匹配) #### 场景:根据 `id` 属性匹配相同对象 ```javascript const users1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]; const users2 = [{id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]; // 方法1:使用 filter() + find() const commonUsers = users1.filter(user1 => users2.find(user2 => user2.id === user1.id) ); console.log(commonUsers); // 输出: [{id: 2, name: 'Bob'}] // 方法2:使用 Map 优化性能 const map = new Map(users2.map(user => [user.id, user])); const commonUsers = users1.filter(user => map.has(user.id)); ``` ### 三、合并匹配对象(扩展需求) 如果需要合并两个数组中相同ID对象的属性: ```javascript const merged = users1.map(user1 => { const match = users2.find(user2 => user2.id === user1.id); return match ? {...user1, ...match} : null; }).filter(Boolean); console.log(merged); // 输出合并后的对象数组 ``` ### 性能对比 | 方法 | 时间复杂度 | 推荐场景 | |--------------------|------------|------------------| | `filter` + `Set` | $O(n)$ | 大型基本类型数组 | | `filter` + `Map` | $O(n)$ | 大型对象数组 | | 双重循环 | $O(n^2)$ | 小型数组 | > **提示**:对象数组操作时需注意: > 1. 使用严格相等 `===` 比较基本类型属性 > 2. 对象直接比较的是内存引用地址而非内容 > 3. 大数据量时优先使用 `Set`/`Map` 避免性能瓶颈[^1][^4]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值