10 個(gè)你可能不知道的高級(jí) JavaScript 技術(shù)
共 12734字，需瀏覽 26分鐘
·
2024-09-17 17:00
JavaScript作為一種功能強(qiáng)大的開(kāi)發(fā)語(yǔ)言，擁有許多隱藏的功能，可以幫助開(kāi)發(fā)者提高開(kāi)發(fā)效率和代碼整潔度。
本文將介紹10種你可能不知道的高級(jí)JavaScript技術(shù)，幫助你提升編碼技能，寫(xiě)出更優(yōu)雅、更高效的代碼。
1. 使用別名進(jìn)行解構(gòu)
解構(gòu)是一種將數(shù)組中的值或?qū)ο蟮膶傩越獍鼮椴煌兞康恼Z(yǔ)法糖。別名則允許你在解構(gòu)過(guò)程中重命名變量，這在處理來(lái)自外部來(lái)源（如API）的數(shù)據(jù)時(shí)特別有用。
● 用例
從API獲取數(shù)據(jù)時(shí)，你想為屬性分配更有意義的名稱，以提高代碼的可讀性和可維護(hù)性。
const apiResponse = {first_name: 'John',user_age: 30,address: {city: 'New York',zip: '10001'}};const {first_name: firstName,user_age: age,address: {city: hometown,zip: postalCode}} = apiResponse;console.log(firstName); // Johnconsole.log(age); // 30console.log(hometown); // New Yorkconsole.log(postalCode); // 10001
2. 柯里化
柯里化是將接受多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換為一系列每個(gè)接受單個(gè)參數(shù)的函數(shù)的過(guò)程。
這種技術(shù)允許你創(chuàng)建更靈活和可重用的函數(shù)，這在函數(shù)式編程中特別有用，可以大大簡(jiǎn)化高度可重用的實(shí)用函數(shù)的創(chuàng)建，使代碼庫(kù)更簡(jiǎn)潔、更易于維護(hù)。
● 用例
創(chuàng)建可重用和可配置的函數(shù)以應(yīng)用折扣?？梢詣?chuàng)建一個(gè)柯里化函數(shù)，而不必為不同的折扣百分比編寫(xiě)單獨(dú)的函數(shù)。
const applyDiscount = (discount) => (price) => price - (price * discount / 100);const tenPercentOff = applyDiscount(10);const twentyPercentOff = applyDiscount(20);console.log(tenPercentOff(100)); // 90console.log(twentyPercentOff(100)); // 80const applyTax = (taxRate) => (price) => price + (price * taxRate / 100);const applyTenPercentTax = applyTax(10);console.log(applyTenPercentTax(100)); // 110console.log(applyTenPercentTax(twentyPercentOff(100))); // 88
3. 去抖動(dòng)和節(jié)流
去抖動(dòng)和節(jié)流是控制函數(shù)執(zhí)行頻率的技術(shù)。它們對(duì)于優(yōu)化事件處理程序和防止可能降低性能的過(guò)多函數(shù)調(diào)用特別有用。
去抖動(dòng)可確保僅在上次調(diào)用函數(shù)后經(jīng)過(guò)一定時(shí)間后才調(diào)用該函數(shù)。這對(duì)于搜索輸入字段等場(chǎng)景很有用，在這些場(chǎng)景中，如果希望僅在用戶停止輸入后才進(jìn)行API調(diào)用。
● 用例
優(yōu)化搜索輸入字段以減少API調(diào)用次數(shù)。這可以防止服務(wù)器過(guò)載并通過(guò)僅在用戶完成輸入后啟動(dòng)搜索來(lái)改善用戶體驗(yàn)。
function debounce(func, delay) {let timeoutId;return function(...args) {clearTimeout(timeoutId);timeoutId = setTimeout(() => func.apply(this, args), delay);};}const search = debounce((query) => {console.log(`Searching for ${query}`);// Assume an API call here}, 300);document.getElementById('searchInput').addEventListener('input', (event) => {search(event.target.value);});
節(jié)流確保在指定時(shí)間段內(nèi)最多調(diào)用一次函數(shù)。通過(guò)確保以受控間隔調(diào)用函數(shù)來(lái)防止性能問(wèn)題，減少瀏覽器負(fù)載并提供更好的用戶體驗(yàn)。
這對(duì)于想要限制函數(shù)調(diào)用頻率的滾動(dòng)事件等場(chǎng)景很有用。
● 用例
優(yōu)化滾動(dòng)事件處理以獲得更好的性能。這可以防止瀏覽器因過(guò)多的事件調(diào)用而過(guò)載，從而確保更流暢、響應(yīng)更快的交互。
function throttle(func, interval) {let lastCall = 0;return function(...args) {const now = Date.now();if (now - lastCall >= interval) {lastCall = now;func.apply(this, args);}};}const handleScroll = throttle(() => {console.log('Scrolled');// Assume complex calculations or DOM updates here}, 300);window.addEventListener('scroll', handleScroll);
4. 記憶化
記憶化是一種優(yōu)化技術(shù)，涉及緩存昂貴的函數(shù)調(diào)用的結(jié)果，并在再次出現(xiàn)相同輸入時(shí)返回緩存的結(jié)果。
這可以 避免冗余計(jì)算，顯著提高計(jì)算成本高昂的函數(shù)的性能，尤其是那些使用相同參數(shù)頻繁調(diào)用的函數(shù)。
● 用例
提高斐波那契數(shù)計(jì)算等遞歸函數(shù)的性能。如果沒(méi)有記憶化，每次調(diào)用斐波那契函數(shù)都會(huì)重復(fù)計(jì)算相同的值多次，從而導(dǎo)致指數(shù)時(shí)間復(fù)雜度。
const memoize = (fn) => {const cache = {};return (...args) => {const key = JSON.stringify(args);if (!cache[key]) {cache[key] = fn(...args);}return cache[key];};};const fibonacci = memoize((n) => {if (n <= 1) return n;return fibonacci(n - 1) + fibonacci(n - 2);});console.log(fibonacci(40)); // 102334155
5. 代理
代理對(duì)象允許您為另一個(gè)對(duì)象創(chuàng)建代理，該代理可以攔截和重新定義該對(duì)象的基本操作，例如屬性查找、賦值、枚舉、函數(shù)調(diào)用等。
這提供了一種向?qū)ο筇砑幼远x行為的強(qiáng)大方法。
● 用例
實(shí)現(xiàn)對(duì)對(duì)象屬性訪問(wèn)和賦值的驗(yàn)證和日志記錄。例如，您可以強(qiáng)制執(zhí)行類型約束并記錄訪問(wèn)嘗試，從而提供更好的控制和調(diào)試功能。
const user = {name: 'John',age: 30};const handler = {get: (target, prop) => {console.log(`Getting ${prop}`);return target[prop];},set: (target, prop, value) => {if (prop === 'age' && typeof value !== 'number') {throw new TypeError('Age must be a number');}console.log(`Setting ${prop} to ${value}`);target[prop] = value;return true;}};const proxyUser = new Proxy(user, handler);console.log(proxyUser.name); // Getting name, JohnproxyUser.age = 35; // Setting age to 35// proxyUser.age = '35'; // Throws TypeError
6. 生成器
生成器是可以退出并稍后重新進(jìn)入的函數(shù)，在重新進(jìn)入之間保持其上下文和變量綁定。
它們對(duì)于實(shí)現(xiàn)迭代器和以同步方式處理異步任務(wù)非常有用。
● 用例
實(shí)現(xiàn)迭代器以進(jìn)行自定義對(duì)象遍歷。生成器提供了一種定義自定義迭代行為的簡(jiǎn)單方法，使遍歷復(fù)雜數(shù)據(jù)結(jié)構(gòu)變得更簡(jiǎn)單。
function* objectEntries(obj) {for (let key of Object.keys(obj)) {yield [key, obj[key]];}}const user = { name: 'John', age: 30, city: 'New York' };for (let [key, value] of objectEntries(user)) {console.log(`${key}: ${value}`);}// name: John// age: 30// city: New York
7. 充分利用控制臺(tái)
增強(qiáng)調(diào)試信息的可見(jiàn)性和組織性，使診斷和解決問(wèn)題變得更加容易。正確使用控制臺(tái)方法可以通過(guò)提供清晰、有條理和詳細(xì)的日志來(lái)顯著改善調(diào)試過(guò)程。
● 用例
改進(jìn)用于調(diào)試復(fù)雜對(duì)象的日志記錄。console.table、console.group 和 console.time 等控制臺(tái)方法可以提供更結(jié)構(gòu)化和信息豐富的調(diào)試信息。
// Basic loggingconsole.log('Simple log');console.error('This is an error');console.warn('This is a warning');// Logging tabular dataconst users = [{ name: 'John', age: 30, city: 'New York' },{ name: 'Jane', age: 25, city: 'San Francisco' },];console.table(users);// Grouping logsconsole.group('User Details');console.log('User 1: John');console.log('User 2: Jane');console.groupEnd();// Timing code executionconsole.time('Timer');for (let i = 0; i < 1000000; i++) {// Some heavy computation}console.timeEnd('Timer');
8. 使用 structuredClone 進(jìn)行結(jié)構(gòu)化克隆
使用新的 structuredClone 方法深度克隆對(duì)象。
與傳統(tǒng)的淺層復(fù)制不同，結(jié)構(gòu)化克隆會(huì)創(chuàng)建對(duì)象的深層副本，確保嵌套對(duì)象也被復(fù)制。
此方法避免了 JSON.parse(JSON.stringify(obj)) 的局限性，它無(wú)法處理某些數(shù)據(jù)類型，如函數(shù)、未定義和循環(huán)引用。
● 用例
創(chuàng)建復(fù)雜對(duì)象的深層副本。當(dāng)需要復(fù)制對(duì)象以執(zhí)行不應(yīng)更改原始數(shù)據(jù)的操作時(shí)，這很有用。
const obj = {a: 1,b: { c: 2 },date: new Date(),arr: [1, 2, 3],nestedArr: [{ d: 4 }]};const clonedObj = structuredClone(obj);console.log(clonedObj);// { a: 1, b: { c: 2 }, date: 2023-06-08T00:00:00.000Z, arr: [1, 2, 3], nestedArr: [{ d: 4 }] }console.log(clonedObj === obj); // falseconsole.log(clonedObj.b === obj.b); // falseconsole.log(clonedObj.date === obj.date); // falseconsole.log(clonedObj.arr === obj.arr); // falseconsole.log(clonedObj.nestedArr[0] === obj.nestedArr[0]); // false
9. 自調(diào)用函數(shù)
自調(diào)用函數(shù)，也稱為立即調(diào)用函數(shù)表達(dá)式 (IIFE)，是在創(chuàng)建時(shí)自動(dòng)執(zhí)行的函數(shù)。
它們對(duì)于封裝代碼以避免污染全局范圍很有用，這對(duì)于維護(hù)干凈和模塊化的代碼至關(guān)重要。
● 用例
封裝代碼以避免污染全局范圍。此技術(shù)在較舊的 JavaScript 環(huán)境中特別有用，在這些環(huán)境中，塊作用域（let 和 const）不可用，或者當(dāng)需要立即執(zhí)行初始化邏輯時(shí)。
(function() {const privateVar = 'This is private';console.log('Self-invoking function runs immediately');// Initialization code})();// Private variable can't be accessed from outside// console.log(privateVar); // ReferenceError: privateVar is not defined
10. 標(biāo)記模板文字
標(biāo)記模板文字允許你自定義模板文字的處理方式。
它們對(duì)于創(chuàng)建專用模板很有用，例如用于國(guó)際化、清理HTML或生成動(dòng)態(tài)SQL查詢。
● 用例
清理HTML模板中的用戶輸入以防止XSS攻擊。此技術(shù)可確保用戶生成的內(nèi)容安全地插入DOM中，而不會(huì)執(zhí)行任何惡意腳本。
function sanitize(strings, ...values) {return strings.reduce((result, string, i) => {let value = values[i - 1];if (typeof value === 'string') {value = value.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');}return result + value + string;});}const userInput = '<script>alert("xss")</script>';const message = sanitize`User input: ${userInput}`;console.log(message); // User input: <script>alert("xss")</script>
點(diǎn)擊名片回復(fù)『編程』
即可獲取1000+編程學(xué)習(xí)手冊(cè)