在本文中，我想與您分享 13個基本的 JavaScript 函數(shù)，如果您是 Web前端開發(fā)人員，您應(yīng)該熟悉這些函數(shù)。
您可以將本文所有 JavaScript 函數(shù)加入收藏至您的工具箱，以便在您的軟件項目中盡可能使用這些片段。
如果應(yīng)用，所有片段都將加快您的軟件開發(fā)過程并節(jié)省多個小時的工作！
因此，不要浪費更多時間讓我們開始吧！
1. 檢索任何 JavaScript 數(shù)組中的第一個/最后一個項目
通常，如果使用 JavaScript，我需要數(shù)組的第一個元素。為了可用性，我創(chuàng)建了一個簡單的 head 函數(shù)，我可以將其用于數(shù)組并將返回第一項。
作為獎勵，我添加了 JavaScript last 函數(shù)，它從數(shù)組中檢索最后一項。
const head = (arr) => arr[0];
const last = (arr) => arr[arr.length - 1];
head([1, 2, 3, 4, 5, 6, 7, 8]); // 1
last([1, 2, 3, 4, 5, 6, 7, 8]); // 8
2. JavaScript 中的逗號運算符
JavaScript 中的逗號運算符起初可能很復(fù)雜。
但是，實際上，這真的很容易！
例如，使用 [x,y] 總是返回正確的操作數(shù)。請參閱以下 JavaScript 片段以更好地理解：
console.log([1, 2, 3, 4][1]); // 2
console.log([1, 2, 3, 4][(1, 2)]); // 3
console.log([1, 2, 3, 4][2]); // 3
3. 將任何內(nèi)容復(fù)制到剪貼板
在開發(fā)網(wǎng)站時，您有時希望將特定內(nèi)容復(fù)制到剪貼板以提高可用性。
在 JavaScript 中，這可以通過直接使用文檔（舊方法）或使用導(dǎo)航器組件（新方法）來完成。
function copyToClipboard() {
const copyText = document.getElementById('myInput');
copyText.select();
document.execCommand('copy');
}
// new API
function copyToClipboard() {
navigator.clipboard.writeText(document.querySelector('#myInput').value);
}4. JavaScript 中的嵌套解構(gòu)
解構(gòu)是一個重要的 JavaScript 主題，之前也有詳細(xì)的分享過。
但是今天這個代碼片段顯示了簡單的對象重組，僅從對象中提取兩個變量。
const user = {
id: 459,
name: 'Paul Knulst',
age: 29,
job: {
role: 'Tech Lead',
},
};
const {
name,
job: { role },
} = user;
console.log(name); // Paul Knulst
console.log(role); // Tech Lead5. 為任何對象添加全局可用的函數(shù)
在 JavaScript 中，可以使用新方法擴(kuò)展任何對象。
以下 JavaScript 片段顯示了如何將 toUpperCase 函數(shù)添加到數(shù)組。
Array.prototype.toUpperCase = function () {
let i;
for (let i = 0; i < this.length; i++) {
this[i] = this[i].toUpperCase();
}
return this;
};
const myArray = ['paul', 'knulst', 'medium'];
console.log(myArray); // ['paul', 'knulst', 'medium']
console.log(myArray.toUpperCase()); // ['PAUL', 'KNULST', 'MEDIUM']這個概念稱為原型繼承，本文對此進(jìn)行了詳細(xì)介紹。
6. 在 JavaScript 中將數(shù)組本地轉(zhuǎn)換為對象
JavaScript 有一個原生函數(shù) Object.fromEntries，可用于將任何輸入數(shù)組轉(zhuǎn)換為對象。
const anArray = [
['firstname', 'Paul'],
['surname', 'Knulst'],
['address', 'worldwide'],
['role', 'Senior Engineer'],
['followers', 'not much'],
];
const anObj = Object.fromEntries(anArray);
console.log(anObj);
// {
// firstname: 'Paul',
// surname: 'Knulst',
// address: 'worldwide',
// role: 'Senior Engineer',
// followers: 'not much'
// }
7. 遞歸得到一個數(shù)的斐波那契
遞歸是每個軟件開發(fā)者必須知道的概念！
此 JavaScript 片段顯示了以遞歸方式實現(xiàn)的斐波那契函數(shù)。
const getFibonacci = (n, memo = {}) =>
memo[n] ||
(n <= 2
? 1
: (memo[n] = getFibonacci(n - 1, memo) + getFibonacci(n - 2, memo)));
console.log(getFibonacci(4)); // 3
console.log(getFibonacci(8)); // 218. 檢查約會對象是否在周末
這個 JavaScript 片段顯示了檢查每個 Date 對象是否為周末是多么容易。
您可以更改周數(shù)（6 和 0）并將其替換為任何其他工作日編號以檢查不同的日子。
const isWeekend = (date) => date.getDay() === 6 || date.getDay() === 0;
console.log(isWeekend(new Date())); // false
console.log(isWeekend(new Date('2022-10-28'))); // false
console.log(isWeekend(new Date('2022-10-29'))); // true
9. 將 24 小時制時間格式轉(zhuǎn)換為 am/pm
使用不同的時間格式是一件痛苦的事情。
這個簡單的 JavaScript 片段顯示了一個將任何 24 小時制時間轉(zhuǎn)換為上午/下午時間的函數(shù)。
const toAMPMFormat = (h) =>
`${h % 12 === 0 ? 12 : h % 12}${h < 12 ? ' am.' : ' pm.'}`;
console.log(toAMPMFormat(12)); // 12 pm.
console.log(toAMPMFormat(21)); // 9 pm.
console.log(toAMPMFormat(8)); // 8 am.
console.log(toAMPMFormat(16)); // 4 pm
10. 檢查對象中是否存在屬性
有時你想在打印或使用它們之前檢查屬性是否存在。
JavaScript 沒有在使用它之前執(zhí)行 if property !== undefined ，而是有一個內(nèi)置函數(shù)來執(zhí)行此操作。
const developer = {
name: 'Paul Knulst',
role: 'Tech Lead',
extra: 'Loves DevOps',
company: 'Realcore',
os: 'Windows',
};
const laptop = {
os: 'Windows',
buydate: '27.10.2022',
extra: 'looks cool',
};
console.log('name' in developer); // true
console.log('extra' in developer); // true
console.log('name' in laptop); // false
console.log('extra' in laptop); // true結(jié)合 nullish 合并運算符，它可以使您的 JavaScript 代碼更清晰！
11. 檢查數(shù)組是否包含相同的值
在某些情況下，您需要知道兩個數(shù)組是否包含相同的值。
此 JavaScript 代碼段包含一個函數(shù) containSameValues，它通過排序和連接兩個數(shù)組并比較它們的字符串來執(zhí)行此操作。
const containSameValues = (arr1, arr2) =>
arr1.sort().join(',') === arr2.sort().join(',');
console.log(containSameValues([1, 2, 3], [1, 2, 3])); // true
console.log(containSameValues([1, 2, 3], [2, 3, 4])); // false
console.log(containSameValues([1, 2, 3], [1, 2, 3, 4])); // false
請記住，數(shù)組必須是可排序的才能真正正確地比較它們！
12.確保變量在指定范圍內(nèi)
這個 JavaScript 函數(shù)對我來說非常有用！
它檢查變量是否在特定范圍內(nèi)，如果不在范圍內(nèi)，它將把它限制在最接近的最小值或最大值。
const clamp = (min, max, value) => {
if (min > max) {
throw new Error('min cannot be greater than max');
}
return value < min ? min : value > max ? max : value;
};
clamp(0, 6, -5); // 0
clamp(0, 6, 20); // 6
clamp(0, 6, 3); // 313、在一行中交換兩個變量
這不是 JavaScript 函數(shù)，但它是交換兩個變量的一種非常酷的方法。
它展示了如何在一行中完成，而不是將值放入“臨時”對象（必須在其他一些編程語言中完成）
let x = 50;
let y = 100;
console.log(x, y); //50 100
[y, x] = [x, y];
console.log(x, y); //100 50
結(jié)束語
我希望您喜歡這些片段并發(fā)現(xiàn)它們對您有所幫助。如果您有任何很棒的 JavaScript 片段，請隨時在評論分享它們，以便更多的學(xué)習(xí)到，讓我們一起學(xué)習(xí)進(jìn)步。
