如何在javascript中查找重复值并将重复值存储到新数组中

Posted

技术标签:

【中文标题】如何在javascript中查找重复值并将重复值存储到新数组中【英文标题】：How to find repeated values and store repeated values into new array in javascript 【发布时间】：2021-11-09 11:33:37 【问题描述】：

我正在尝试实现一个逻辑，其中我有一个数组 [3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6] 。我想找到所有重复的元素，我想将这些所有重复的元素存储到一个新数组中。我很努力，但没有找到解决办法。

如果有人编写简单的代码并解释代码在做什么，那就太好了。

谢谢

【问题讨论】：

您可以分享您尝试过的代码吗？ 我发现 3 种可能的解决方案不到 1 分钟，您尝试了什么？ 我是初学者，不知道怎么回事 如果您不将代码添加到问题中，我们将无法帮助您调试代码。欢迎来到 SO。当涉及到asking a good question 和这个question checklist 时，您可能会发现阅读网站help section 很有用。您为解决问题而编写的代码应包含minimal reproducible example，并包含在您的问题中。 这能回答你的问题吗？ Get all unique values in a javascript array (remove duplicates) 【参考方案1】：

我们可以通过保留独特元素的列表来解决这个问题。 如果我们保留唯一元素的列表，那么收集重复元素会很容易。

这可能不是效率的最佳解决方案，但它解决了当前的问题。我对代码进行了注释，因此它可能会帮助您了解发生了什么。

要解决这类问题，最好学习算法。

const arr = [3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6];

let uniqueElmts = [];  // here we gonna store unique elements
let duplicates = [];   // here we gonna store duplicate elements 

for(let i = 0; i < arr.length; i++)
   if(uniqueElmts.includes(arr[i]))  // if 'uniqueElmts' already contains arr[i], then arr[i] is a duplicate 
        duplicates.push(arr[i]);  // push arr[i] element to 'duplicates' array, because it's duplicate
   
   else 
        uniqueElmts.push(arr[i]);     // if 'uniqueElmts' doesn't contain arr[i] then it's unique element so we push arr[i] to 'uniqueElmts' 
   



console.log(duplicates); // [ 5, 5, 63, 2, 4, 5, 2, 4, 2, 1, 4, 5, 3, 6 ]

【讨论】：

【参考方案2】：

如果你只需要重复的数组项，你可以使用这个：

var arry = [3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6];
var rep_arry = [];
   
for (const [key,val] of Object.entries(arry)) 
  for (const [key1,val1] of Object.entries(arry)) 
     if(val == val1 && !rep_arry.includes(val) && key != key1)
         rep_arry.push(val);
     
      

console.log(rep_arry);

返回这个

[3, 4, 63, 5, 1, 2, 6]

上面的代码使用两个 for 循环检查每个单独的元素，每个元素使用两个 for 循环。在推送之前，我设置了 3 个条件，1 用于检查等于，2 用于已经存在检查项目是否可用于新数组，第三个用于防止使用键通过其自己的元素进行检查。它也适用于大量项目。看sn-p。

<html>

    <script>
        var arry = [3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6,3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6];
        var rep_arry = [];
       
        for (const [key,val] of Object.entries(arry)) 
           
            for (const [key1,val1] of Object.entries(arry)) 
                if(val == val1 && !rep_arry.includes(val) && key != key1)
                    rep_arry.push(val);
                
            
            
        
        console.log(rep_arry);
    </script>
</html>

【讨论】：

这项工作在一个小数组上，当你有 5000 个元素时，你会遇到麻烦。 OP 要求解释代码在做什么。 你认为数组中的项目越多，它就越麻烦吗？ , @PhilAndelhofs，回答你的问题，检查这个codepen.io/ranjandaswani/pen/RwgZEev【参考方案3】：

首先你需要了解一些基础知识。

数组映射 - Information on MDN

数组映射会创建一个新数组并且不会改变您当前的数组。

//So if we do:
[3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6].map((element, index, array) =>  return 0;  );
//We get
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

Array.indexOf(element) Information on MDN

返回数组中元素的索引，未找到-1，从0开始。

//So if we do:
[3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6].map( (element, index, array) =>  return array.indexOf(element);  );
// we get 
// [0, 1, 2, 3, 3, 5, 3, 7, 2, 7, 1, 3, 12, 7, 1, 15, 16, 7, 18, 5, 1, 3, 22, 0, 12]

//so if we do use the second parameter of map in combination with indexOf
[3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6].map( (element, index, array) =>  return array.indexOf(element) === index;  );
// we get 
// [true, true, true, true, false, true, false, true, false, false, false, false, true, false, false, true, true, false, true, false, false, false, true, false, false]

总结一下：

[3,4,63,5,5,1,5,2,63,2,4,5,6,2,4,56,74,2,671,1,4,5,7,3,6].map( (element, index, array) =>  
    if ( array.indexOf(element) !== index )  
       return element; 
     else  
        return undefined; 
    
);
// will give us
// [undefined, undefined, undefined, undefined, 5, undefined, 5, undefined, 63, 2, 4, 5, undefined, 2, 4, undefined, undefined, 2, undefined, 1, 4, 5, undefined, 3, 6]

数组过滤器Information on MDN

// so now we have our array of elements that are duplicated with undefined values in it, now we filter.

[undefined, undefined, undefined, undefined, 5, undefined, 5, undefined, 63, 2, 4, 5, undefined, 2, 4, undefined, undefined, 2, undefined, 1, 4, 5, undefined, 3, 6].filter( (element) =>  
    return element !== undefined; 
);
//result
[5, 5, 63, 2, 4, 5, 2, 4, 2, 1, 4, 5, 3, 6]

这是我能给出的最基本的解释，不使用条件运算符，存储在变量中等。如果你在编程方面更高级，你可以编写更短的代码，称为 1 班轮。但我希望这会给你灵感，让你继续做下去。但你必须先了解基础知识，这意味着学习、阅读、了解更多并进行大量练习。

【讨论】：

你可以直接在原始数组上.filter((e, i, a) =&gt; a.indexOf(e) !== i)。 哇，简单，我只是指出中间的.map 步骤没有任何作用，因为您的最终.filter 可以直接在原始数组上调用，与您完全相同的.indexOf逻辑。这不是关于单行，而是关于不在数组上迭代两次。 是的，优化你的代码，最有趣的部分是追逐那些μs。但我们都必须从某个地方开始。我怀疑这个问题将被删除。我应该删除它。但是新人对编程有一些最基本的问题，不知道该去哪里或如何开始。 哈哈哈哈小伙子

以上是关于如何在javascript中查找重复值并将重复值存储到新数组中的主要内容，如果未能解决你的问题，请参考以下文章

使用javascript查找css自动高度值[重复]

JavaScript：查找值是不是在数组中的对象内的最佳方法[重复]

在Javascript中的对象数组中查找值[重复]

Javascript从多个数组中查找所有重复项

如何在arraylist中查找具有计数和重复值总数的重复值

如何使用 JavaScript 在 Web 浏览器中查找尺寸 [重复]