10 个你可能不知道的高级 JavaScript 技术

前言

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);  // John
console.log(age);        // 30
console.log(hometown);   // New York
console.log(postalCode); // 10001

为什么要使用它：它使变量名更加不言自明和直观，从而提高了代码的可读性和可维护性。

通过使用别名，可以避免命名冲突并提高代码清晰度，从而更轻松地处理复杂的数据结构。

2. 柯里化 

柯里化是将接受多个参数的函数转换为一系列每个接受单个参数的函数的过程。这种技术允许你创建更灵活和可重用的函数，这在函数式编程中特别有用。

用例：创建可重用和可配置的函数以应用折扣。可以创建一个柯里化函数，而不必为不同的折扣百分比编写单独的函数。

const applyDiscount = (discount) => (price) => price - (price * discount / 100);
const tenPercentOff = applyDiscount(10);
const twentyPercentOff = applyDiscount(20);

console.log(tenPercentOff(100)); // 90
console.log(twentyPercentOff(100)); // 80

const applyTax = (taxRate) => (price) => price + (price * taxRate / 100);
const applyTenPercentTax = applyTax(10);

console.log(applyTenPercentTax(100)); // 110
console.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, John
proxyUser.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

为什么要使用它：提供强大的工具来实现自定义迭代器并简化异步工作流。

生成器使处理复杂的迭代逻辑和异步过程变得更加容易，从而产生更易读和更易于维护的代码。

它们还可以与 co 等库一起使用，以更直接、更线性的方式管理异步操作。

7. 充分利用控制台 

用例：改进用于调试复杂对象的日志记录。console.table、console.group 和 console.time 等控制台方法可以提供更结构化和信息丰富的调试信息。

// Basic logging
console.log('Simple log');
console.error('This is an error');
console.warn('This is a warning');

// Logging tabular data
const users = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Jane', age: 25, city: 'San Francisco' },
];
console.table(users);

// Grouping logs
console.group('User Details');
console.log('User 1: John');
console.log('User 2: Jane');
console.groupEnd();

// Timing code execution
console.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); // false
console.log(clonedObj.b === obj.b); // false
console.log(clonedObj.date === obj.date); // false
console.log(clonedObj.arr === obj.arr); // false
console.log(clonedObj.nestedArr[0] === obj.nestedArr[0]); // false

为什么要使用它：提供一种内置的、高效的深度克隆对象方法，避免手动深度复制实现的陷阱和复杂性。

与 JSON.parse(JSON.stringify(obj)) 等替代方法相比，此方法更可靠，可以更好地处理复杂的数据结构。

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, '&lt;')
                   .replace(/>/g, '&gt;')
                   .replace(/"/g, '&quot;')
                   .replace(/'/g, '&#39;');
    }
    return result + value + string;
  });
}

const userInput = '<script>alert("xss")</script>';
const message = sanitize`User input: ${userInput}`;
console.log(message); // User input: &lt;script&gt;alert("xss")&lt;/script&gt;

为什么要使用它：提供一种强大的机制来控制和自定义模板文字的输出，从而实现更安全、更灵活的模板创建。

标记模板文字可用于强制执行安全性、格式化字符串和生成动态内容，从而增强代码的稳健性和多功能性。

结论 

JavaScript 是一种功能丰富的语言，可以帮助你编写更干净、更高效的代码。通过将这些高级技术融入到你的开发实践中，可以提高工作效率并增强代码的可读性。

关于优联前端

        武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接开发Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。