
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
- Execute function with condition in javascript
- ReferenceError: Cannot access 'myFunction' before initialization
- How to open modal after redirect
- How to get file extension using javascript/jquery
- Cropper js with multiple images
- On click enter redirect to another URL with parameters in javascript
- How to validate input type file size in javascript
- JavaScript test() Method
- How to check caps lock is on in javascript
- How to crop multiple images with cropper js
- How to validate empty space in textbox in Javascript
- How to Set data to localstorage in javascript
- Remove property from object in javascript
- How can I add a key/value pair to a JavaScript object
- How to use JavaScript to search for items in a list
- Check if value exists in array javascript
- Javascript get only 10 characters from string
- How to push string in an array in Javascript
- Json stringify
- Javascript set timeout function with example code
- How to get query string value in javascript
- How to echo array in Javascript
- How to preview a word document in HTML using javascript
- Multidimensional array example javascript
- Copy one array to another in javascript