如何引用对象中的键(而不是值)来实现对计算器的键盘支持

Question

我正在尝试为我的计算器添加键盘支持，这样你就可以按键而不是点击屏幕。这看起来是一个练习使用对象的好机会，但我显然在这里做错了什么。你能给我一个提示吗？

let keyboard = {
48: zeroFunc,
49: oneFunc,
50: twoFunc,
51: threeFunc,
52: fourFunc,
53: fiveFunc,
54: sixFunc,
55: sevenFunc,
56: eightFunc,
57: nineFunc
};

我试过这样的东西：

document.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.keyCode === keyboard.key) {
keyboard[action]
}
}

这个：

document.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
Object.keys(keyboard).forEach(key, index) => {
if (e.keyCode === key) {
keyboard[index]
}
}
};

我可以为每个键代码做一个if语句，但我怀疑有一种更优雅的方法可以做到这一点。

Answer 1

既然你已经有了一个将键代码映射到函数的对象，你可以简单地这样调用它们：

document.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (keyboard[e.keyCode] != undefined) {
keyboard[e.keyCode](e); //<--  you need to call the function, once you get it...
}
};

甚至，

function checkKeyPressed(e) {
keyboard[e.keyCode] ? keyboard[e.keyCode](e) : null; 
};

Answer 2

document.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
const action = keyboard[e.keyCode];
if (action) action();
}

Answer 3

只需一个if语句即可完成

function checkKeyPressed(e) {
if (keyboard[e.keyCode])
keyboard[e.keyCode]();
}

如果e.keyCode不是对象键盘中的值之一，则keyboard[e.keyCode]将返回undefined，并且内部代码将不会运行。

您还需要在函数后面添加括号才能实际调用它