本文档旨在解决在 React 应用中，如何根据两个独立数组中的数据计算结果对数据进行排序的问题。通过合并数据或使用映射对象，可以实现在排序时访问两个数组的信息，从而实现复杂的排序逻辑。本文将提供详细的代码示例和步骤，帮助开发者理解和应用这些方法。
在 React 应用中，经常会遇到需要根据多个数据源进行排序的场景。例如，一个数据源包含电影的 IMDb 评分，另一个数据源包含用户的个人评分，需要根据 myRating - imdbAvgRating 的结果对电影列表进行排序。由于数据分散在不同的数组中，直接使用 Array.sort() 比较困难。本文将介绍两种解决方案：合并数据和使用映射对象。
方法一：合并数据
最直接的方法是将两个数组合并成一个数组，其中每个元素包含所有需要的数据。这可以通过创建一个新的数组，并将两个数组中具有相同标识符（例如，电影 ID）的对象合并来实现。
步骤：
- 创建映射对象： 首先，将其中一个数组（例如，filmReviewsLocaldata）转换为一个以 ID 为键的映射对象。这可以使用 Array.reduce() 方法高效地完成。
- 合并数据： 然后，遍历另一个数组（例如，filmReviewsWebdata），并使用映射对象查找匹配的元素。将两个对象合并成一个新对象，并添加到结果数组中。
示例代码：
const filmReviewsWebdata = [{
id: 123,
imdbAvgRating: 5
},
{
id: 234,
imdbAvgRating: 4
},
{
id: 456,
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] }));
console.log(combined);注意事项：
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
- 确保两个数组具有相同的标识符，并且该标识符是唯一的。
- 如果某个 ID 在一个数组中存在，但在另一个数组中不存在，则合并后的对象将只包含存在的数据。 可以根据需求添加默认值或进行错误处理。
方法二：使用映射对象进行排序
如果不想合并数据，可以直接在排序函数中使用映射对象来访问另一个数组的数据。
步骤：
- 创建映射对象： 与方法一相同，首先创建一个以 ID 为键的映射对象。
- 排序： 使用 Array.sort() 方法对数组进行排序。在排序函数中，使用当前元素的 ID 从映射对象中查找匹配的元素，并使用其数据进行计算。
示例代码：
const filmReviewsWebdata = [{
id: 123,
imdbAvgRating: 5
},
{
id: 234,
imdbAvgRating: 4
},
{
id: 456,
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 = a.imdbAvgRating - (mappedById[a.id]?.myRating || 0); // 使用 optional chaining 避免 undefined
const ratingB = b.imdbAvgRating - (mappedById[b.id]?.myRating || 0);
return ratingA - ratingB;
});
console.log(sortedData);注意事项：
- 使用 optional chaining (?.) 来安全地访问映射对象中的属性，以避免当 ID 不存在时出现 undefined 错误。
- 如果某个 ID 在映射对象中不存在，可以提供默认值，例如 0。
总结
本文介绍了两种在 React 应用中，根据两个独立数组中的数据计算结果对数据进行排序的方法。合并数据的方法简单直接，但可能会增加内存消耗。使用映射对象的方法可以避免合并数据，但需要在排序函数中查找数据。选择哪种方法取决于具体的应用场景和性能需求。在实际开发中，可以根据数据量、更新频率和代码可读性等因素进行权衡。
