本文旨在讲解如何在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 方法将两个数组“压缩”成一个二维数组：
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中对一个数组进行排序，并保持与其关联数组的同步关系。这种方法简洁高效，适用于各种需要保持数组对应关系的排序场景。 这种方法的核心在于将多个数组视为一个整体，进行排序，再将排序后的整体拆分回单独的数组，从而保证了关联关系的正确性。