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

为什么使用： 柯里化使得函数更模块化、可组合，简化了实用函数的创建。

3. 防抖与节流 ⏱️

防抖和节流可以控制函数调用频率，优化事件处理以避免性能瓶颈。

防抖

场景： 防止用户在输入框输入时过多 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}`);
}, 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('滚动了');
}, 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(`获取 ${prop}`);
    return target[prop];
  },
  set: (target, prop, value) => {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('年龄必须是数字');
    }
    console.log(`设置 ${prop} 为 ${value}`);
    target[prop] = value;
    return true;
  }
};

const proxyUser = new Proxy(user, handler);
console.log(proxyUser.name); // 获取 name, John
proxyUser.age = 35; // 设置 age 为 35

为什么使用： 代理让你灵活地控制对象行为，适合验证、日志记录等场景。

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}`);
}

为什么使用： 简化复杂迭代逻辑，生成器适合异步操作和自定义迭代。

7. 控制台的高级用法 🖥️

console.table、console.group 等方法使调试更直观。

// 记录表格数据
const users = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Jane', age: 25, city: 'San Francisco' },
];
console.table(users);

为什么使用： 提供清晰、有序的日志，方便调试复杂数据。

8. structuredClone 深度克隆 🧬

structuredClone 是一种内置的深度克隆对象方法。

const obj = { a: 1, b: { c: 2 }, date: new Date() };
const clonedObj = structuredClone(obj);

为什么使用： structuredClone 是高效的深拷贝方法，适合复杂数据结构。

9. 自执行函数 🔄

自执行函数可立即执行代码，避免全局污染。

(function() {
  const privateVar = 'This is private';
  console.log('自执行函数立即运行');
})();

为什么使用： 保持代码整洁，避免全局变量冲突。

10. 标记模板字面量 🏷️

标记模板字面量可以自定义模板字面量的处理方式。

function sanitize(strings, ...values) {
  return strings.reduce((result, string, i) => {
    let value = values[i - 1];
    if (typeof value === 'string') {
      value = value.replace(/&/g, '&amp;')
                   .replace(/</g, '&lt;')
                   .replace(/>/g, '&gt;');
    }
    return result + value + string;
  });
}

const userInput = '<script>alert("xss")</script>';
const message = sanitize`用户输入：${userInput}`;