时间戳

首页 > 解决方案 > 如何在字典末尾附加键值对？

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

问题描述

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

这是我正在处理的项目的完整代码： 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);

标签： javascripthtmlcssobject

解决方案

事实上，当你迭代它们时，普通对象中的键的顺序被访问，并不能保证按插入顺序。具体来说，（当转换为数字时）是 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 值，就像使用普通对象一样。

推荐阅读