15 個實用的 JavaScript 技巧
在今天這篇文章中，我們將分享 15 個實用的 JavaScript 技能。我們希望它們能夠幫助您提高開發(fā)效率。
1. 反轉(zhuǎn)字符串
有時您可能需要反轉(zhuǎn)字符串。在 JavaScript 中，有一個巧妙的單行代碼可以完成此任務(wù)：
const reversedString = str.split('').reverse().join('');此代碼首先將字符串拆分為字符數(shù)組，然后反轉(zhuǎn)字符的順序，最后將它們重新連接為單個字符串。該技術(shù)在處理文本數(shù)據(jù)時非常有用。
2. 數(shù)組求和
計算數(shù)組中元素的總和是一項常見任務(wù)，JavaScript 中有reduce() 方法可以輕松處理此任務(wù)。reduce() 方法迭代數(shù)組中的每個元素并將它們累加為一個值，例如計算數(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ù)組中的最大值和最小值是一項常見任務(wù)，JavaScript 提供了一種簡單的方法來做到這一點：
const numbers = [11, 2, 9, 6, 19];
console.log(Math.max(...numbers)); // 19
console.log(Math.min(...numbers)); // 2這里我們使用展開運算符...將數(shù)組中的元素傳遞給Math.max()和Math.min()方法，它們分別返回數(shù)組中的最大值和最小值。
4. 刪除數(shù)組中的重復(fù)項
有時你需要從數(shù)組中刪除重復(fù)的值。在 JavaScript 中，您可以使用 Set 對象和展開運算符輕松完成此操作：
const numbers = [2, 3, 7, 7, 2];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [2, 3, 7]通過創(chuàng)建一個新的 Set 對象并將數(shù)組作為參數(shù)傳遞，可以確保只保留唯一值，然后使用擴展運算符將 Set 轉(zhuǎn)換回數(shù)組。
5. 遍歷對象
使用 Object.entries() 方法，您可以獲得對象的鍵值對數(shù)組，然后迭代對象的屬性并對其進行操作：
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. 擴展數(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，以從不同端點獲取數(shù)據(jù)。我們將這些 Promise 放入 Promise.all() 中，當(dāng)所有 Promise 完成后，我們可以 then() 處理塊中的響應(yīng)。如果任何 Promise 被拒絕，catch() 塊將處理錯誤。
15.檢測鼠標右鍵事件
要檢測鼠標右鍵單擊事件，您可以偵聽 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() 來阻止顯示默認上下文菜單，然后將一條消息記錄到控制臺，指示檢測到右鍵單擊事件。
檢測鼠標右鍵單擊事件的一個有趣用途是創(chuàng)建自定義上下文菜單。例如，您可以禁用瀏覽器的默認上下文菜單并創(chuàng)建您自己的菜單，當(dāng)用戶右鍵單擊網(wǎng)站的特定元素或區(qū)域時將顯示該菜單。
