本文我們將探討15個實用的JavaScript技巧，希望它們可以幫你提高開發效率，有用的話點贊收藏~。

1. 反轉字符串

你有時候可能需要將字符串顛倒過來。在JavaScript中，有一個巧妙的一行代碼可以實現這個目標：

const reversedString = str.split('').reverse().join('');

這段代碼首先將字符串拆分為字符數組，然后顛倒字符的順序，最后將它們重新連接成一個字符串。這個技巧在處理文本數據時非常有用。

2. 數組求和

計算數組中元素的總和是常見的任務，而JavaScript中的reduce()方法能夠輕松勝任此任務。reduce()方法遍歷數組中的每個元素，并將它們累積為一個值，例如計算數組元素的總和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 15

在這個示例中，我們使用reduce()方法和一個回調函數，將數組元素累積到total中，并返回總和。

3. 尋找數組中的最大和最小值

尋找數組中的最大和最小值是常見的任務，而JavaScript提供了一種簡單的方法來實現：

const numbers = [11, 2, 9, 6, 19];
console.log(Math.max(...numbers)); // 19
console.log(Math.min(...numbers)); // 2

這里我們使用了展開運算符...將數組中的元素傳遞給Math.max()和Math.min()方法，它們分別返回數組中的最大和最小值。

4. 從數組中刪除重復項

有時候你需要從數組中去除重復的值。在JavaScript中，你可以使用Set對象和展開運算符來輕松實現：

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

通過創建一個新的Set對象并將數組作為參數傳遞，你可以確保只保留唯一的值，然后使用展開運算符將Set轉換回數組。

5. 遍歷對象

使用Object.entries()方法，你可以獲取一個對象的鍵值對數組，然后遍歷對象的屬性并對其進行操作：

const person = {name: 'Rabi Siddique',age: 25,city: 'Gujranwala'
};
for (const [key, value] of Object.entries(person)) {console.log(`${key}: ${value}`);
}

在這個示例中，我們有一個包含姓名、年齡和城市屬性的對象。我們使用Object.entries()方法創建鍵值對數組，然后使用for...of循環來迭代數組，將鍵值對解構為變量key和value，最后使用模板字面量將它們輸出到控制臺。

6. 復制到剪貼板

通過Clipboard API，在JavaScript中將文本復制到剪貼板變得非常簡單：

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

在這個函數中，我們調用navigator.clipboard.writeText()方法并傳遞文本參數，將文本內容寫入剪貼板。

7. 檢測在線/離線狀態

要檢查用戶在Web應用中的在線/離線狀態，你可以使用navigator.onLine屬性：

if (navigator.onLine) {console.log('用戶在線');
} else {console.log('用戶離線');
}

這個屬性返回一個布爾值，指示瀏覽器當前是在線還是離線狀態。

8. 去除假值

在JavaScript中，你可以使用filter()方法來從數組中刪除假值，這些假值包括false、0、空字符串''、null、undefined和NaN：

const arr = [1, 2, 0, '', undefined, null, 3, NaN, false];
const filteredArr = arr.filter(Boolean);
console.log(filteredArr); // [1, 2, 3]

在這個示例中，我們將Boolean作為filter()的回調函數，Boolean()是JavaScript中的一個內置函數，對于真值返回true，對于假值返回false。通過傳遞Boolean作為回調函數，filter()將從數組中刪除所有假值，并返回一個僅包含真值的新數組filteredArr。

9. 展開數組

為了展平JavaScript中的多維數組，你可以使用flat()方法。flat()方法創建一個新數組，將所有子數組元素遞歸連接到指定深度：

