在今天這篇文章中，我們將分享 15 個實(shí)用的 JavaScript 技能。我們希望它們能夠幫助您提高開發(fā)效率。

1. 反轉(zhuǎn)字符串

有時您可能需要反轉(zhuǎn)字符串。在 JavaScript 中，有一個巧妙的單行代碼可以完成此任務(wù)：

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

此代碼首先將字符串拆分為字符數(shù)組，然后反轉(zhuǎn)字符的順序，最后將它們重新連接為單個字符串。該技術(shù)在處理文本數(shù)據(jù)時非常有用。

2. 數(shù)組求和

計(jì)算數(shù)組中元素的總和是一項(xiàng)常見任務(wù)，JavaScript 中有reduce() 方法可以輕松處理此任務(wù)。reduce() 方法迭代數(shù)組中的每個元素并將它們累加為一個值，例如計(jì)算數(shù)組元素的總和：

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

在這個例子中，我們使用reduce()方法和回調(diào)函數(shù)將數(shù)組元素累加到total中并返回總和。

3. 求數(shù)組中的最大值和最小值

查找數(shù)組中的最大值和最小值是一項(xiàng)常見任務(wù)，JavaScript 提供了一種簡單的方法來做到這一點(diǎn)：

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

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

4. 刪除數(shù)組中的重復(fù)項(xiàng)

有時你需要從數(shù)組中刪除重復(fù)的值。在 JavaScript 中，您可以使用 Set 對象和展開運(yùn)算符輕松完成此操作：

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

通過創(chuàng)建一個新的 Set 對象并將數(shù)組作為參數(shù)傳遞，可以確保只保留唯一值，然后使用擴(kuò)展運(yùn)算符將 Set 轉(zhuǎn)換回?cái)?shù)組。

5. 遍歷對象

使用 Object.entries() 方法，您可以獲得對象的鍵值對數(shù)組，然后迭代對象的屬性并對其進(jìn)行操作：

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

在此示例中，我們有一個包含姓名、年齡和城市屬性的對象。我們使用 Object.entries() 方法創(chuàng)建一個鍵值對數(shù)組，然后使用 for...of 循環(huán)迭代該數(shù)組，將鍵值對解構(gòu)為變量 sum key, value，最后使用模板文字 將它們輸出到控制臺。

6.復(fù)制到剪貼板

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

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

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

7. 檢測在線/離線狀態(tài)

要在 Web 應(yīng)用程序中檢查用戶的在線/離線狀態(tài)，您可以使用 navigator.onLine 屬性：

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

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

8. 刪除錯誤值

在 JavaScript 中，可以使用 filter() 方法從數(shù)組中刪除假值，包括 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()回調(diào)函數(shù)，其中Boolean()是JavaScript中的內(nèi)置函數(shù)，返回真值true，返回假值false。通過傳遞布爾值作為回調(diào)函數(shù)，filter()將從數(shù)組中刪除所有假值，并返回一個僅包含真值的新數(shù)組filteredArr。

9. 擴(kuò)展數(shù)組

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

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

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

10. 訪問自定義屬性

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

<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 對象，其中包含元素上所有自定義數(shù)據(jù)屬性的值。dataset 我們可以通過使用屬性名稱作為對象的屬性來訪問特定的數(shù)據(jù)屬性。

11. 從可迭代對象創(chuàng)建數(shù)組

Array.from() 是 JavaScript 中的內(nèi)置方法，它從可迭代或類似數(shù)組的對象創(chuàng)建新數(shù)組：

//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]

此方法可用于將不同的數(shù)據(jù)結(jié)構(gòu)（例如字符串、集合和映射）轉(zhuǎn)換為數(shù)組。

12. 數(shù)組解構(gòu)

數(shù)組解構(gòu)賦值是一種從數(shù)組或?qū)ο笾刑崛≈挡⑵浞峙浣o變量的方法，使代碼更干凈、更具可讀性。例如，考慮以下數(shù)組：

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

我們可以使用解構(gòu)賦值來提取特定值，而不是使用索引來訪問每個元素：

const [first, second, , fourth] = numbers;


console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

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

13. 對象解構(gòu)

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

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'

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

14.Promise.all()

Promise.all() 允許并行執(zhí)行多個 Promise。它接受 Promise 數(shù)組作為輸入，并返回一個新的 Promise，當(dāng)數(shù)組中的所有 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() 使用方法創(chuàng)建兩個 Promise，以從不同端點(diǎn)獲取數(shù)據(jù)。我們將這些 Promise 放入 Promise.all() 中，當(dāng)所有 Promise 完成后，我們可以 then() 處理塊中的響應(yīng)。如果任何 Promise 被拒絕，catch() 塊將處理錯誤。

15.檢測鼠標(biāo)右鍵事件

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

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

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

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

檢測鼠標(biāo)右鍵單擊事件的一個有趣用途是創(chuàng)建自定義上下文菜單。例如，您可以禁用瀏覽器的默認(rèn)上下文菜單并創(chuàng)建您自己的菜單，當(dāng)用戶右鍵單擊網(wǎng)站的特定元素或區(qū)域時將顯示該菜單。