javascript - 如何在字典末尾追加键值对？

Question

我试图将 0 分配给每次单击，将 1 分配给每次双击，并记录点击和 map 中的位置。然而，即使我没有尝试对它们进行排序，这些键都是按升序排序的。有没有办法在确保所有点击都注册的同时添加以 1 或 0 作为值的位置键？我什至尝试使用 String(i) 将 key 转换为字符串。

这是我正在处理的元素的完整代码:Codesandbox

var lastClicked;
var map = {};

var grid = clickableGrid(20, 30, function(el, row, col, i, isDoubleClick) {

  if (!isDoubleClick && !el.className) {
    el.className = "clicked";
    map[String(i)] = 0;
  } else if (isDoubleClick && !el.className) {
    el.className = "niclicked";
    map[String(i)] = 1;
  }
  console.log(map);
});

document.body.appendChild(grid);

Answer 1

事实上，当你迭代它们时，普通对象中键的顺序被访问，不能保证是按插入顺序。具体而言，(当转换为数字时)为 32 位范围内的正整数的值将按数字顺序访问。

数组是另一种选择，因为它们在使用 push 时清楚地保持插入顺序。缺点是它们不提供字典行为，因此您可以通过(原始)键找到条目。

如果您确实需要字典行为，同时又需要插入顺序，那么 Map 可能是一个解决方案:

var lastClicked;
var map = new Map; // <---

var grid = clickableGrid(20, 30, function(el, row, col, i, isDoubleClick) {

  if (!isDoubleClick && !el.className) {
    el.className = "clicked";
    map.set(i, 0);
  } else if (isDoubleClick && !el.className) {
    el.className = "niclicked";
    map.set(i, 1);
  }
  map.forEach((value, key) => console.log(key, value)); //<-- insertion order!
});

document.body.appendChild(grid);

您可以使用:map.get(key) 在常数时间内获取给定键的 0/1 值，就像使用普通对象一样。