本文旨在讲解如何在JavaScript中对一个数组进行排序，并保持与其关联数组的同步关系。通过“zip”和“unzip”的操作，确保排序后的数组能够正确反映原始数组之间的对应关系，避免数据错乱。
在JavaScript中，有时我们需要对一个数组进行排序，但同时需要保持另一个数组与排序数组的对应关系。例如，一个数组存储的是价格，另一个数组存储的是对应的商品名称。如果只对价格数组排序，商品名称数组就会错乱。本文介绍一种通过“zip”和“unzip”操作，实现关联数组同步排序的方法。
实现原理
核心思想是将两个数组“压缩”成一个二维数组，其中每一行代表两个数组中对应位置的元素。然后，对这个二维数组按照第一个元素（即需要排序的数组）进行排序。最后，再将排序后的二维数组“解压”回两个独立的数组。
立即学习“Java免费学习笔记（深入）”；
具体步骤
假设我们有以下两个数组：
let prices = [98, 10, 6, 54, 32, 20, 30, 40]; let items = ["A", "B", "C", "D", "E", "F", "G", "H"];
我们的目标是对 prices 数组进行排序，并保持 items 数组与排序后的 prices 数组的对应关系。
1. “压缩”数组 (Zip)
使用 map 方法将两个数组“压缩”成一个二维数组：
支持模板化设计，基于标签调用数据 支持N国语言，并能根据客户端自动识别当前语言 支持扩展现有的分类类型，并可修改当前主要分类的字段 支持静态化和伪静态 会员管理功能，询价、订单、收藏、短消息功能 基于组的管理员权限设置 支持在线新建、修改、删除模板 支持在线管理上传文件 使用最新的CKEditor作为后台可视化编辑器 支持无限级分类及分类的移动、合并、排序 专题管理、自定义模块管理 支持缩略图和图
function zip(arr1, arr2) {
return arr1.map((item, index) => [item, arr2[index]]);
}
const zippedArray = zip(prices, items);
console.log(zippedArray);
// Output:
// [
// [98, "A"],
// [10, "B"],
// [6, "C"],
// [54, "D"],
// [32, "E"],
// [20, "F"],
// [30, "G"],
// [40, "H"]
// ]2. 排序“压缩”后的数组
使用 sort 方法对 zippedArray 进行排序，按照第一个元素（价格）从小到大排序：
zippedArray.sort((a, b) => a[0] - b[0]); console.log(zippedArray); // Output: // [ // [6, "C"], // [10, "B"], // [20, "F"], // [30, "G"], // [32, "E"], // [40, "H"], // [54, "D"], // [98, "A"] // ]
3. “解压”数组 (Unzip)
使用 map 方法将排序后的 zippedArray “解压”回两个独立的数组：
function unzip(arr) {
const arr1 = arr.map(item => item[0]);
const arr2 = arr.map(item => item[1]);
return [arr1, arr2];
}
const [sortedPrices, sortedItems] = unzip(zippedArray);
console.log("Sorted Prices:", sortedPrices); // Output: Sorted Prices: [6, 10, 20, 30, 32, 40, 54, 98]
console.log("Sorted Items:", sortedItems); // Output: Sorted Items: [ 'C', 'B', 'F', 'G', 'E', 'H', 'D', 'A' ]现在，sortedPrices 数组是排序后的价格数组，sortedItems 数组是与排序后的价格数组对应的商品名称数组。
完整代码示例
function zip(arr1, arr2) {
return arr1.map((item, index) => [item, arr2[index]]);
}
function unzip(arr) {
const arr1 = arr.map(item => item[0]);
const arr2 = arr.map(item => item[1]);
return [arr1, arr2];
}
let prices = [98, 10, 6, 54, 32, 20, 30, 40];
let items = ["A", "B", "C", "D", "E", "F", "G", "H"];
const zippedArray = zip(prices, items);
zippedArray.sort((a, b) => a[0] - b[0]);
const [sortedPrices, sortedItems] = unzip(zippedArray);
console.log("Sorted Prices:", sortedPrices);
console.log("Sorted Items:", sortedItems);注意事项
- 确保两个数组的长度一致，否则 zip 和 unzip 函数可能会产生意料之外的结果。
- 这种方法适用于需要保持多个数组之间对应关系的排序场景。
- 如果需要按照降序排序，只需要修改 sort 方法中的比较函数即可 (a, b) => b[0] - a[0]。
总结
通过“zip”和“unzip”操作，我们可以方便地在JavaScript中对一个数组进行排序，并保持与其关联数组的同步关系。这种方法简洁高效，适用于各种需要保持数组对应关系的排序场景。 这种方法的核心在于将多个数组视为一个整体，进行排序，再将排序后的整体拆分回单独的数组，从而保证了关联关系的正确性。
