Key Sequence Detection 偵測鍵盤輸入值

這次是一個練習鍵盤事件的操作，當在鍵盤上輸入了預設好的答案，就會跳出彩蛋

個人codepen

技巧點

1. Array.push()

• 於陣列的最後處，加入一個或多個值，會改變原始陣列的內容．回傳陣列在新增過後的新長度．

const arr = [1, 2, 3];
const newLength = arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newLength); // 5

2. Array.shift()

• 於陣列的最前方處，刪除一個值，會改變原始陣列的內容．回傳陣列在新增過後的新長度．

const arr = [1, 2, 3];
const removed = arr.shift();
console.log(arr);
console.log(removed); // 1

3. Array.splice(start, deleteCount, addItem)

• 刪除陣列中的元素，或加入新元素．會改變原本陣列．
• 參數中可以代入最多三個參數．start為陣列中開始要操作的索引位置．deleteCount、addItem為選擇性的參數．當只有start時，會從start開始，刪除元素到陣列的長度位置．所以當start值超出陣列長度，他會視為從陣列長度開始刪除元素．
• start也可以是負值，-1代表從陣列的最後一個索引開始．-2代表索引倒數第二個．
• start是負值的情況下，而且這個值的絕對值超過陣列長度，start就會被設定為0
• 底下示範在經過splice處理之後，原本陣列值的變化：

const arr = [1, 2, 3];
arr.splice(); // arr維持[1, 2, 3] 因為沒有刪減任何元素
arr.splice(4); // arr維持[1, 2, 3] 因為start位置超出陣列長度，視為從陣列長度開始刪除，等於沒刪除任何東西
arr.splice(1); // arr為[1] 從索引1開始取值，包含索引1的本身，刪除直到陣列的長度結束
arr.splice(-1); // arr為[1, 2] 因為-1代表從陣列最後一個開始，到陣列的長度，所以只有刪除掉最後一個元素．
arr.splice(-arr.length); // [] 陣列長度的負數，也就等於是索引值0，從索引值0開始刪除，一直刪除到陣列的長度才停止．
arr.splice(-5); // arr為[] 
arr.splice(-5, 0); // arr維持[1, 2, 3]

• deleteCount為你要刪除的元素數量，就會從start的索引值開始，刪除你指定的數量．如果這個刪除的數量，大於start開始之後剩餘的數量，就將start開始的後面所有元素刪掉．
• 特別之處，在於deleteCount的數量如果給予0或是負數的情況，則不會有任何元素被刪除！！！

const arr = [1, 2, 3];
arr.splice(0, 1); // arr為[2, 3] 因爲從索引0開始刪除，只刪除一個 
arr.splice(0, 5); // arr為[] 因為從索引0開始，要連續刪掉五個，但start開始數的長度只有三個，等於全部都刪掉了．
arr.splice(0, -3); // arr為[1, 2, 3] 因為刪除數量出現負，不會有任何元素被刪除 

• addItem為你要新增或是要替換的值

const arr = [1, 2, 3];
arr.splice(arr.length, 0, 4); arr為[1, 2, 3, 4] 從索引值3的位置開始刪除，但是刪除數量為零，且新增一個4
arr.splice(0, 1, "777"); // arr為['777', 2, 3] 因為將索引0的位置刪除一個，替換成777的元素

心得

是一次基礎陣列操作上的練習，用splice去取值有時候真的會被負數的索引值給混淆．都要思考很久，才轉過來...