10 个你可能不知道的高级 JavaScript 技术
共 12734字，需浏览 26分钟
·
2024-09-17 17:00
JavaScript作为一种功能强大的开发语言，拥有许多隐藏的功能，可以帮助开发者提高开发效率和代码整洁度。
本文将介绍10种你可能不知道的高级JavaScript技术，帮助你提升编码技能，写出更优雅、更高效的代码。
1. 使用别名进行解构
解构是一种将数组中的值或对象的属性解包为不同变量的语法糖。别名则允许你在解构过程中重命名变量，这在处理来自外部来源（如API）的数据时特别有用。
● 用例
从API获取数据时，你想为属性分配更有意义的名称，以提高代码的可读性和可维护性。
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. 柯里化
柯里化是将接受多个参数的函数转换为一系列每个接受单个参数的函数的过程。
这种技术允许你创建更灵活和可重用的函数，这在函数式编程中特别有用，可以大大简化高度可重用的实用函数的创建，使代码库更简洁、更易于维护。
● 用例
创建可重用和可配置的函数以应用折扣。可以创建一个柯里化函数，而不必为不同的折扣百分比编写单独的函数。
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. 去抖动和节流
去抖动和节流是控制函数执行频率的技术。它们对于优化事件处理程序和防止可能降低性能的过多函数调用特别有用。
去抖动可确保仅在上次调用函数后经过一定时间后才调用该函数。这对于搜索输入字段等场景很有用，在这些场景中，如果希望仅在用户停止输入后才进行API调用。
● 用例
优化搜索输入字段以减少API调用次数。这可以防止服务器过载并通过仅在用户完成输入后启动搜索来改善用户体验。
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);});
节流确保在指定时间段内最多调用一次函数。通过确保以受控间隔调用函数来防止性能问题，减少浏览器负载并提供更好的用户体验。
这对于想要限制函数调用频率的滚动事件等场景很有用。
● 用例
优化滚动事件处理以获得更好的性能。这可以防止浏览器因过多的事件调用而过载，从而确保更流畅、响应更快的交互。
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. 记忆化
记忆化是一种优化技术，涉及缓存昂贵的函数调用的结果，并在再次出现相同输入时返回缓存的结果。
这可以 避免冗余计算，显著提高计算成本高昂的函数的性能，尤其是那些使用相同参数频繁调用的函数。
● 用例
提高斐波那契数计算等递归函数的性能。如果没有记忆化，每次调用斐波那契函数都会重复计算相同的值多次，从而导致指数时间复杂度。
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. 代理
代理对象允许您为另一个对象创建代理，该代理可以拦截和重新定义该对象的基本操作，例如属性查找、赋值、枚举、函数调用等。
这提供了一种向对象添加自定义行为的强大方法。
● 用例
实现对对象属性访问和赋值的验证和日志记录。例如，您可以强制执行类型约束并记录访问尝试，从而提供更好的控制和调试功能。
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. 生成器
生成器是可以退出并稍后重新进入的函数，在重新进入之间保持其上下文和变量绑定。
它们对于实现迭代器和以同步方式处理异步任务非常有用。
● 用例
实现迭代器以进行自定义对象遍历。生成器提供了一种定义自定义迭代行为的简单方法，使遍历复杂数据结构变得更简单。
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. 充分利用控制台
增强调试信息的可见性和组织性，使诊断和解决问题变得更加容易。正确使用控制台方法可以通过提供清晰、有条理和详细的日志来显著改善调试过程。
● 用例
改进用于调试复杂对象的日志记录。console.table、console.group 和 console.time 等控制台方法可以提供更结构化和信息丰富的调试信息。
// 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 进行结构化克隆
使用新的 structuredClone 方法深度克隆对象。
与传统的浅层复制不同，结构化克隆会创建对象的深层副本，确保嵌套对象也被复制。
此方法避免了 JSON.parse(JSON.stringify(obj)) 的局限性，它无法处理某些数据类型，如函数、未定义和循环引用。
● 用例
创建复杂对象的深层副本。当需要复制对象以执行不应更改原始数据的操作时，这很有用。
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. 自调用函数
自调用函数，也称为立即调用函数表达式 (IIFE)，是在创建时自动执行的函数。
它们对于封装代码以避免污染全局范围很有用，这对于维护干净和模块化的代码至关重要。
● 用例
封装代码以避免污染全局范围。此技术在较旧的 JavaScript 环境中特别有用，在这些环境中，块作用域（let 和 const）不可用，或者当需要立即执行初始化逻辑时。
(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. 标记模板文字
标记模板文字允许你自定义模板文字的处理方式。
它们对于创建专用模板很有用，例如用于国际化、清理HTML或生成动态SQL查询。
● 用例
清理HTML模板中的用户输入以防止XSS攻击。此技术可确保用户生成的内容安全地插入DOM中，而不会执行任何恶意脚本。
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>
点击名片回复『编程』
即可获取1000+编程学习手册