Javascript數組以查找鍵值對

Question

我希望能夠創建一個可以與以下代碼結合使用的對象，該代碼可以將鍵代碼轉換為適當的鍵名稱。

$(document).keydown(function(event) {
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if (keycode === 37) {
    $('#content').html('You pressed the "<strong>Left Arrow</strong>" key');
  } else if (keycode == 39) {
    $('#content').html('You pressed the "<strong>Right Arrow</strong>"     key');
  } else if (keycode == 38) {
    $('#content').html('You pressed the "<strong>Up Arrow</strong>" key');
  } else if (keycode == 40) {
    $('#content').html('You pressed the "<strong>Down Arrow</strong>" key');
  } else {
    $('#content').html('You pressed a key that triggers a(n) <input class="keycode" value="' + event.which + '" /> code');
  }
});

http://codepen.io/Realto619/pen/OpErLL

做這樣的事情的邏輯方法是什么？ KeyValuePair，JSON，數據字典或其他內容？

Answer 1

我將使用稱為keyNames的映射在您的keyCode和它們的名稱字符串（例如'Left Arrow' ）之間進行轉換。 還要注意，您可以用較短的邏輯或版本（ event.keyCode || event.which ）來代替三元運算符（ event.keyCode ? event.keyCode event.which ）的使用。

 var keyNames = { 37: 'Left Arrow', 38: 'Up Arrow', 39: 'Right Arrow', 40: 'Down Arrow' } $(document).keydown(function (event) { var keyCode = event.keyCode || event.which $('#content').html(keyCode in keyNames ? 'You pressed the "<strong>' + keyNames[keyCode] + '</strong>" key' : 'You pressed a key that triggers a(n) <input class="keycode" value="' + keyCode + '" /> code' ) }) 

 html { font-family: sans-serif; font-size: 13px } .keycode { font-family: monospace; font-weight: bold; font-size: 20px; width: 60px; text-align: center; } 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Press a key. Any key.<br /><br /> <div id="content"></div> 

Answer 2

JSON，鍵值對，數據字典-所有這些不過是Javascript對象。

您可以使用鍵將其聲明為keycodes ，將值聲明為您要使用的對象。 在下面的示例中，它們是字符串。

$(document).keydown(function(event) {
  var keyMap = { 37: 'Left', 38: 'Up', 39: 'Right', 40: 'Down' };
  var keycode = (event.keyCode ? event.keyCode : event.which);

  if (keyMap[keycode]) {
    $('#content').html('You pressed the "<strong>' + keyMap[keycode] + ' Arrow</strong>" key');
  } else {
    $('#content').html('You pressed a key that triggers a(n) <input class="keycode" value="' + event.which + '" /> code');
  }
});

您還可以將函數編寫為值，並在要執行操作時調用它們。

$(document).keydown(function(event) {
  var keyMap = {
    37: function () {
      console.log('handle left');
    },
    38: function () {
      console.log('handle up');
    },
    39: function () {
      console.log('handle right');
    },
    40: function () {
      console.log('handle down');
    },
  };

  var keycode = (event.keyCode ? event.keyCode : event.which);

  if (keyMap[keycode]) {
    keyMap[keycode]();
  } else {
    console.log('This key is not handled');
  }
});

Answer 3

這是實現目標的一種方法：

var keys = {
   "slash": 191, 
   "up": 38, 
   "down": 40, 
   "left": 37, 
   "right": 39, 
   "enter": 13, 
   "space": 32, 
   "ctrl": 17, 
   "alt": 18, 
   "tab": 9, 
   "esc": 27
};

然后，您可以像這樣使用它：

if (keyCode === keys.enter) {
   ....
}

Answer 4

我將采用帶有keyCode和keyName值的對象數組的方法，並使用數組過濾器/減少方法創建所需的字符串。

 const keyLookup = [ { keyCode: 37, keyName: 'Left Arrow' }, { keyCode: 39, keyName: 'Right Arrow' } ]; $(document).keydown(function(event) { const keyString = keyLookup .filter(key => key.keyCode === (event.keyCode ? event.keyCode : event.which)) .reduce((keysPressed, key) => keysPressed += key.keyName, ''); $('#content').html(`You pressed the ${keyString} key.`); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"></div> 

Answer 5

請嘗試以下代碼：此代碼使用JSON映射按下的鍵，其值為鍵名。

 var keyPair = { "8": "backspace", "9": "tab", "13": "enter", "16": "shift", "17": "ctrl", "18": "alt", "19": "pause/break", "20": "caps lock", "27": "esc", "32": "space", "33": "page up", "34": "page down", "35": "end", "36": "home", "37": "left", "38": "up", "39": "right", "40": "down", "45": "insert", "46": "delete", "48": "0", "49": "1", "50": "2", "51": "3", "52": "4", "53": "5", "54": "6", "55": "7", "56": "8", "57": "9", "65": "a", "66": "b", "67": "c", "68": "d", "69": "e", "70": "f", "71": "g", "72": "h", "73": "i", "74": "j", "75": "k", "76": "l", "77": "m", "78": "n", "79": "o", "80": "p", "81": "q", "82": "r", "83": "s", "84": "t", "85": "u", "86": "v", "87": "w", "88": "x", "89": "y", "90": "z", "91": "left command", "93": "right command", "96": "numpad 0", "97": "numpad 1", "98": "numpad 2", "99": "numpad 3", "100": "numpad 4", "101": "numpad 5", "102": "numpad 6", "103": "numpad 7", "104": "numpad 8", "105": "numpad 9", "106": "numpad *", "107": "numpad +", "109": "numpad -", "110": "numpad .", "111": "numpad /", "112": "f1", "113": "f2", "114": "f3", "115": "f4", "116": "f5", "117": "f6", "118": "f7", "119": "f8", "120": "f9", "121": "f10", "122": "f11", "123": "f12", "144": "num lock", "145": "scroll lock", "182": "my computer", "183": "my calculator", "186": ";", "187": "=", "188": ",", "189": "-", "190": ".", "191": "/", "192": "`", "219": "[", "220": "\\\\", "221": "]", "222": "'" } $(document).keydown(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keyPair.hasOwnProperty(keycode)) { $('div').text("You Pressed - " + keyPair[keycode]) } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Press any key here : <br/> <div></div>