JavaScript数据结构: Set of page widths with associated values

Question

我正在尝试获取一组与不同窗口宽度关联的类。这些类与宽度对由用户设置。但是，我找不到正确的数据结构来存储它。我相信元组将是最佳类型，但显然 they don't exist in javascript 。如果他们这样做，我的数据将如下所示:

var pageBreaks = [(900, "foo"), (600, "bar")];

在 900px 处我可以应用“foo”类。 600px 我可以应用“bar”。我需要能够访问 .each() 循环中的“键”和“值”。

我可以使用嵌套数组，例如 var pageBreaks = [[900, "foo"], [600, "bar"]]; 但我认为它非常丑陋，尤其是试图吸引用户我的插件采用该格式。

对象是可能的:

var pageBreaks = {
    900 : "foo",
    600 : "bar",
 }

但是循环会更困惑，如果我将其按从大到小的顺序排列，处理起来会更容易，这在对象中是无法保证的(对吗？)。

那么处理这个“值-值”对数组的最佳数据结构是什么，并且双方都可以在循环中访问？

Answer 1

一个Map假设您可以访问较新的 JS 语法，这可能是一个好方法:

let pageWidths = new Map();
pageWidths.set(900, "foo");
pageWidths.set(600, "bar");

// ordered
const orderedWidths = new Map([...pageWidths.entries()].sort());

// iteration with forEach
orderedWidths.forEach(console.log.bind(console));

// iteration with for...of
for (var [key, value] of orderedWidths) { 
   console.log(key, value); 
}

尽管 map 本身不会维护秩序(没有内置的 JS 数据结构可以为您做到这一点*)，但 map 相当容易使用，并且很容易实现您的目标。

* 除非您使用以 pageWidth 整数作为索引的数组，但即使这样也需要做一些工作来过滤掉它们之间的 未定义 元素