Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to compare two arrays when the key is a string - JavaScript
Comparing two arrays in JavaScript can be tricky when the key is a string. String comparisons are case-sensitive and require special handling to ensure proper results.
Fortunately, there are several methods you can use to compare two arrays when the key is a string in JavaScript. In this article, we'll discuss how to effectively compare two arrays with strings as keys using various approaches such as map(), includes(), intersection logic, and filter().
Strings in JavaScript are used to store and modify text. A string in JavaScript is defined as zero or more characters enclosed in quotations. Data that can be represented as text can be stored in strings.
Using map() and includes()
The map() method creates a new array with the results of calling a provided function on every element in an array. Combined with includes(), which checks if an array contains a specific element, we can find common elements between arrays.
Syntax
array.map(function(currentValue, index, arr), thisValue) string.includes(searchValue, start)
Example: Finding Common String Values
<!DOCTYPE html>
<html>
<body>
<script>
const arr1 = [
{ "car": "Bmw"},
{ "car": "BENZ"},
{ "car": "Audi"},
{ "car": "Jaguar"}
];
const arr2 = [
{ "car": "Audi"},
{ "car": "City"},
{ "car": "Jaguar"},
{ "car": "Verna"}
];
const extractValue = ({ 'car': car }) => car;
const duplicateValues = arr1
.map(extractValue)
.filter(x => arr2
.map(extractValue)
.includes(x)
);
document.write(JSON.stringify(duplicateValues));
</script>
</body>
</html>
["Audi","Jaguar"]
Using Custom Intersection Function
This approach optimizes performance by using the shorter array for lookup, making the comparison more efficient for large datasets.
Example: Intersection with Performance Optimization
<!DOCTYPE html>
<html>
<body>
<script>
const first = [
{ "bike": "Rx100"},
{ "bike": "R15"},
{ "bike": "Revolt"},
{ "bike": "Duke"}
];
const second = [
{ "bike": "Deluxe"},
{ "bike": "Rx100"},
{ "bike": "Splendor"}
];
const intersection = (longer, shorter, key) => {
let tmp;
if (shorter.length > longer.length) {
tmp = shorter, shorter = longer, longer = tmp;
}
const vals = shorter.map(entry => entry[key]);
return longer.filter(entry => vals.find(v => v === entry[key]));
};
const key = 'bike';
const third = intersection(first, second, key);
document.write(JSON.stringify(third.flatMap(Object.values)));
</script>
</body>
</html>
["Rx100"]
Using Array.filter with JSON Comparison
This method converts objects to JSON strings for exact matching, useful when you need to compare entire objects rather than just specific properties.
Example: Exact Object Matching
<!DOCTYPE html>
<html>
<body>
<script>
const array1 = [
{ "movie": "Balu"},
{ "movie": "Gabbar"},
{ "movie": "Bheem"}
];
const array2 = [
{ "movie": "Jalsa"},
{ "movie": "Balu"}
];
const array2String = JSON.stringify(array2);
const duplicates = array1.filter(x => array2String.includes(JSON.stringify(x)));
document.write(JSON.stringify(duplicates));
</script>
</body>
</html>
[{"movie":"Balu"}]
Comparison of Methods
| Method | Performance | Use Case |
|---|---|---|
| map() + includes() | Good for small arrays | Comparing specific properties |
| Custom intersection | Optimized for large arrays | When performance matters |
| JSON comparison | Slower but precise | Exact object matching |
Conclusion
Choose the appropriate method based on your specific needs: use map() + includes() for simple property comparisons, custom intersection for performance optimization, and JSON comparison for exact object matching. Each approach has its strengths depending on the use case and data size.
2K+ Views
