javascript中过滤二维对象数组重复的字段并只保留唯一值（array.filter与Array.from）

1.Array.filter过滤

在JavaScript中，你可以使用Array.filter()和Set数据结构来过滤二维对象数组中重复的字段，只保留唯一值。下面是一种可能的写法：

// 示例数据
const array = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'John' },
  { id: 4, name: 'Alice' },
  { id: 5, name: 'Jane' }
];

// 使用 Set 过滤数组
const uniqueArray = array.filter((obj, index, self) =>
  index === self.findIndex((o) => (
    o.name === obj.name
  ))
);

console.log(uniqueArray);

在上面的例子中，我们使用Array.filter()方法来遍历数组，并使用Array.findIndex()方法找到第一个与当前对象相同名称的对象的索引位置。如此一来，只会保留第一个出现的对象，而将后续重复的对象过滤掉，得到的uniqueArray就是只包含唯一值的数组。

输出结果如下：

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 4, name: 'Alice' }
]

注意：上述方法只会过滤相同字段（这里是name）的对象，在本例中并不会过滤相同的id字段。如果你希望根据多个字段进行过滤，可以在Array.findIndex()的回调函数中增加适当的条件判断。

array.filter()方法

array.filter()是一个数组方法，用于创建一个新数组，其中包含满足指定条件的所有元素。它接受一个回调函数作为参数，并在每个数组元素上调用该函数。回调函数需要返回一个布尔值来确定是否保留该元素。

array.filter()的语法如下：

array.filter(callback(element[, index, [array]])[, thisArg])

其中：

• callback：必需，表示用于测试每个元素的函数。
  • element：当前被处理的元素。
  • index（可选）：当前元素在数组中的索引。
  • array（可选）：调用filter方法的数组。
• thisArg（可选）：用来执行回调函数时的this值。

下面是一个简单的示例，演示如何使用array.filter()方法：

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

在上面的例子中，我们定义了一个回调函数(num) => num % 2 === 0，用于测试每个数字是否是偶数。array.filter()方法会遍历数组中的每个元素，并将回调函数应用于每个元素。仅当回调函数返回true时，相应的元素才会被保留在新数组evenNumbers中。

注意，array.filter()会返回满足条件的元素组成的新数组，原始数组不受影响。

2.Array.from过滤

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'John' },
  { id: 4, name: 'Kate' },
  { id: 5, name: 'Jane' }
];

// 使用Set和map进行去重
const uniqueArr = Array.from(new Set(arr.map(obj => obj.name))).map(name => {
  return arr.find(obj => obj.name === name);
});

console.log(uniqueArr);

Array.from方法

使用Array.from方法可以将类数组对象或可迭代对象转换为数组。它的语法如下：

Array.from(arrayLike[, mapFn[, thisArg]])

其中：

• arrayLike：要转换为数组的类数组对象或可迭代对象。
• mapFn（可选）：一个映射函数，可以对每个元素进行操作或转换。
• thisArg（可选）：可选地设置映射函数中的this值。

下面是一些示例，演示了不同情况下使用Array.from的写法：

1. 将类数组对象转换为数组：

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(arrayLike);

console.log(array); // ['a', 'b', 'c']

2. 对可迭代对象进行操作：

const iterable = 'hello';
const array = Array.from(iterable, char => char.toUpperCase());

console.log(array); // ['H', 'E', 'L', 'L', 'O']

3. 使用箭头函数设置this值：

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(
  arrayLike,
  function (element) {
    // this 指向 object
    return element.toUpperCase() + this.postfix;
  },
  { postfix: '!' }
);

console.log(array); // ['A!', 'B!', 'C!']

以上是Array.from的基本用法。你可以根据具体需求来调整mapFn和thisArg参数，以便对转换后的数组进行进一步的操作和处理。

---

@漏刻有时