开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js 两个数组去重

在 JavaScript 中，对两个数组进行去重可以通过多种方法实现。以下介绍几种常见的方法及其原理：

方法一：使用 `Set` 和展开运算符 (`...`)

Set 是 ES6 引入的数据结构，具有自动去重的特性。通过将两个数组合并后转换为 Set，再转换回数组即可实现去重。

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

const combinedArray = [...new Set([...array1, ...array2])];

console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6]

优势：

简洁明了，代码量少。
性能较好，适用于大多数场景。

方法二：使用 `filter` 和 `indexOf`

通过遍历合并后的数组，利用 filter 方法和 indexOf 判断元素是否首次出现。

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

const combinedArray = [...array1, ...array2];
const uniqueArray = combinedArray.filter((item, index) => {
  return combinedArray.indexOf(item) === index;
});

console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5, 6]

优势：

兼容性好，适用于不支持 Set 的旧环境。

方法三：使用对象属性去重

利用对象的键名唯一性来去重。

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

const combinedArray = [...array1, ...array2];
const uniqueArray = Object.keys(combinedArray.reduce((acc, item) => {
  acc[item] = true;
  return acc;
}, {})).map(Number);

console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5, 6]

优势：

对于处理大量数据时性能表现较好。

应用场景

数据合并：当需要合并两个数据源且确保数据唯一性时。
去重处理：在前端展示数据前进行去重，避免重复显示。
数据处理：在数据分析和处理过程中，去除重复项以获得准确结果。

可能遇到的问题及解决方法

性能问题：
- 当处理非常大的数组时，某些方法可能会变得缓慢。
- 解决方法：使用更高效的方法，如 Set 或对象属性去重，这些方法在处理大数据量时性能更好。

数据类型问题：
- 如果数组中包含不同类型但值相同的元素（如数字 1 和字符串 "1"），上述方法会将它们视为不同的元素。
- 解决方法：在去重前统一数据类型，或在比较时进行类型转换。
顺序问题：
- 某些方法可能会改变原数组中元素的顺序。
- 解决方法：使用 Set 或 filter 方法，这些方法会保留元素的原始顺序。

通过以上方法和注意事项，可以有效地对两个数组进行去重操作，确保数据的唯一性和准确性。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

javascript数组去重set方法_js数组去重api

数组去重的几种方法 1.遍历数组法 ---- 这是最简单的数组去重方法，实现思路：新建一新数组，传入要去重的数组，遍历该数组，若值不在新数组中则加入该数组；需要注意点：判断值是否在数组的方法“indexOf...-1){ new_arr.push(val); } }); return new_arr; } 2.对象键值对法 ---- 思路：新建一对象以及数组...，遍历传入的数组，判断值是否为js对象的键，若不是则新增键值，并放入数组中；需要注意的地方：判断是否为js对象键时，会自动对传入的键toString(); function removeDup2...; new_arr.push(val); } } return new_arr; } 缺点：无法真正区分两个对象...false : (obj[type] = item); } ) } // 可去除undefined, NaN, Object重复项 4.ES6，Set和Map去重 ---

2.6K2 0

js 数组去重原

newArr; }; var arr = [1,3,1,2]; console.log(arr.unique()); 但是IE6-IE8不支持数组的

2.4K3 0

js对象数组去重

利用对象的键名无法重复的特点，必须知道至少一个对象数组中的对象的属性名，对象数组中必须有唯一的id，并且不重复。ES6 提供了新的数据结构 Set，它类似于数组，但是成员的值都是唯一的，没有重复。...Array.from方法 Array.from方法可以将 Set 结构转为数组 const items = new Set([1, 2, 3, 4, 5,1,2,3,4,5,]); Array.from...(items);//[1,2,3,4,5] 对象数组中的去重 var arr = [{id: '1',name: '小红'},{id: '3',name: '小黄'},{id: '2',name: '小明...item=>item.id)).size< arr.length){console.log('有重复')}else{console.log('没有重复')}//有重复的 //将获得的json转化为数组

4.8K1 0

js对象数组去重

01", value: "乐乐"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}] 方法二：采用数组中的...reduce方法，遍历数组，也是通过对象访问属性的方法。...// 方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值 var obj = {}; arr = arr.reduce(

