How to Efficiently Retrieve Unique Values from an Array of Objects in JavaScript?

Retrieving Distinct Values from Arrays of Objects in JavaScript

Optimal Approach

To efficiently retrieve unique values from an array of objects, a combination of the spread operator and Set data structure can be employed. In ES6 and later versions of JavaScript, the following approach is highly recommended:

const data = [
  { name: "Joe", age: 17 },
  { name: "Bob", age: 17 },
  { name: "Carl", age: 35 }
];

const distinctAges = [...new Set(data.map(item => item.age))];

console.log(distinctAges); // [17, 35]

This approach utilizes the power of Set to remove duplicate values, and the spread operator to create a new array from the unique values. The map function iterates over the array, extracting only the age property values for further processing.

Alternative Data Structure

If structuring the data as an array of objects with unique keys is preferred, a Map data structure can be utilized:

const data = new Map([
  ["1", { name: "Joe", age: 17 }],
  ["2", { name: "Bob", age: 17 }],
  ["3", { name: "Carl", age: 35 }]
]);

const distinctAges = [...data.values()].map(item => item.age);

console.log(distinctAges); // [17, 35]

In this scenario, the data variable is a Map with unique keys (e.g., "1", "2", "3") and corresponding object values. To retrieve the distinct ages, the values property is used to create an array of values, which are then mapped to extract only the age property values.

Avoidance of Inefficient Iteration

By leveraging the Set data structure or the Map data structure as described above, it becomes unnecessary to iterate through each array element and check for existing values. These data structures natively handle uniqueness, providing a more efficient solution without the need for cumbersome iteration.

The above is the detailed content of How to Efficiently Retrieve Unique Values from an Array of Objects in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!