How to remove duplicate values from array in javascript
Created at 11-Mar-2021 ,
By samar
How to remove duplicate values from array in javascript
In this article, we will see how to solve "How to remove duplicate values from array in javascript".
-
<script> var fruits = ["Apple", "Banana", "Mango", "Orange", "Banana", "Papaya"]; var uniqueFruits = []; $.each(fruits, function(i, el){ if($.inArray(el, uniqueFruits) === -1) uniqueFruits.push(el); }); console.log(uniqueFruits); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
You can use jQuery $.each() and $.inArray() method to remove duplicate values from array. Here $.each() function is used to iterate over an array and you can get each element and insert into a new array (uniqueFruits) if it does not already exist in it by using the $.inArray method. $.inArray() method returns the index number of the element of the uniqueFruits array. If the index number of the element is -1 which means the element does not exist then it pushes (inserts) the element into the uniqueFruits array. The $.inArray() method is similar to JavaScript's native indexOf() method in that it returns -1 when it doesn't find a match. You can change the array values and array variable names as per your requirements. -
<script> var fruits = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"]; function removeDuplicates(data){ return data.filter((value, index) => data.indexOf(value) === index); } console.log(removeDuplicates(fruits)); </script>
You can use the filter method to remove duplicate values from the array in javascript. It creates a new array of elements which pass the condition we provide. -
<script> var fruits = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"]; function removeDuplicates(data){ return [...new Set(data)]; } console.log(removeDuplicates(fruits)); </script>
Set is a new object type that allows you to create a collection of unique values. It removes the duplicate items from the given data and returns the value in the form of javascript array. -
<script> var arr = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"]; function removeDuplicates(data){ let uniqueItemsArray = []; data.forEach(element => { if(!uniqueItemsArray.includes(element)) { uniqueItemsArray.push(element) } }); return uniqueItemsArray; } console.log(removeDuplicates(arr)); </script>
Javascript forEach() method can be used to remove duplicate items of an array in javascript. We can iterate over the elements in the array and push the element to the new defined array (uniqueItemsArray) if the element does not already exist in it using the push() method. -
<script> var arr = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"]; function removeDuplicates(data){ let uniqueItemsArray = data.reduce(function(a, b){ if(a.indexOf(b) < 0) a.push(b); return a; }, []); return uniqueItemsArray; } console.log(removeDuplicates(arr)); </script>
The reduce method is used to reduce the elements of the array and combine them into a final array based on some reducer function that you pass. -
<script> var arr = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"]; Array.prototype.unique = function() { var uniqueItemsArr = []; for( i = 0; i < this.length; i++){ var current = this[i]; if(uniqueItemsArr.indexOf(current) < 0) uniqueItemsArr.push(current); } return uniqueItemsArr; } console.log(arr.unique()) </script>
In Javascript the array prototype constructor allows you to add new properties and methods to the Array object. We can create a new method unique and call it by arr.unique() method and it returns an array with unique values. -
<script> var arr = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"]; Array.prototype.unique = function() { return Array.from(new Set(this)); } console.log(arr.unique()) </script>
You can use Set() object type in Array.prototype constructor to remove duplicate records from array. It automatically removes elements which already exist in it and it is much faster when you compare with the normal approach which is used for-loop to insert records into the array.
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
Don't forget to share this article! Help us spread the word by clicking the share button below.
We appreciate your support and are committed to providing you valuable and informative content.
We are thankful for your never ending support.
Random Code Snippet Queries: Javascript
- ReferenceError: Cannot access 'myFunction' before initialization
- How to crop multiple images with cropper js
- Remove property from object in javascript
- Ezsnippets (76) challenge - javascript - youtube shorts
- How to preview video before uploading in javascript
- Short-circuits conditionals
- How to fixed bootstrap navbar at top on scroll
- Multidimensional array example javascript
- Apex chart bar chart
- How to get the length of a number in JavaScript
- How to show and hide placeholder text
- Javascript to print Fibonacci series upto 15 Observations
- How to add key/value pair to existing form data
- Get hostname from URL in javascript
- How to check file is an image in javascript using filename
- Apex bar chart - fill bar color with gradient on hover
- Prism js horizontally overflowing its container
- Remove hostname from URL in javascript
- Uncaught TypeError: Cannot read property 'addEventListener' of undefined
- Get multiplication in javascript using array input
- How to make entire Div clickable in javascript
- Uncaught TypeError: Illegal invocation
- How to push string in an array in Javascript
- Uncaught TypeError: Assignment to constant variable
- How to display for slash as a string in javascript HTML