2.8K3 0

JS数组、数组对象去重方法

} } return newArr } } console.log(deduplication(arr1)); //3,5,6,7,test 对象数组去重方法...1. reduce方法去重 let obj = {}; let arr = [ { name: 'swt', pwd: '123456' }, { name: 'swt...ES6 Set Set本身是一个构造函数，用来生成Set结构；它类似于数组，但是成员的值是唯一的，没有重复的值 let arr = [ { name: 'swt', pwd: '123456

13.7K3 0

最全的JS数组去重

数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看。...在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但还是需要了解一下，以防面试的时候可能回被问到。文末有福利哦 1....，两个null直接消失了双层循环，外层循环元素，内层循环时比较值。...true直接去掉了，NaN和{}去重 6....]){ array.splice(index,1); } loop(index - 1); //递归loop，然后数组去重

2K2 0

js实现数组去重操作

js数组去重一般两种方法，一种是通过循环判断的方式来去重，另一种方式是通过ES6标准的set集合来实现去重，下面分别来看代码。...循环判断去重算法算法的实现原理就是通过两重循环，内部循环判断是否相等，如果相等将外层循环的循环变量+1，这样减少了循环的次数，之后当内部循环结束一次之后arr[i]则为第一个与前一个元素不相等的值。...然后赋值给一个新的数组。重复操作即可完成去重。...} var arr=["red","red","1","5","2","2","1"]; var theArr = delRepeat(arr);//此时theArr的值为：red,5,2,1 set去重...set的方式去重就相当简单了，因为在set这种数据结构中是不允许出现相同的值得，所以利用这一特性可以方便的实现数组去重。

1.9K1 0

简单的js 数组去重方法

数组去重方法 arr //将要去重的数组 model //判断数组去重的字段 function unique ( arr,model ) { //数组去重 let res = [arr[

2.2K1 0

超实用的JS数组去重

一、简单的去重方法，利用数组indexOf方法 // 最简单数组去重法 /* * 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */...let array = [1, 2, 3, 2, 2, 3, 4, 3, 4, 5]; // 数组去重 function unique(ary) { let newAry = []; for.../*==数组去重==*/ let ary = [1, 2, 3, 2, 2, 3, 4, 3, 4, 5]; /* * 1.依次拿出数组中的每一项（排除最后一项：最后一项后面没有需要比较的内容）...;//=>删除后不能让k累加了 k--;//=>删除后先减减，在加加的时候相当于没加没减 } } } console.log(ary); 三、对象键值法去重...let ary = [1, 2, 2, 2, 1, 2, 3, 2, 3, 2, 1], console.log(Array.from(new Set(ary))); //=>基于ES6 SET实现去重

2.1K2 1

JS 数组去重的几个方法

