在本文中，我想與您分享 13個(gè)基本的 JavaScript 函數(shù)，如果您是 Web前端開(kāi)發(fā)人員，您應(yīng)該熟悉這些函數(shù)。
您可以將本文所有 JavaScript 函數(shù)加入收藏至您的工具箱，以便在您的軟件項(xiàng)目中盡可能使用這些片段。
如果應(yīng)用，所有片段都將加快您的軟件開(kāi)發(fā)過(guò)程并節(jié)省多個(gè)小時(shí)的工作！
因此，不要浪費(fèi)更多時(shí)間讓我們開(kāi)始吧！
1. 檢索任何 JavaScript 數(shù)組中的第一個(gè)/最后一個(gè)項(xiàng)目
通常，如果使用 JavaScript，我需要數(shù)組的第一個(gè)元素。為了可用性，我創(chuàng)建了一個(gè)簡(jiǎn)單的 head 函數(shù)，我可以將其用于數(shù)組并將返回第一項(xiàng)。
作為獎(jiǎng)勵(lì)，我添加了 JavaScript last 函數(shù)，它從數(shù)組中檢索最后一項(xiàng)。
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 中的逗號(hào)運(yùn)算符
JavaScript 中的逗號(hào)運(yùn)算符起初可能很復(fù)雜。
但是，實(shí)際上，這真的很容易！
例如，使用 [x,y] 總是返回正確的操作數(shù)。請(qǐng)參閱以下 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ù)制到剪貼板
在開(kāi)發(fā)網(wǎng)站時(shí)，您有時(shí)希望將特定內(nèi)容復(fù)制到剪貼板以提高可用性。
在 JavaScript 中，這可以通過(guò)直接使用文檔（舊方法）或使用導(dǎo)航器組件（新方法）來(lái)完成。
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)是一個(gè)重要的 JavaScript 主題，之前也有詳細(xì)的分享過(guò)。
但是今天這個(gè)代碼片段顯示了簡(jiǎn)單的對(duì)象重組，僅從對(duì)象中提取兩個(gè)變量。
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. 為任何對(duì)象添加全局可用的函數(shù)
在 JavaScript 中，可以使用新方法擴(kuò)展任何對(duì)象。
以下 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']這個(gè)概念稱為原型繼承，本文對(duì)此進(jìn)行了詳細(xì)介紹。
6. 在 JavaScript 中將數(shù)組本地轉(zhuǎn)換為對(duì)象
JavaScript 有一個(gè)原生函數(shù) Object.fromEntries，可用于將任何輸入數(shù)組轉(zhuǎn)換為對(duì)象。
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. 遞歸得到一個(gè)數(shù)的斐波那契
遞歸是每個(gè)軟件開(kāi)發(fā)者必須知道的概念！
此 JavaScript 片段顯示了以遞歸方式實(shí)現(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. 檢查約會(huì)對(duì)象是否在周末
這個(gè) JavaScript 片段顯示了檢查每個(gè) Date 對(duì)象是否為周末是多么容易。
您可以更改周數(shù)（6 和 0）并將其替換為任何其他工作日編號(hào)以檢查不同的日子。
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 小時(shí)制時(shí)間格式轉(zhuǎn)換為 am/pm
使用不同的時(shí)間格式是一件痛苦的事情。
這個(gè)簡(jiǎn)單的 JavaScript 片段顯示了一個(gè)將任何 24 小時(shí)制時(shí)間轉(zhuǎn)換為上午/下午時(shí)間的函數(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. 檢查對(duì)象中是否存在屬性
有時(shí)你想在打印或使用它們之前檢查屬性是否存在。
JavaScript 沒(méi)有在使用它之前執(zhí)行 if property !== undefined ，而是有一個(gè)內(nèi)置函數(shù)來(lái)執(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 合并運(yùn)算符，它可以使您的 JavaScript 代碼更清晰！
11. 檢查數(shù)組是否包含相同的值
在某些情況下，您需要知道兩個(gè)數(shù)組是否包含相同的值。
此 JavaScript 代碼段包含一個(gè)函數(shù) containSameValues，它通過(guò)排序和連接兩個(gè)數(shù)組并比較它們的字符串來(lái)執(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
請(qǐng)記住，數(shù)組必須是可排序的才能真正正確地比較它們！
12.確保變量在指定范圍內(nèi)
這個(gè) JavaScript 函數(shù)對(duì)我來(lái)說(shuō)非常有用！
它檢查變量是否在特定范圍內(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、在一行中交換兩個(gè)變量
這不是 JavaScript 函數(shù)，但它是交換兩個(gè)變量的一種非常酷的方法。
它展示了如何在一行中完成，而不是將值放入“臨時(shí)”對(duì)象（必須在其他一些編程語(yǔ)言中完成）
let x = 50;
let y = 100;
console.log(x, y); //50 100
[y, x] = [x, y];
console.log(x, y); //100 50
結(jié)束語(yǔ)
我希望您喜歡這些片段并發(fā)現(xiàn)它們對(duì)您有所幫助。如果您有任何很棒的 JavaScript 片段，請(qǐng)隨時(shí)在評(píng)論分享它們，以便更多的學(xué)習(xí)到，讓我們一起學(xué)習(xí)進(jìn)步。
