+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] Remove Duplicates from Array JavaScript (/thread-99848.html)
[Tut] Remove Duplicates from Array JavaScript - xSicKxBot - 08-24-2022
Remove Duplicates from Array JavaScript
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/08/remove-duplicates-from-array-javascript.jpg" width="550" height="520" title="" alt="" /></div><div><div class="modified-on" readability="7.1111111111111"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on August 24th, 2022.</div>
<p>In JavaScript, there are many options to removing duplicates. We shall see them one by one with examples below.</p>
<p>This example provides all those options from easy to complex solutions to achieve this. You can save this into your application’s common client-side assets to use in your projects.</p>
<h2>1) Remove duplicates using JavaScript Set</h2>
<p>This quick example uses the JavaScript Set class. This class constructs a unique elements array.</p>
<p>If you pass an input array with duplicate elements, the Set removes the duplicate and returns an array of unique elements.</p>
<div class="post-section-highlight" readability="44">
<h3>Quick example</h3>
<pre class="prettyprint"><code class="language-javascript">// best and simple solution
// when creating a JavaScript Set, it implicitly removes duplicates
const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd'];
console.log(arrayElements);
let uniqueElements = [...new Set(arrayElements)];
// result array after remove is [ 'a', 'b', 'c', 'd' ]
console.log(uniqueElements);
</code></pre>
</div>
<p><img loading="lazy" class="alignnone size-large wp-image-19103" src="https://phppot.com/wp-content/uploads/2022/08/remove-duplicates-from-array-javascript-550x520.jpg" alt="remove duplicates from array javascript" width="550" height="520" srcset="https://phppot.com/wp-content/uploads/2022/08/remove-duplicates-from-array-javascript-550x520.jpg 550w, https://phppot.com/wp-content/uploads/2022/08/remove-duplicates-from-array-javascript-300x284.jpg 300w, https://phppot.com/wp-content/uploads/2022/08/remove-duplicates-from-array-javascript-768x726.jpg 768w, https://phppot.com/wp-content/uploads/2022/08/remove-duplicates-from-array-javascript.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>Output</h3>
<pre class="prettyprint"><code class="language-javascript">
[ 'a', 'b', 'c', 'd' ]
</code></pre>
<h2>2) Fastest method to remove duplicates from an array</h2>
<p>This is the fastest method to remove duplicates from an <a href="https://phppot.com/php/power-of-php-arrays/">array</a>.</p>
<p>The <em>removeDuplicates()</em> custom function runs a loop on the input array.</p>
<p>It defines an array <em>seen[]</em> to mark that the element is found already.</p>
<p>It checks if it is already set in the <em>seen[]</em> array during the iteration. If not, it will be added to the resultant unique array.</p>
<pre class="prettyprint"><code class="language-php-template"><html>
<body> <h1>Remove Duplicates from Array JavaScript - fastest method</h1> <script> function removeDuplicates(arrayElements) { var seen = {}; var resultArray = []; var length = arrayElements.length; var j = 0; for (var i = 0; i < length; i++) { var element = arrayElements[i]; if (seen[element] !== 1) { seen[element] = 1; resultArray[j++] = element; } } return resultArray; } const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd']; console.log(arrayElements); uniqueElements = removeDuplicates(arrayElements); // result array after remove is [ 'a', 'b', 'c', 'd' ] console.log(uniqueElements); </script>
</body>
</html></code></pre>
<h2>3) Remove duplicates from an array using filter()</h2>
<p>The JavaScript filter is used with an arrow function to narrow down the array output. It filters the array of elements based on their uniqueness.</p>
<p>The filter condition uses JavaScript <em>indexOf()</em> method to compare. The <em>indexOf()</em> always returns the first index of the element. It is regardless of its multiple occurrences in an array.</p>
<p>This filter condition compares the first index with the current index of the original array. If the condition is matched then the arrow function returns the element to the output array. Refer this for <a href="https://phppot.com/php/php-input-filtering/">filtering an array in PHP</a> of elements to get rid of duplicates.</p>
<pre class="prettyprint"><code class="language-php-template"><html>
<body> <h1>Remove Duplicates from Array JavaScript using filter()</h1> <script> const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd']; console.log(arrayElements); let uniqueElements = arrayElements.filter((element, index) => { return arrayElements.indexOf(element) === index; }); // result array after remove is [ 'a', 'b', 'c', 'd' ] console.log(uniqueElements); </script>
</body>
</html>
</code></pre>
<h2>4) Remove Duplicates from Array using JavaScript Hashtables</h2>
<p>In this method, the JavaScript hashtable mapping is created based on the data type of the input array element. It defines a JavaScript primitive data type object mapping array.</p>
<p>It applies the filter to do the following steps.</p>
<ol>
<li>It gets the array element’s data type.</li>
<li>If the element is the type one among the primitive array defined, then it applies the filter condition.</li>
<li>Condition checks if the hashtable has an entry as same as the current element’s property. If a match is found, then it returns the current element.</li>
<li>If the array element is not a primitive data type, then the filter will be based on the JavaScript <em>objects’</em> linear search.</li>
</ol>
<pre class="prettyprint"><code class="language-php-template"><html>
<body> <h1>Remove Duplicates from Array JavaScript using Hashtables</h1> <script> // uses hash lookups for JavaScrip primitives and linear search for objects function removeDuplicates(arrayElements) { var primitives = { "boolean": {}, "number": {}, "string": {} }, objects = []; return arrayElements .filter(function(element) { var type = typeof element; if (type in primitives) return primitives[type] .hasOwnProperty(element) ? false : (primitives[type][element] = true); else return objects.indexOf(element) >= 0 ? false : objects.push(element); }); } const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd']; console.log(arrayElements); uniqueElements = removeDuplicates(arrayElements); // result array after remove is [ 'a', 'b', 'c', 'd' ] console.log(uniqueElements); </script>
</body>
</html>
</code></pre>
<h2>5) Remove Duplicates from Array using includes() and push()</h2>
<p>This method uses <a href="https://phppot.com/javascript/for-each-javascript/">JavaScript forEach()</a> to iterate the input array. It defines an empty array to store the unique elements <em>uniqueElements[]</em>.</p>
<p>In each iteration, it checks if the <em>uniqueElements[]</em> <a href="https://phppot.com/php/php-in_array/">array already has the element</a>. It uses JavaScript includes() to do this check.</p>
<p>Once the <a href="https://phppot.com/javascript/javascript-includes/"><em>includes()</em> function</a> returns false, then it will push the current element in to the <em>uniqueElements[]</em>.</p>
<pre class="prettyprint"><code class="language-php-template"><html>
<body> <h1>Remove Duplicates from Array JavaScript using includes() and push()</h1> <script> const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd']; console.log(arrayElements); let uniqueElements = []; arrayElements.forEach((element) => { if (!uniqueElements.includes(element)) { uniqueElements.push(element); } }); // result array after remove is [ 'a', 'b', 'c', 'd' ] console.log(uniqueElements); </script>
</body>
</html>
</code></pre>
<h2>6) Remove Duplicates from Array using reduce()</h2>
<p>Like the JavaScript filter() function, the reduce() function also applies conditions to narrow down the input array.</p>
<p>This function has the current element and the previous result returned by the callback of the reduce().</p>
<p>Each callback action pushes the unique element into an array. This array is used in the next callback to apply includes() and push() to remove the duplicates.</p>
<pre class="prettyprint"><code class="language-php-template"><html>
<body> <h1>Remove Duplicates from Array JavaScript using reduce()</h1> <script> const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd']; console.log(arrayElements); let uniqueElements = arrayElements.reduce(function(pass, current) { if (!pass.includes(current)) pass.push(current); return pass; }, []); // result array after remove is [ 'a', 'b', 'c', 'd' ] console.log(uniqueElements); </script>
</body>
</html>
</code></pre>
<h2>7) Remove Duplicates from Array using JavaScript Sort</h2>
<p>It sorts the input array and removes the duplicates by successive elements comparison.</p>
<p>After <a href="https://phppot.com/php/php-array-sort/">sorting</a>, the filter functions condition checks if the current and the previous element are not the same. Then, filters the unique array out of duplicates.</p>
<pre class="prettyprint"><code class="language-php-template"><html>
<body> <h1>Remove Duplicates from Array JavaScript using Sort</h1> <script> // sort the JavaScript array, and then // remove each element that's equal to the preceding one function removeDuplicates(arrayElements) { return arrayElements.sort().filter( function(element, index, ary) { return !index || element != ary[index - 1]; }); } const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd']; console.log(arrayElements); uniqueElements = removeDuplicates(arrayElements); // result array after remove is [ 'a', 'b', 'c', 'd' ] console.log(uniqueElements); </script>
</body>
</html>
</code></pre>
<h3>Output:</h3>
<pre><code>Array(6) 0: "a" 1: "b" 2: "c" 3: "a" 4: "b" 5: "d" length: 6
Array(4) 0: "a" 1: "b" 2: "c" 3: "d" length: 4
</code></pre>
<p><a class="download" href="https://phppot.com/downloads/javascript/remove-duplicates-from-array-javascript.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/remove-duplicates-from-array-javascript/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/08/24/remove-duplicates-from-array-javascript/