从对象数组中获取唯一值 JavaScript

在 JavaScript 中，我们经常需要从一个对象数组中获取唯一的值。通常，我们需要根据特定的属性来判断对象是否唯一，比如说根据 ID 或者名称。

下面是一些实现方法，每一种方法都有自己的优点和缺点，可以根据具体需求选择合适的方法。

方法一：使用 Set，ES6 新特性

ES6 新增了 Set，它是一种无序且唯一的数据结构。我们可以利用 Set 来实现从对象数组中获取唯一值。

const fruits = [
  { id: 1, name: 'apple' },
  { id: 2, name: 'banana' },
  { id: 3, name: 'apple' },
  { id: 4, name: 'orange' }
];

const uniqueFruits = Array.from(new Set(fruits.map(fruit => fruit.name)));

console.log(uniqueFruits); // ["apple", "banana", "orange"]

map 方法可以将原数组中的每一个元素转换成一个新的数组，这里我们将每个元素的 name 属性提取出来。然后，我们通过 new Set 创建一个唯一值的集合，再通过 Array.from 将集合转换成数组。最终得到了一个只包含唯一值的新数组。

利用 Set 的优点是代码简洁易懂，缺点是只能处理基本类型或者能够转化为字符串的对象。

方法二：使用 reduce 实现自定义的过滤器

我们也可以自定义一个过滤器，利用 reduce 方法来寻找唯一值。

const fruits = [
  { id: 1, name: 'apple' },
  { id: 2, name: 'banana' },
  { id: 3, name: 'apple' },
  { id: 4, name: 'orange' }
];

const uniqueFruits = fruits.reduce((accumulator, currentValue) => {
  if (!accumulator.find(fruit => fruit.name === currentValue.name)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

console.log(uniqueFruits); // [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 4, name: 'orange' }]

reduce 方法可以将数组中的每一个元素转换为一个值，这里第二个参数是初始值为一个空数组。我们利用自定义的过滤器在找到唯一的值时将其添加到新数组中，最终得到了一个只包含唯一值的新数组。

利用 reduce 的优点是可以实现较复杂的逻辑判断，缺点是代码较为冗长。

方法三：使用 filter 和 indexOf 实现过滤

利用 filter 和 indexOf 组合也可以实现从对象数组中获取唯一值。

const fruits = [
  { id: 1, name: 'apple' },
  { id: 2, name: 'banana' },
  { id: 3, name: 'apple' },
  { id: 4, name: 'orange' }
];

const uniqueFruits = fruits.filter((fruit, index, array) => array.findIndex(t => t.name === fruit.name) === index);

console.log(uniqueFruits); // [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 4, name: 'orange' }]

filter 方法会返回一个新的数组，我们利用 findIndex 方法来查找在数组中当前元素第一次出现的位置。如果当前元素第一次出现的位置和当前位置相等，那么就说明这是一个唯一值。最终得到了一个只包含唯一值的新数组。

利用 filter 和 indexOf 的优点是代码简单易懂，缺点是可能不够高效。

以上就是几种从对象数组中获取唯一值的方法了。对于不同的需求，我们可以选择不同的方法进行实现。