React双数组排序技巧详解

还在为React应用中复杂的数据排序烦恼吗？本教程针对**React双数组计算排序**问题，提供详细解决方案。当需要基于两个独立数组（例如用户评分和IMDB评分）进行计算并排序时，如何高效实现？本文深入探讨两种实用方法：**合并数据**与**引用映射对象**，并提供清晰的代码示例。无论你是React新手还是经验丰富的开发者，都能通过本教程掌握基于多数据源进行灵活排序的关键技巧，提升React应用的数据处理能力。立即阅读，解决你的React排序难题！

本文旨在解决 React 应用中，如何基于两个独立数组中的数据进行计算，并根据计算结果对数据进行排序的问题。通过将两个数据集根据唯一标识符进行合并，或在排序过程中引用映射对象，实现高效且灵活的排序功能。文章提供了详细的代码示例和步骤说明，帮助开发者理解和应用该技术。

在 React 开发中，经常会遇到需要根据多个数据源进行计算并排序的需求。例如，一个电影评论网站，需要根据用户的评分和 IMDB 的平均评分之差进行排序。由于用户评分和 IMDB 评分可能来自不同的 API 或数据源，因此需要一种有效的方法来合并这些数据并进行排序。本文将介绍两种常用的方法来实现这一目标。

方法一：合并数据

最直接的方法是将两个数据集合并成一个数据集，然后再进行排序。这种方法适用于数据量不是特别大的情况，可以简化排序逻辑。

步骤 1：创建数据映射

首先，根据唯一标识符（例如，电影 ID）将 filmReviewsLocaldata 转换为一个映射对象，以便快速查找。

const filmReviewsLocaldata = [
  {
    id: 123,
    myRating: 5
  },
  {
    id: 234,
    myRating: 4
  },
];

const mappedById = filmReviewsLocaldata.reduce((acc, film) => {
  acc[film.id] = film;
  return acc;
}, {});

这段代码使用 reduce 方法将 filmReviewsLocaldata 数组转换为一个对象 mappedById，其中 key 是电影 ID，value 是对应的电影数据。

步骤 2：合并数据

然后，使用 map 方法将 filmReviewsWebdata 中的每个对象与 mappedById 中对应的数据合并。

const filmReviewsWebdata = [{
    id: 123,
    imdbAvgRating: 5
  },
  {
    id: 234,
    imdbAvgRating: 4
  },
];

const combined = filmReviewsWebdata.map( film => ({...film, ...mappedById[film.id] }));

console.log(combined);

这段代码使用 map 方法遍历 filmReviewsWebdata 数组，并使用扩展运算符 (...) 将每个电影对象与 mappedById 中对应的数据合并成一个新的对象。如果 filmReviewsWebdata 中的电影 ID 在 mappedById 中不存在，则合并后的对象将只包含 filmReviewsWebdata 中的数据。

步骤 3：排序

最后，使用 sort 方法根据计算结果对合并后的数据进行排序。

const sortedData = combined.sort((a, b) => (b.myRating - b.imdbAvgRating) - (a.myRating - a.imdbAvgRating));

这段代码使用 sort 方法对 combined 数组进行排序，排序的依据是 myRating - imdbAvgRating 的差值。b - a 的排序方式表示降序排列。

完整代码示例：

const filmReviewsWebdata = [{
    id: 123,
    imdbAvgRating: 5
  },
  {
    id: 234,
    imdbAvgRating: 4
  },
];

const filmReviewsLocaldata = [
  {
    id: 123,
    myRating: 5
  },
  {
    id: 234,
    myRating: 4
  },
];

const mappedById = filmReviewsLocaldata.reduce((acc, film) => {
  acc[film.id] = film;
  return acc;
}, {});

const combined = filmReviewsWebdata.map( film => ({...film, ...mappedById[film.id] }));

const sortedData = combined.sort((a, b) => (b.myRating - b.imdbAvgRating) - (a.myRating - a.imdbAvgRating));

console.log(sortedData);

方法二：引用映射对象进行排序

如果不希望合并数据，也可以在排序过程中引用映射对象。这种方法适用于数据量较大，合并数据可能导致性能问题的情况。

步骤 1：创建数据映射（同方法一）

步骤 2：排序时引用映射对象

在 sort 方法中，使用电影 ID 从 mappedById 中获取 myRating，然后进行计算。

const filmReviewsWebdata = [{
    id: 123,
    imdbAvgRating: 5
  },
  {
    id: 234,
    imdbAvgRating: 4
  },
];

const filmReviewsLocaldata = [
  {
    id: 123,
    myRating: 5
  },
  {
    id: 234,
    myRating: 4
  },
];

const mappedById = filmReviewsLocaldata.reduce((acc, film) => {
  acc[film.id] = film;
  return acc;
}, {});

const sortedData = filmReviewsWebdata.sort((a, b) => {
  const ratingA = mappedById[a.id]?.myRating || 0; // 默认值为0，防止找不到数据
  const ratingB = mappedById[b.id]?.myRating || 0; // 默认值为0，防止找不到数据
  return (ratingB - b.imdbAvgRating) - (ratingA - a.imdbAvgRating);
});

console.log(sortedData);

这段代码在 sort 方法中使用 mappedById[a.id]?.myRating 来获取 myRating，如果 mappedById 中不存在对应的电影 ID，则使用默认值 0。使用可选链式操作符 ?. 可以避免因 mappedById[a.id] 为 undefined 导致的错误。

注意事项

• 确保两个数据集有唯一的标识符，用于关联数据。
• 如果数据量很大，建议使用第二种方法，避免合并数据带来的性能问题。
• 在排序时，要处理可能存在的数据缺失情况，例如，mappedById 中可能不存在对应的电影 ID。

总结

本文介绍了两种在 React 应用中基于两个数组数据计算结果进行排序的方法：合并数据和引用映射对象。开发者可以根据实际情况选择合适的方法。合并数据的方法简单直观，适用于数据量较小的情况；引用映射对象的方法性能更好，适用于数据量较大的情况。无论选择哪种方法，都需要注意处理数据缺失的情况，以保证排序的正确性。

今天关于《React双数组排序技巧详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！