[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');
}
});