JavaScript自定义数组排序：保持关联数组的同步-js教程-PHP中文网

JavaScript自定义数组排序：保持关联数组的同步

心靈之曲

发布： 2025-10-24 09:37:00

原创

980人浏览过

javascript自定义数组排序：保持关联数组的同步

本文旨在讲解如何在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. 排序“压缩”后的数组

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

使用 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);

登录后复制

注意事项