Javascript数据结构：具有关联值的页面宽度集

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

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

在900像素时，我可以申请“foo”类。600px我可以申请“酒吧”。我需要能够访问.each（）循环中的“键”和“值”

我可以使用嵌套数组，比如

var pageBreaks=[[900，“foo”]，[600，“bar”]但是我认为这是非常丑陋的，尤其是试图让我的插件的用户采用这种格式

对象是可能的：

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

但如果我将它从大到小排序（这在一个对象中是不能保证的），循环会更混乱，处理起来也会更容易（对吧？）

那么什么样的数据结构才是处理这种两边都可以在循环中访问的“值-值”对数组的最佳数据结构呢？
a可能是一种很好的方法，假设您可以访问较新的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); 
}

即使它本身无法维持秩序（没有内置的JS数据结构可以为您做到这一点*），地图也非常容易使用，也很容易实现您的目标

*除非使用pageWidth整数作为索引的数组，但即使这样也需要一些工作来过滤它们之间的
未定义的
元素a可能是一种很好的方法，假设您可以访问较新的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); 
}

即使它本身无法维持秩序（没有内置的JS数据结构可以为您做到这一点*），地图也非常容易使用，也很容易实现您的目标

*除非您使用pageWidth整数作为索引的数组，但即使这样也需要一些工作来过滤掉它们之间的
未定义的
元素
，您可以使用Hashmap数据结构来实现您的目标。我用JavaScript编写了（正在编写）一个数据结构库，如果您有兴趣使用它，我已经完成了

您可以存储键值对（或者在您的例子中是值对），并按照插入它们的相同顺序对它们进行迭代

const Hashmap = require('node-needle').Hashmap;

var map = new Hashmap();

map.put(900, "foo");
map.put(600, "bar");
// ...

// Iterate through map - insertion order is kept
for(var it = map.iterator(); it !== null; it = map.next()){
  console.log(it);          // 900 -> 600 -> ...
  console.log(map.get(it)); // "foo" -> "bar" -> ...
}

您可以在这里使用Hashmap数据结构来实现您的目标。我用JavaScript编写了（正在编写）一个数据结构库，如果您有兴趣使用它，我已经完成了

您可以存储键值对（或者在您的例子中是值对），并按照插入它们的相同顺序对它们进行迭代

const Hashmap = require('node-needle').Hashmap;

var map = new Hashmap();

map.put(900, "foo");
map.put(600, "bar");
// ...

// Iterate through map - insertion order is kept
for(var it = map.iterator(); it !== null; it = map.next()){
  console.log(it);          // 900 -> 600 -> ...
  console.log(map.get(it)); // "foo" -> "bar" -> ...
}

你为什么不反过来做呢<代码>{“foo”：900，“bar”：600}
然后使用
[tuple（900，“foo”）、tuple（600，“bar”）]
其中
tuple=Array
您能不能使用CSS并根据其基类更改断点上的元素样式？似乎是不必要的处理Javascript@TheProHands我不确定反过来会是什么？@DasBeasto：最好让开发人员更容易，并处理混乱的输入。你可以掩护。没有什么规定输入必须与插件内部使用的结构匹配。为什么不做相反的操作<代码>{“foo”：900，“bar”：600}
然后使用
[tuple（900，“foo”）、tuple（600，“bar”）]
其中
tuple=Array
您能不能使用CSS并根据其基类更改断点上的元素样式？似乎是不必要的处理Javascript@TheProHands我不确定反过来会是什么？@DasBeasto：最好让开发人员更容易，并处理混乱的输入。你可以掩护。没有任何说明输入必须与插件中使用的结构匹配。