const multiDimensionalArray = [[1, 2], [3, 4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat(2);
console.log(flattenedArray); // 輸出: [1, 2, 3, 4, 5, 6]

在這個示例中，multiDimensionalArray是一個包含兩個嵌套數組的二維數組。通過調用flat()方法并指定深度為2，所有子數組元素都被連接到一個單一的數組中，生成flattenedArray，其中包含原始多維數組的所有元素。

10. 訪問自定義屬性

在HTML中，數據屬性提供了一種在元素中存儲額外數據的方法

。要在JavaScript中訪問這些數據屬性，你可以使用元素的dataset屬性：

<div id="myDiv" data-name="Rabi Siddique" data-age="25"></div>

要訪問div元素的data-name和data-age屬性，你可以使用以下JavaScript代碼：

const myDiv = document.getElementById('myDiv');
const name = myDiv.dataset.name;
const age = myDiv.dataset.age;
console.log(name); // "Rabi Siddique"
console.log(age); ?// "25"

在這個示例中，myDiv.dataset返回一個包含div元素上所有自定義數據屬性值的對象。我們可以通過使用屬性名作為dataset對象的屬性，訪問特定的數據屬性。

11. 從可迭代對象創建數組

Array.from()是JavaScript中的一個內置方法，它可以從可迭代對象或類似數組的對象創建一個新數組：

// 將字符串轉換為數組
const str = "Rabi";
const arr = Array.from(str);
console.log(arr); // 輸出: ["R", "a", "b", "i"]
?
// 將Set轉換為數組
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // 輸出: [1, 2, 3, 4, 5]

這個方法可以用來將不同的數據結構，如字符串、Set和Map，轉換成數組。

12. 數組解構

數組解構賦值是一種從數組或對象中提取值并將其分配給變量的方法，它使代碼更簡潔、可讀性更高。例如，考慮以下數組：

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

與其使用索引訪問每個元素，我們可以使用解構賦值來提取特定的值：

const [first, second, , fourth] = numbers;
?
console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

在這個示例中，我們使用方括號創建一個與數組形狀匹配的模式，模式中的逗號允許我們跳過我們不感興趣的元素。然后，我們將提取的值分配給新變量（first、second和fourth）。

13. 對象解構

對象解構賦值也非常有用，允許我們從對象中提取屬性值并將其分配給變量：

const person = {name: 'Rabi Siddique',age: 25,email: 'rabi@example.com'
};
?
const {name, age, email} = person;
?
console.log(name); // 'Rabi Siddique'
console.log(age); // 25
console.log(email); // 'rabi@example.com'

在這個示例中，我們使用大括號創建一個模式，該模式匹配對象的形狀。變量名（name、age和email）匹配對象的屬性名，因此相應的值被提取并分配給這些變量。

14. Promise.all()

Promise.all()允許多個Promise并行執行。它接受一個Promise數組作為輸入，并返回一個新的Promise，該新Promise在數組中的所有Promise都解決時解決。

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
?
Promise.all([promise1, promise2]).then(responses => {// 在這里處理兩個請求的響應const response1 = responses[0];const response2 = responses[1];// 對響應進行操作}).catch(error => {// 處理任何請求的錯誤console.error(error);});

在這個示例中，我們使用fetch()方法創建兩個Promise來獲取來自不同端點的數據。我們將這些Promise放入Promise.all()，當所有Promise都完成時，我們可以在then()塊中處理響應。如果任何一個Promise被拒絕，catch()塊將處理錯誤。

15. 檢測鼠標右鍵點擊事件

要檢測鼠標右鍵點擊事件，你可以監聽contextmenu事件，這個事件在用戶右鍵點擊元素時觸發。以下是一個示例代碼段，當用戶右鍵點擊文檔時，將消息記錄到控制臺：

document.addEventListener('contextmenu', (event) => {event.preventDefault(); // 阻止默認的上下文菜單出現console.log('檢測到右鍵點擊事件！');
});

在這個示例中，我們使用addEventListener方法將contextmenu事件監聽器添加到document對象上。當事件觸發時，回調函數被執行，我們通過調用event對象上的preventDefault()方法來阻止默認上下文菜單的顯示，然后將消息記錄到控制臺，指示檢測到了右鍵點擊事件。

檢測鼠標右鍵點擊事件的一個有趣用途是創建自定義上下文菜單。例如，你可以禁用瀏覽器的默認上下文菜單，然后創建自己的菜單，它將在用戶右鍵點擊你的網站的特定元素或區域時顯示。