在今天這篇文章中，我們將分享 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 循環迭代該數組，將鍵值對解構為變量 sum key, value，最后使用模板文字 將它們輸出到控制臺。

6.復制到剪貼板

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

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

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

7. 檢測在線/離線狀態

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

if (navigator.onLine) {
   console.log('User online');
} else {
   console.log('User offline');
}

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

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。通過傳遞布爾值作為回調函數，filter()將從數組中刪除所有假值，并返回一個僅包含真值的新數組filteredArr。

9. 擴展數組

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

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

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

10. 訪問自定義屬性

在 HTML 中，數據屬性提供了一種在元素中存儲附加數據的方法。要在 JavaScript 中訪問這些數據屬性，您可以使用元素的數據集屬性：

<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 中的內置方法，它從可迭代或類似數組的對象創建新數組：

//Convert string to array
const str = "Rabi";
const arr = Array.from(str);
console.log(arr); // Output: ["R", "a", "b", "i"]


// Convert Set to array
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3, 4, 5]

此方法可用于將不同的數據結構（例如字符串、集合和映射）轉換為數組。

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

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

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'

在此示例中，我們使用花括號來創建與對象形狀匹配的模式。變量名稱（姓名、年齡和電子郵件）與對象的屬性名稱匹配，因此提取相應的值并將其分配給這些變量。

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 => {
     // Handle the responses to both requests here
     const response1 = responses[0];
     const response2 = responses[1];
     // operate on the response
   })
   .catch(error => {
     // Handle any requested errors
     console.error(error);
   });

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

15.檢測鼠標右鍵事件

要檢測鼠標右鍵單擊事件，您可以偵聽 contextmenu 當用戶右鍵單擊某個元素時觸發的事件。下面是一個示例代碼片段，當用戶右鍵單擊文檔時，它將向控制臺記錄一條消息：

document.addEventListener('contextmenu', (event) => {
   event.preventDefault(); // Prevent the default context menu from appearing
   console.log('Right click event detected!');
});

在此示例中，我們使用 addEventListener 方法將上下文菜單添加事件偵聽器到文檔對象。 

當事件觸發時，回調函數被執行，我們通過調用對象的方法 event PreventDefault() 來阻止顯示默認上下文菜單，然后將一條消息記錄到控制臺，指示檢測到右鍵單擊事件。

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