PJCHENder 未整理筆記

[JS30] Day12: Key Sequence Detection

2017-09-26

[JS30] Day12: Key Sequence Detection

@([WesBos] JS30)[JavaScript]

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

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

Array.prototype.slice 的使用

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

使用

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

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
* 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 的使用

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

JS30 程式範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

掃描二維條碼,分享此文章