语法

Question

我知道如何分别做这两种事情，但是我确信必须有一种将它们结合起来的方法。

我有一组类别，这些类别是我从一组对象中提取的：

 this.videoCategories = this.videos.map(v => v.category);

但是，此数组中当然有重复项。所以现在我要做

this.uniqueVideoCategories = this.videoCategories.filter((item, index) => {
  return this.videoCategories.indexOf(item) === index;
});

哪一个工作得很好，我得到了一个没有重复的类别列表。但是我试图通过将它们串在一起来学习和弄清代码，但这不起作用-产生空数组

  constructor(private videoService: VideoService) {
    this.videos = videoService.getVideos();
    this.videoCategories = this.videos
      .map(v => v.category)
      .filter((item, index) => {
        return this.videoCategories.indexOf(item) === index;
      });
    console.log(this.videoCategories);
  }

Answer 1

在filter()内，您正在检查对象数组内的索引。您可以使用filter()方法的第三个参数，它是map()

之后的新创建的数组。

 constructor(private videoService: VideoService) {
    this.videos = videoService.getVideos();
    this.videoCategories = this.videos
      .map(v => v.category)
      .filter((item, index, arr) => {
        return arr.indexOf(item) === index;
      });
    console.log(this.videoCategories);
  }

您可以使用filter()来删除重复项，而不必使用indexOf()和Set。这就是时间复杂度O(N)

constructor(private videoService: VideoService) {
    this.videos = videoService.getVideos();
    this.videoCategories = [...new Set(this.videos.map(v => v.category))]
    console.log(this.videoCategories);
  }

Answer 2

var videos = [
  { category: 'category1', title: 'Category 1'},
  { category: 'category1', title: 'Category 1'},
  { category: 'category1', title: 'Category 1'},
  { category: 'category2', title: 'Category 2'},
  { category: 'category2', title: 'Category 2'}
];
var categoryVideos =
  videos
    .map(v => v.category)
    .filter((item, index, arr) => arr.indexOf(item) === index);
    
console.log(categoryVideos);

Array.prototype.filter

语法

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数

回调

函数是谓词，用于测试数组的每个元素。返回true保留元素，否则返回false。它接受三个参数：

element ：数组中正在处理的当前元素。
index ：（可选）数组中正在处理的当前元素的索引。
array ：（可选）调用了数组过滤器。
thisArg ：（可选）执行回调时用作此值。

返回值

具有通过测试的元素的新数组。如果没有任何元素通过测试，则将返回一个空数组。

Answer 3

有时解决方案是选择正确的数据结构。 ES6引入了Set，它仅包含唯一的对象。

那你就做：

this.videoCategories = new Set(this.videos.map(v => v.category))

唯一性将由浏览器实现处理，而不会使代码库混乱。

Answer 4

数组为空，因为当您过滤数组return this.videoCategories.indexOf(item) === index;时，字段this.videoCategories为空。

尝试一下：

this.videoCategories = this.videos
    .map(v => v.category)
    .filter((item, index, array) => {
        return array.indexOf(item) === index;
    });

JavaScript映射然后过滤唯一的数组项

4 个答案:

语法

参数

返回值