鮮爲人知的 JavaScript 技巧

什麼是 JavaScript ？

Javascript 是一種腳本語言，用於建立動態更新的內容、控制多媒體、動畫圖像等等。

1. 「返回」按鈕

使用 history.back() 能夠建立一個瀏覽器「返回」按鈕。

<button onclick="history.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. 檢查 Caps Lock 是否打開

您能夠使用 KeyboardEvent.getModifierState() 來檢測是否 Caps Lock 打開。

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

passwordInput.addEventListener('keyup', function (event) {
    if (event.getModifierState('CapsLock')) {
        // CapsLock 已經打開了
    }
});           
複製代碼

7. 複製到剪貼板

您能夠使用 Clipboard API 建立「複製到剪貼板」功能：

function copyToClipboard(text) {
    navigator.clipboard.writeText(text);
}           
複製代碼

8. 獲取鼠標位置

您能夠使用 MouseEvent 對象下 clientX 和 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. 簡寫條件判斷語句

若是僅在判斷條件爲 true 時才執行函數，則能夠使用 && 簡寫。

// 普通寫法
if (condition) {
    doSomething();
}

// 簡寫
condition && doSomething();           
複製代碼

11. console.table() 打印特定格式的表格

語法：

// [] 裏面指的是可選參數
console.table(data [, columns]);
複製代碼

參數：

• data 表示要顯示的數據。必須是數組或對象。
• columns 表示一個包含列的名稱的數組。

實例：

// 一個對象數組，只打印 firstName
function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

const john = new Person("John", "Smith");
const jane = new Person("Jane", "Doe");
const emily = new Person("Emily", "Jones");

console.table([john, jane, emily], ["firstName"]);
複製代碼

打印結果以下圖：

12. 數組去重

const numbers = [2, 3, 4, 4, 2];

console.log([...new Set(numbers)]); // [2, 3, 4] 
複製代碼

13. 將字符串轉換爲數字

const str = '404';

console.log(+str) // 404; 
複製代碼

14. 將數字轉換爲字符串

鏈接空字符串。

const myNumber = 403;

console.log(myNumber + ''); // '403' 
複製代碼

15. 從數組中過濾全部虛值

const myArray = [1, undefined, NaN, 2, null, '@denicmarko', true, 3, false];

console.log(myArray.filter(Boolean)); // [1, 2, "@denicmarko", true, 3] 

複製代碼

16. 妙用 includes

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

// 普通寫法
if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
    // do something
}

// includes 寫法
if (techs.includes(myTech)) {
    // do something 
}           
複製代碼

17. 妙用 reduce 對數組求和

const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;

console.log(myArray.reduce(reducer)); // 100 
複製代碼

18. console.log() 樣式

您知不知道能夠使用 CSS 語句在 DevTools 中設置 console.log 輸出的樣式：

19. 元素的 dataset

使用 dataset 屬性訪問元素的自定義數據屬性 (data-*)：

<div id="user" data-name="John Doe" data-age="29" data-something="Some Data">
    John Doe
</div>

<script> const user = document.getElementById('user'); console.log(user.dataset); // { name: "John Doe", age: "29", something: "Some Data" } console.log(user.dataset.name); // "John Doe" console.log(user.dataset.age); // "29" console.log(user.dataset.something); // "Some Data" </script>     
複製代碼

相關推薦

• 鮮爲人知的 HTML 技巧 🔥
• 鮮爲人知的 CSS 技巧 🔥

參考文章

• JavaScript Tips