Skip to main content

[JS30] Day12: Key Sequence Detection

keywords: 偵測使用者輸入的按鍵, detect characters#

今天要做的是偵測當使用者連續輸入一個特定的字串後,就會產生一些相對應的反應。重點其實就在於如何偵測++使用者最後輸入的哪些字++。

Array.prototype.slice 的使用#

在原本的內容中,作者使用的是 Array.prototype.splice 這個方法,但 splice 一般來說是在刪除或添加陣列內容時使用,因此個人認為使用單純擷取陣列元素的 Array.prototype.slice 應該更為適合(我想作者有它的考量)。

使用#

arr.slice(begin, end)
- 從 begin 開始,不包含 end
- 最後一個元素的 index 是 -1

例子#

/**
* arr.slice(begin, end),從 begin 開始,不包含 end
**/
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
arr.slice(0, 3); // [0,1,2]
arr.slice(3, 7); // [3,4,5,6]
// 最後一個是 -1
arr.slice(-3, -1); // [8,9]
arr.slice(-5, -3); // [6,7]
arr.slice(-3, -5); // []
// 如果要擷取到最後一個
arr.slice(-5, arr.length); // [6,7,8,9,0]

Array.prototype.join 的使用#

arr.join(separator); // separator 預設是 ','

JS30 程式範例#

const pressed = [];
const secretCode = 'pjchender';
/**
* 使用 e.key 可以偵測使用者按下的字母(case sensitive)
**/
window.addEventListener('keyup', (e) => {
// 擷取使用者最後輸入按鍵
pressed.push(e.key);
if (pressed.slice(-secretCode.length, pressed.length).join('') === 'pjchender') {
alert('You got the secret');
}
});

完成作品#

Day12: Key Sequence Detection

Last updated on