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