如何更改數組中 object 的 boolean 屬性的值？

Question

一般來說，我對編碼非常陌生，我正在學習 javascript，如果我對任何事情有錯誤的想法，請原諒我。 到目前為止，我在自學基礎知識方面做得很好，但我在試圖弄清楚如何一次檢測多個按鍵時遇到了困難。 我已經看到了一些方法，但看起來一般的想法是在“keydown”和“keyup”上標記按鍵。 問題是，我不知道如何制作我的keyBoard['w'].pressed = true 。

const keyBoard = {
    w: {pressed: false}
}

document.addEventListener('keyDown', (e) => {
    keyBoard[e.key].pressed = true
});

if(keyBoard['w'].pressed){
    alert("success!")
}

這是我制作的一個非常簡單的測試用例，旨在讓我了解邏輯，通過反復試驗，我知道問題在於使我的 w.pressed 為真。 我知道我需要添加一個“keyup”偵聽器以將其設置為 false，但現在我需要知道的只是所描述的內容。 謝謝！

Answer 1

您只需將 IF 語句放入您的偵聽器 function - 並使用“keydown”而不是“keyDown”。 另外，我添加了一行，將按下的每個鍵添加到 object 中。

 const keyBoard = { w: { pressed: false } } document.addEventListener('keydown', (e) => { keyBoard[e.key] = keyBoard[e.key]? ? {} keyBoard[e.key].pressed = true; console.log(keyBoard) if (keyBoard['w'].pressed) { console.log("success;") } });

Answer 2

首先，您使用的事件有錯字。 正確的名稱是keydown ，而不是keyDown 。 你可以在這里閱讀文檔：keydown 事件

現在進入你的代碼：這不是它不起作用的方式，但這將在未來幫助你。 事件列表器的 function 正在您的 object keyBoard中查找密鑰e.key ，而無需先聲明它們。 在 JavaScript 中，如果您的JSON沒有密鑰，這不是問題，那么它將被添加。 這里的問題是您試圖將值true添加到按下不存在的pressed上的屬性。 這將引發錯誤

無法設置 null 的屬性（設置“按下”）

要查看此內容，請按F12在瀏覽器中打開控制台。

為什么？ 如前所述，可以將密鑰添加到keyBoard ，但未定義該密鑰的類型！ 當您執行keyBoard[e.key].pressed = true時，您是在告訴解釋器keyBoard具有值e.key的 object ，它也是一個 object並pressed它您需要指定進入keyBoard[e.key]的內容是 object。 您可以按以下方式解決此問題：

document.addEventListener('keydown', (e) => {
    keyBoard[e.key] = keyBoard[e.key] == undefined ? {} : keyBoard[e.key]
    keyBoard[e.key].pressed = true
});

添加額外的行將指定keyBoard[e.key]是pressed ，它將允許您將true的值分配給屬性 press 。

現在轉到實際的解決方案：

當頁面加載時，腳本中的所有內容都會立即執行。 這意味着您的 if 語句永遠不會為真，因為您將在加載后按下任何鍵，換句話說，在腳本已經完成之后。 如果您希望每次按下w時都會彈出警報，那么您需要將其添加為您已經創建的事件功能的一部分。 即使腳本完成了對擊鍵的偵聽並執行了您在其中編寫的代碼，該事件仍將保持活動狀態。 這是一種得到你想要的東西的方法。 每次按下w時都會彈出一個警報。

document.addEventListener('keydown', (e) => {
    if (e.key === 'w') {
        alert("success")
    }
});

Answer 3

逐步完成三個代碼塊：

1. 用 object 聲明一個常量
2. 將事件附加到文檔
3. 檢查 object 的 state

似乎沒問題，但附加事件不會停止代碼執行，直到它發生。 主線程繼續進行，因此在第 3 步中不會更改鍵盤 object。

為了讓它工作，它應該檢查循環中的變量，即。

setInterval(() => {
  if (keyBoard['w'].pressed){
    alert("success!")
  }
}, 10);

但在這種情況下不是很需要。

正確的方法是讓你的代碼在每次按鍵按下或按下時執行一些方法：

const keyBoard = {
    w: {pressed: false}
}

document.addEventListener('keydown', e => {
    keyBoard[e.key] ||= {};
    keyBoard[e.key].pressed = true
    doImportantStuff();
});

document.addEventListener('keyup', e => {
    keyBoard[e.key] ||= {};
    keyBoard[e.key].pressed = false; // or better `delete keyBoard[e.key];`
    doImportantStuff();
});

function doImportantStuff() {
    console.log(Object.entries(keyBoard));
}

如果您只想為每個鍵按下 state 如果您省略按下屬性，您的代碼可能會更簡單一些：

const keyBoard = {}

document.addEventListener('keydown', e => {
    keyBoard[e.key] = true
    doImportantStuff();
});

document.addEventListener('keyup', e => {
    keyBoard[e.key] = false; // or better `delete keyBoard[e.key];
    doImportantStuff();
});

function doImportantStuff() {
    console.log(Object.keys(keyBoard).filter(key => keyBoard[key]));
    // console.log(Object.keys(keyBoard)); if you delete keys from keyBoard when they up
}