1 Array.prototype.unique1 = function () { 2 var n = []; //一个新的临时数组 3 for (var i = 0; i 数组 4 { 5 //如果当前数组的第i已经保存进了临时数组，那么跳过， 6 //否则把当前项push到临时数组里面 7 if (n.indexOf...n; 10 }; 11 12 13 Array.prototype.unique2 = function() 14 { 15 var n = {},r=[]; //n为hash表，r为临时数组...16 for(var i = 0; i 数组 17 { 18 if (!...{ 33 //如果当前数组的第i项在当前数组中第一次出现的位置不是i， 34 //那么表示第i项是重复的，忽略掉。

2.6K1 0

Golang数组去重&切片去重

合并两个整型切片，返回没有重复元素的切片，有两种去重策略 1....通过双重循环来过滤重复元素（时间换空间） // 通过两重循环过滤重复元素 func RemoveRepByLoop(slc []int) []int { result := []int{} /...效率第一，如果节省计算时间，则可以采用如下方式 // 元素去重 func RemoveRep(slc []int) []int{ if len(slc) < 1024 { //

3.7K2 0

数组去重

利用两个for循环和push方法思路：利用两个for循环.遍历数组中的每一项，对每一项又遍历这项后面的每一项。...直到其后面没有重复的元素就push进新数组 function distinct(arr){...arra = [1,2,3,4,4,1,1,2,1,1,1]; console.log(distinct(arra)); //返回[3,4,2,1] 利用两个...for循环和splice方法思路对数组中的每一项，与该项后面的每一项比较，若相同，就删掉后面的相同项 function...新建一个对象obj，遍历数组中的每一项，如果!

3.1K3 0

一看就会——js数组去重

原生for循环去重 var str = [ 1, 2, 2, 2, 2, 3, 4, 43, 2, 21, 2, 1, 1, 1, 2, 3, 3, 4, 5, 6, 7...console.log(strArr) //去重后 ES6中的set方法去重 set是一个集合允许存储任何类型的唯一值，无论是原始值还是对象引用 set通过构造函数的方式生成，接收一个数组作为参数..., 1, 1, 1, 2, 3, 3, 4, 5, 6, 7, 7, 6, 57, 7, 89, 9, 6, 45, 32, 43, 43, ] //es6中的set方法去重...( new Set(str) ) ) //去重后 //ES6中的set方法不允许重复。...()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

5944 0

JS 数组去重的多种方法

普通方法数组去重 3. filter + indexOf 4. ES6 的 new Set() 5. 需要注意的问题 1....前言本文提供两个数组变量供测试使用 const array = ['html', 'css', 'js', 'css']const resArr = ['html', 'css', 'css', [1...普通方法数组去重下面列举几种数组去重的方法思路都一样: 遍历数组，将数组元素添加到新数组中，新数据中已有该元素，则不添加到新数组 // for + indexOfconst res = [];for...indexOf() 方法判断元素首次出现的下标是否为当前遍历的下标 // ['html', 'css', 'js']const res = array.filter((item, index) => array.indexOf...需要注意的问题当数组中存在引用类型的元素时，引用类型元素无法保持唯一性 const resArr = ['html', 'css', 'css', [1], [1]]// ['html', 'css'

1.3K2 0

js数组去重

我们使用数组解构+Set去重： let list = [1,1,2,3] list = [...new Set(list)] 这里set是一个不重复的集合类，构造函数中我们传入了另一个list 如果是两个数组去重

2.8K4 0

js数组去重

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Obje...

2.4K3 0

JS数组添加数据、数组排序、数组去重

var Data = []; //后台请求返回的result.result.Table for(var i = 0;i < Table.length; i++){ //一维数组...Data.push(Table[i].字段); //二维数组 Data.push({ "value":Table[i].字段}); //多维数组...Table.push(Data); } //数组排序(从小到大) function pup(Data,key){ for (var i = 0; i < Data.length...Data[j]=Data[j+1]; Data[j+1]=temp; }; }; }; return Data; }; //数组去重

4K3 0

js 数组去重

封装了几个js对数组的处理 1.获取数组中某一列的全部内容 let arr = [ { id:'232122', name: '张三' },{ id:'12122',...array_column(arr, column) { return arr.map(x => x[column]) } array_column(arr,'name'); // ['张三','王二'] 2.数组去重...1,1,1,2,3]; function array_unique(arr) { return [...new Set(arr)]; } array_unique(arr); //[1,2,3] 3.二维数组去重...return arr; }; array_unique_two_dimensional(matrix); // [[3,4,5,6], [1,2,3,4]]; 4.二维数组去重

3.7K1 0

js数组去重

对于如下对象数组 [{id: 0, name: "name1"}, {id: 1, name: "name2"},{id: 1, name: "name2"},{id: 1, name: "name2"...+= mulArr[j].name; } } } console.log(ret); 对于形如这种字符串或数字数组去重

3.5K0 0

(转)JS算法系列－数组去重

1.遍历数组法最简单的去重方法，实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法“indexOf”是ECMAScript5 方法，IE8以下不支持，...需多写一些兼容低版本浏览器代码，源码如下： // 最简单数组去重法 function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(...对象以及新数组，遍历传入数组时，判断值是否为js对象的键，不是的话给对象新增该键并放入新数组。...注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，不同的键可能会被误认为一样；例如： a[1]、a["1"] 。解决上述问题还是得调用“indexOf”。..."sort"方法排序结果不怎么靠谱，但在不注重顺序的去重里该缺点毫无影响。

1.8K9 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