JS 数组,数组对象的合并去重方法

这次对数组的操作,我们使用es6的新语法来完成,所以在看下边代码之前,我们要了解我们下边要用到的es6中的set集合,和for...of 方法:

首先介绍set集合:

ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化。

注意:

向set加入值的时候,不会发生类型转变,所以 5 和 '5' 是两个不同的值。Set内部判断两个值是否相同,用的是类似于 "==="的算法,但是区别是,在set内部认为NaN 等于 NaN ; 

Set实例的属性和方法:

Set结构的实例有以下属性。

  • Set.prototype.constructor:构造函数,默认就是Set函数。
  • Set.prototype.size:返回Set实例的成员总数。

Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

  • add(value):添加某个值,返回Set结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。

Set内部的元素可以用 for...of 遍历。

Array.from()方法可以将Set数据类型转化为数组类型。

for...of 方法:

通俗一点的讲,就是遍历的是数组的元素值,需要深入了解的同学,请自行百度,这里就不赘述。

1、数组的合并去重

let arr1 = [3,5,2,3,6];

let arr2 = [5,2,4,6,8,7,9,2];

let arr = arr1.concat(arr2);  //合并数组

let arrNew= new Set(arr); //通过set集合去重


console.log("arrNew",Array.from(arrNew)); //将set集合转化为数组

结果

2、数组对象的合并去重

let json1=[
	{id:1,name:"aaa"},
	{id:2,name:"bbb"},
	{id:3,name:"ccc"},
] 


let json2=[
	{id:1,name:"aaa"},
	{id:2,name:"bbb"},
	{id:4,name:"ddd"},
]

let json = json1.concat(json2); //两个数组对象合并

let newJson = []; //盛放去重后数据的新数组

for( let item1 of json){  //循环json数组对象的内容

	let flag = true;  //建立标记,判断数据是否重复,true为不重复

	for( let item2 of newJson){  //循环新数组的内容

		if(item1.id==item2.id){ //让json数组对象的内容与新数组的内容作比较,相同的话,改变标记为false
			flag = false;
		}

	}

	if(flag){ //判断是否重复
		newJson.push(item1); //不重复的放入新数组。  新数组的内容会继续进行上边的循环。
	}
	

}

console.log("newJson",newJson);

结果

### JavaScript 中合并两个数组对象复项 在 JavaScript 中,可以通过多种方式实现数组对象合并操作。下面介绍一种基于 `Set` 和结构解构赋值的方式来进行此操作。 #### 使用 `Set` 对象和扩展运算符 (`...`) 实现简单数值型数组合并 对于简单的数值类型的数组,可以直接利用 ES6 的特性——`Set` 来轻松完成这一任务[^2]: ```javascript function unique(arr) { return [...new Set(arr)]; } let arr1 = [1, 2, 3]; let arr2 = [3, 4, 5]; console.log(unique([...arr1, ...arr2])); // 输出: [1, 2, 3, 4, 5] ``` 然而,在面对更复杂的场景如含有对象数组时,则需采用不同的策略来确保依据特定字段进行唯一性判断。 #### 针对含对象数组按指定键名 假设存在如下形式的对象数组,并希望根据某个共同属性(例如 id 或 name 字段)作为判定条件执行逻辑: ```javascript const arrayA = [ {id: 1, value: "apple"}, {id: 2, value: "banana"} ]; const arrayB = [ {id: 2, value: "orange"}, {id: 3, value: "grape"} ]; ``` 此时可借助 `reduce()` 函数配合 Map 数据结构达到目的[^5]: ```javascript function mergeAndDeduplicateByKey(arrayOne, arrayTwo, keyField){ const map = new Map(); (arrayOne.concat(arrayTwo)).forEach(item => { if(!map.has(item[keyField])){ map.set(item[keyField], item); } }); return Array.from(map.values()); } // 测试代码片段 const mergedUniqueArray = mergeAndDeduplicateByKey( [{id: 1, value: "apple"},{id: 2, value: "banana"}], [{id: 2, value: "orange"},{id: 3, value: "grape"}], 'id' ); console.log(mergedUniqueArray); /* 结果应为: [ {"id": 1,"value":"apple"}, {"id": 2,"value":"banana"}, {"id": 3,"value":"grape"} ] */ ``` 上述例子展示了如何通过自定义函数 `mergeAndDeduplicateByKey` 接收三个参数:待处理的第一个数组、第二个数组以及用于比较的关键字名称。该方法内部创建了一个临时映射表用来存储不复的数据条目,最后将其转换回标准数组格式返回给调用者。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值