
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
- Javascript to print Fibonacci series upto 15 Observations
- Get hostname from URL in javascript
- Prism js horizontally overflowing its container
- Remove property from object in javascript
- Uncaught TypeError: Assignment to constant variable
- How to display an image in Javascript onclick
- Uncaught TypeError: Cannot read property 'addEventListener' of undefined
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- How to get query string value in javascript
- Check if value exists in array javascript
- How to use JavaScript to search for items in a list
- Execute function with condition in javascript
- Trim the leading and trailing comma from string in Javascript
- Javascript set timeout function with example code
- JavaScript test() Method
- How to Set data to localstorage in javascript
- ReferenceError: Cannot access 'myFunction' before initialization
- Generate 6 digit random number in javascript
- How to get data from localstorage in javascript
- How to show and hide placeholder text
- Uncaught TypeError: $(...).summernote is not a function
- Input type file styling
- How to crop multiple images with cropper js
- Cropper js with multiple images
- How to validate empty space in textbox in Javascript