迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

使用 JavaScript 对 Map 中的键进行排序

作者:迹忆客 最近更新:2023/01/08 浏览次数:

使用 sort() 方法对 Map 中的键进行排序,例如

const sorted = new Map([...map1].sort())。 

(...) 是用于获取 Map 元素的数组,我们可以使用 sort 方法对其进行排序。看下面的例子

const map1 = new Map([
  ['z', 'three'],
  ['a', 'one'],
  ['b', 'two'],
]);

//  {'z' => 'three', 'a' => 'one', 'b' => 'two'}
console.log(map1);

// 升序
const sortedAsc = new Map([...map1].sort());

// {'a' => 'one', 'b' => 'two', 'z' => 'three'}
console.log(sortedAsc);

运行示例

上面代码运行结果如下

Map(3) { 'z' => 'three', 'a' => 'one', 'b' => 'two' }
Map(3) { 'a' => 'one', 'b' => 'two', 'z' => 'three' }
Map(3) { 'z' => 'three', 'b' => 'two', 'a' => 'one' }
Map(3) { 1 => 'one', 2 => 'two', 3 => 'three' }
Map(3) { 3 => 'three', 2 => 'two', 1 => 'one' }

Map 对象会记住键的插入顺序。

这就是我们使用 Map() 构造函数以正确顺序创建新 Map 的原因。

扩展语法 (...) 允许我们获取包含 Map 元素的数组。

const map1 = new Map([
  ['z', 'three'],
  ['a', 'one'],
  ['b', 'two'],
]);

// [['z', 'three'], ['a', 'one'], ['b', 'two']]
console.log([...map1]);

当使用字符串键对 Map 进行排序时,我们只需要调用 sort() 方法。

const map1 = new Map([
  ['z', 'three'],
  ['a', 'one'],
  ['b', 'two'],
]);

// [['a', 'one'], ['b', 'two'], ['z', 'three']]
console.log([...map1].sort());

这为我们提供了一个包含键值对数组的数组,我们可以直接将其传递给 Map 构造函数以\从而创建一个带有排序键的新 Map。

这是完整的代码片段:

const map1 = new Map([
  ['z', 'three'],
  ['a', 'one'],
  ['b', 'two'],
]);

// {'z' => 'three', 'a' => 'one', 'b' => 'two'}
console.log(map1);

// 升序
const sortedAsc = new Map([...map1].sort());

在键值对数组上调用 sort() 方法时,我们只是对键值对的字符串转换进行排序,例如 {z,three}{a,one}

我们使用相同的方法按降序对 Map 的键进行排序。 我们所要做的就是在排序后添加对 reverse() 方法的调用。

const map1 = new Map([
  ['z', 'three'],
  ['a', 'one'],
  ['b', 'two'],
]);

// 降序
const sortedDesc = new Map([...map1].sort().reverse());

console.log(sortedDesc);

如果 Map 的键是数字,则sort()方法的参数必须是一个函数。该方法的参数是一个定义排序顺序的函数。该函数使用 2 个参数。

const map2 = new Map([
  [3, 'three'],
  [1, 'one'],
  [2, 'two'],
]);

// 升序
const sortNumAsc = new Map([...map2].sort((a, b) => a[0] - b[0]));

// {1 => 'one', 2 => 'two', 3 => 'three'}
console.log(sortNumAsc);

sort() 方法对元素进行排序的逻辑如下:

  • 如果比较函数的返回值大于0,则将b排在a之前。
  • 如果比较函数的返回值小于0,则将a排在b之前。
  • 如果 compare 函数的返回值等于 0,则保持 a 和 b 的原始顺序。

在上面的代码片段中:

  • 如果a数组的第一个元素(键)减去b数组的第一个元素返回的值大于0,我们将b排在a之前
  • 如果减法返回负数,我们将 a 排序在 b 之前。
  • 如果减法返回 0,我们保持 a 和 b 的原始顺序。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

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 POST

发布时间:2024/03/23 浏览次数:96 分类:JavaScript

本教程讲解如何在不使用 JavaScript 表单的情况下发送 POST 数据。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便