使用map和filter来处理具有相同值的项目

Question

在下面的例子中，我有一个对象数组，其中包含有关电影的一些基本信息 - 电影名称和个人评级。

然后我返回重复值（使用map和filter）返回新数组，然后我可以计算新数组中的项数。

let films = [{
    "name": "film 1",
    "rating": "5",
}, {
    "name": "film 2",
    "rating": "1",
}, {
    "name": "film 3",
    "rating": "2",
}, {
    "name": "film 4",
    "rating": "2",
}, {
    "name": "film 5",
    "rating": "5",
}, {
    "name": "film 6",
    "rating": "4",
}];

let ratingsArray = films.map((element, i) => {
    return element.rating;
})
let arr0 = ratingsArray.filter((rating) => {
    return rating == 0;
})
let arr1 = ratingsArray.filter((rating) => {
    return rating == 1;
})
let arr2 = ratingsArray.filter((rating) => {
    return rating == 2;
})
let arr3 = ratingsArray.filter((rating) => {
    return rating == 3;
})
let arr4 = ratingsArray.filter((rating) => {
    return rating == 4;
})
let arr5 = ratingsArray.filter((rating) => {
    return rating == 5;
});

console.log(arr0);
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);

这确实有效，但它似乎是编写此代码的一种非常重复的方式。

任何人都可以建议我做得更好吗？

Answer 1

您可以通过评级获取对象并对对象进行分组。

var films = [{ name: "film 1", rating: "5", }, { name: "film 2", rating: "1", }, { name: "film 3", rating: "2", }, { name: "film 4", rating: "2", }, { name: "film 5", rating: "5", }, { name: "film 6", rating: "4", }],
    ratings = Object.create(null);

films.forEach(o => (ratings[o.rating] = ratings[o.rating] || []).push(o));

console.log(ratings);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

您可以编写一个可以在filter中用作回调的函数。它与lodash的pluck方法的工作方式类似。当pluck迭代数组中的元素时，filter接受一个属性键和值并返回一个用作回调函数的闭包。

let films = [
  { "name": "film 1", "rating": "5" }, 
  { "name": "film 2", "rating": "1" }, 
  { "name": "film 3", "rating": "2" },
  { "name": "film 4", "rating": "2" },
  { "name": "film 5", "rating": "5" },
  { "name": "film 6", "rating": "4" }
];

function pluck(key, value) {
  return function (el) {
    return el[key] === value;
  }
}

const rating4 = films.filter(pluck('rating', '2'));
console.log(rating4);

然后，您可以根据需要使用此选项，例如，是否要循环使用一组评级并将该信息存储在对象中，但这完全取决于您。您不仅可以在此数据集上使用此功能，还可以在需要提取此类数据的所有集合中使用此功能。

let characters = [{
    "name": "Batman",
    "age": 62
}, {
    "name": "Supergirl",
    "age": 27
}, {
    "name": "Tarzan",
    "age": 102
}];

function pluck(key, value) {
  return function (el) {
    return el[key] === value;
  }
}

const tarzan = characters.filter(pluck('age', 102));
console.log(tarzan);

有一件事：你可能会因为整数而不是字符串而受益。有一点需要考虑前进。

Answer 3

您需要通过评级对影片进行分组，您可以使用对象和数组进行存储。见下面的例子：

let films = [{
    "name": "film 1",
    "rating": "5",
}, {
    "name": "film 2",
    "rating": "1",
}, {
    "name": "film 3",
    "rating": "2",
}, {
    "name": "film 4",
    "rating": "2",
}, {
    "name": "film 5",
    "rating": "5",
}, {
    "name": "film 6",
    "rating": "4",
}];
var filmsByRating = {};
//group films by rating
films.forEach((film) => {
   if(!filmsByRating[film.rating])
      filmsByRating[film.rating] = [];
   filmsByRating[film.rating].push(film);
});
//print ratings and films
for(var i in filmsByRating){
  console.log("Rating:", i);
  console.log(filmsByRating[i]);
}

Answer 4

我将结合其他答案和建议中的概念，并使用Array生成reduce。将评级放入Array而不是Object的一些优点包括您将能够执行有用的Array方法，例如reverse或（custom）sort，例如也许你想按照与它相关的影片最多的评分来排序。

var films = [
    { name: "film 1", rating: "5", }, 
    { name: "film 2", rating: "1", }, 
    { name: "film 3", rating: "2", }, 
    { name: "film 4", rating: "2", }, 
    { name: "film 5", rating: "5", }, 
    { name: "film 6", rating: "4", }
];

var ratings = films.reduce(function(result, film) {
    var rating = parseInt(film.rating, 10);
    var ratedFilms = result[rating] || [];
    ratedFilms.push(film);
    result[rating] = ratedFilms;
    return result;
}, []);

ratings.forEach(function(rating, i) {
    console.log(i + ": " + JSON.stringify(rating));
});

结果：

1: [{"name":"film 2","rating":"1"}]
2: [{"name":"film 3","rating":"2"},{"name":"film 4","rating":"2"}]
4: [{"name":"film 6","rating":"4"}]
5: [{"name":"film 1","rating":"5"},{"name":"film 5","rating":"5"}]