大多數教程中都找不到的JavaScript技巧 - markodenic

banq發表於2021-04-15
JavaScript

Javascript是一種指令碼語言，使您能夠建立動態更新的內容，控制多媒體，動畫影像等等。
 
1.使用history.back()創造了“返回”按鈕：

<button onclick="history.back()">
  Go back
</button>           

 
2.為了提高數字的可讀性，可以使用下劃線作為分隔符：

const largeNumber = 1_000_000_000;
console.log(largeNumber); // 1000000000"           

 
3.如果要新增事件偵聽器但僅執行一次，則可以使用“once”選項：

element.addEventListener('click', () => console.log('I run only once'), {
    once: true
});           

 
4.可以在console.log()使用大括號將引數包裝起來以檢視變數名稱：console.log({變數名})
 
5.使用Math.min()或Math.max()與價差運算子結合使用以查詢陣列中的最小值或最大值。

const numbers = [6, 8, 1, 3, 9];
console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1           

 
6.使用KeyboardEvent.getModifierState()來檢測是否Caps Lock開啟。

const passwordInput = document.getElementById('password');

passwordInput.addEventListener('keyup', function (event) {
  if (event.getModifierState('CapsLock')) {
    // CapsLock is on.
  }
});           

 
7.可以使用ClipboardAPI建立“複製到剪貼簿”功能：

function copyToClipboard(text) {
  navigator.clipboard.writeText(text);
}           

 
8.使用MouseEventclientX和clientY屬性獲取滑鼠的當前位置。

document.addEventListener('mousemove', (e) => {
    console.log(`Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}`);
});           

 
9.可以設定length屬性來縮短陣列。

const numbers = [1, 2, 3, 4, 5];
numbers.length = 3;
console.log(numbers); // [1, 2, 3];           

 
10.如果僅在條件為真時才必須執行功能，則可以使用短路short-circuit。

//If you have to execute a function only if the condition is true:
if (condition) {
    doSomething();
}
// You can use short-circuit:
condition && doSomething();           


11.從陣列中刪除重複的元素：

const numbers = [2, 3, 4, 4, 2];
console.log([...new Set(numbers)]); // [2, 3, 4]           

 
12.將字串轉換為數字：

const str = '404';
console.log(+str) // 404;          
 
 
13.將數字轉換為字串

const myNumber = 403;
console.log(myNumber + ''); // '403'           

 
14.DRY:不要重複自己。

const myTech = 'JavaScript';
const techs = ['HTML', 'CSS', 'JavaScript'];

// Instead of:
if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
    // do something
}

// You can:
if (techs.includes(myTech)) {
     // do something 
}           

 
15.可以使用`reduce`方法來計算陣列中所有元素的總和：

const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;
console.log(myArray.reduce(reducer)); // 100           


 

相關文章