在 JavaScript 中按值对 Map 进行排序
按值对 Map 进行排序:
-
使用展开语法
(...)
获取 Map 条目的数组 -
在数组上调用
sort()
方法 -
将结果传递给
Map()
构造函数
// ✅ 当 VALUES 是 NUMBERS
const map2 = new Map([
['three', 3],
['one', 1],
['two', 2],
]);
// ✅ 按值升序排序(从低到高)
const sortNumAsc = new Map([...map2].sort((a, b) => a[1] - b[1]));
// 👇️ {'one' => 1, 'two' => 2, 'three' => 3}
console.log(sortNumAsc);
// ✅ 按值降序排序(从高到低)
const sortedNumDesc = new Map([...map2].sort((a, b) => b[1] - a[1]));
// 👇️ {'three' => 3, 'two' => 2, 'one' => 1}
console.log(sortedNumDesc);
// ✅ 当值是字符串时
const map1 = new Map([
['three', 'c'],
['one', 'a'],
['two', 'b'],
]);
// ✅ 按值升序排序(从低到高)
const sortedAsc = new Map([...map1].sort((a, b) => (a[1] > b[1] ? 1 : -1)));
// 👇️ {'one' => 'a', 'two' => 'b', 'three' => 'c'}
console.log(sortedAsc);
// ✅ 按值降序排序(从高到低)
const sortedDesc = new Map([...map1].sort((a, b) => (a[1] > b[1] ? -1 : 1)));
// 👇️ {'three' => 'c', 'two' => 'b', 'one' => 'a'}
console.log(sortedDesc);
该代码片段显示了如何按值对字符串和数字值按升序和降序对 Map 进行排序。
Map 对象会记住键的插入顺序。
这就是我们使用 Map() 构造函数以正确顺序创建新 Map 的原因。
扩展语法 (...)
允许我们获取包含 Map 条目的数组。
const map2 = new Map([
['three', 3],
['one', 1],
['two', 2],
]);
// 👇️ [['three', 3], ['one', 1], ['two', 2]]
console.log([...map2]);
下一步是调用数组的 sort()
方法,并传递给它一个函数。
我们传递给 sort()
方法的函数定义了排序顺序。
该函数使用 2 个参数调用。 在我们的示例中 - 2 个包含键值对的数组。
/ ✅ 当 VALUES 是 NUMBERS
const map2 = new Map([
['three', 3],
['one', 1],
['two', 2],
]);
// ✅ 按值升序排序(从低到高)
const sortNumAsc = new Map([...map2].sort((a, b) => a[1] - b[1]));
// 👇️ {'one' => 1, 'two' => 2, 'three' => 3}
console.log(sortNumAsc);
sort() 方法使用以下逻辑对数组中的元素进行排序:
- 如果比较函数的返回值大于0,则将b排在a之前。
- 如果比较函数的返回值小于0,则将a排在b之前。
- 如果比较函数的返回值等于 0,则保持 a 和 b 的原始顺序。
在上面的代码片段中:
- 如果 a 数组中的第二个元素(值)减去 b 数组中的第二个元素返回的值大于 0,我们将 b 排在 a 之前
- 如果减法返回负数,我们将 a 排序在 b 之前。
- 如果减法返回 0,我们保持 a 和 b 的原始顺序。
如果需要按值降序对 Map 进行降序排序,只需将 b 的值减去 a 的值即可。
// ✅ 当 VALUES 是 NUMBERS
const map2 = new Map([
['three', 3],
['one', 1],
['two', 2],
]);
// ✅ 按值降序排序(从高到低)
const sortedNumDesc = new Map([...map2].sort((a, b) => b[1] - a[1]));
// 👇️ {'three' => 3, 'two' => 2, 'one' => 1}
console.log(sortedNumDesc);
我们使用相同的方法按字符串值对 Map 进行排序。
// ✅ 当 VALUES 是 字符串
const map1 = new Map([
['three', 'c'],
['one', 'a'],
['two', 'b'],
]);
// ✅ 按值升序排序(从低到高)
const sortedAsc = new Map([...map1].sort((a, b) => (a[1] > b[1] ? 1 : -1)));
// 👇️ {'one' => 'a', 'two' => 'b', 'three' => 'c'}
console.log(sortedAsc);
这次我们检查 a 数组中值的 UTF-16 编码单元值是否大于 b 数组中的值,如果大于则返回 1,否则返回 -1。
如果我们返回 1(大于 0),那么我们将 b 排序在 a 之前。
我们可以通过更改 1 和 -1 的位置来将排序更改为降序。
// ✅ 当 VALUES 是 字符串
const map1 = new Map([
['three', 'c'],
['one', 'a'],
['two', 'b'],
]);
// ✅ 按值降序排序(从高到低)
const sortedDesc = new Map([...map1].sort((a, b) => (a[1] > b[1] ? -1 : 1)));
// 👇️ {'three' => 'c', 'two' => 'b', 'one' => 'a'}
console.log(sortedDesc);
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间:2024/03/23 浏览次数:86 分类:JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组,以及如何删除任何重复的数组。