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
的写法:
- 将类数组对象转换为数组:
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 }; const array = Array.from(arrayLike); console.log(array); // ['a', 'b', 'c']
- 对可迭代对象进行操作:
const iterable = 'hello'; const array = Array.from(iterable, char => char.toUpperCase()); console.log(array); // ['H', 'E', 'L', 'L', 'O']
- 使用箭头函数设置
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
参数,以便对转换后的数组进行进一步的操作和处理。
@漏刻有时