JavaScript实用技巧与编程模式

前言

JavaScript作为前端开发的核心语言，掌握其高效编程技巧和常用设计模式对提升代码质量和开发效率至关重要。本文整理了JavaScript开发中的实用技巧、常见设计模式和性能优化方法，希望能帮助开发者编写出更加高效、优雅的JavaScript代码。

基础语法技巧

解构赋值的高级用法

解构赋值是ES6引入的一种语法糖，可以大大简化代码。

// 基础对象解构
const person = { name: 'John', age: 30, job: 'Developer' };
const { name, age } = person;
console.log(name, age); // "John" 30

// 设置默认值
const { name, age, salary = 50000 } = person;

// 重命名
const { name: fullName, job: profession } = person;
console.log(fullName, profession); // "John" "Developer"

// 嵌套解构
const user = {
  id: 1,
  details: {
    firstName: 'John',
    lastName: 'Doe',
    contact: {
      email: 'john@example.com'
    }
  }
};
const { details: { firstName, contact: { email } } } = user;
console.log(firstName, email); // "John" "john@example.com"

// 数组解构
const rgb = [255, 200, 0];
const [red, green, blue] = rgb;

// 数组解构与剩余参数
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first, rest); // 1 [2, 3, 4, 5]

// 解构用于函数参数
function displayUser({ name, age, job = 'Unknown' }) {
  console.log(`${name} is ${age} years old and works as ${job}`);
}
displayUser(person);

简化条件判断

使用逻辑运算符和三元运算符可以简化条件判断。

// 使用逻辑运算符代替if语句
// 代替 if (enabled) { doSomething(); }
enabled && doSomething();

// 使用||设置默认值
// 代替 if (value === undefined) { value = defaultValue; }
const result = value || defaultValue;

// 使用??运算符（空值合并）
// 只有当左侧为null或undefined时才使用右侧值
const result = value ?? defaultValue;

// 三元运算符嵌套
const type = value === 0 ? 'zero' : value > 0 ? 'positive' : 'negative';

// 使用对象映射代替if-else链或switch
const actions = {
  'add': (a, b) => a + b,
  'subtract': (a, b) => a - b,
  'multiply': (a, b) => a * b,
  'divide': (a, b) => a / b
};

// 使用映射代替switch
function calculate(action, a, b) {
  return actions[action] ? actions[action](a, b) : 'Invalid action';
}

数组和对象操作技巧

// 数组去重
const uniqueArray = [...new Set([1, 2, 2, 3, 3, 3])];
console.log(uniqueArray); // [1, 2, 3]

// 数组合并
const array1 = [1, 2];
const array2 = [3, 4];
const combinedArray = [...array1, ...array2];

// 对象合并
const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const combinedObject = { ...object1, ...object2 };

// 创建对象副本并修改某些属性
const updatedPerson = { ...person, age: 31, job: 'Senior Developer' };

// 使用reduce进行数据转换
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

// 转换为id为键的对象
const usersById = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});
console.log(usersById[2].name); // "Jane"

函数编程技巧

高阶函数

高阶函数是接受函数作为参数或返回函数的函数，是函数式编程的核心。

// 函数柯里化 (Currying)
const curry = (fn) => {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
};

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6

// 函数组合 (Composition)
const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);

const double = (x) => x * 2;
const square = (x) => x * x;
const addOne = (x) => x + 1;

const compute = compose(addOne, square, double);
console.log(compute(3)); // ((3*2)^2)+1 = 37

// 部分应用 (Partial Application)
function partial(fn, ...args) {
  return function(...moreArgs) {
    return fn(...args, ...moreArgs);
  };
}

function greet(greeting, name) {
  return `${greeting}, ${name}!`;
}

const sayHello = partial(greet, 'Hello');
console.log(sayHello('John')); // "Hello, John!"

闭包和私有变量

闭包允许函数访问其定义时的作用域，可以用来创建私有变量。

// 基本闭包示例
function createCounter() {
  let count = 0;
  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    },
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount()); // 1

// 使用闭包创建私有方法
function createPerson(name, age) {
  // 私有变量
  let _name = name;
  let _age = age;
  
  // 私有方法
  function _validateAge(age) {
    return typeof age === 'number' && age > 0;
  }
  
  // 返回的公共API
  return {
    getName() {
      return _name;
    },
    getAge() {
      return _age;
    },
    setAge(newAge) {
      if (_validateAge(newAge)) {
        _age = newAge;
        return true;
      }
      return false;
    }
  };
}

const john = createPerson('John', 30);
console.log(john.getName()); // "John"
console.log(john.setAge(31)); // true
console.log(john.setAge(-5)); // false - 私有验证失败

异步编程技巧

Promise链和错误处理

// Promise链
fetchUser(userId)
  .then(user => fetchUserPosts(user.id))
  .then(posts => {
    console.log(posts);
    return posts;
  })
  .catch(error => {
    console.error('Error fetching data:', error);
    return []; // 提供默认值继续链
  })
  .finally(() => {
    console.log('Operation completed');
  });

// Promise.all - 并行操作
const promises = [
  fetchUser(1),
  fetchUser(2),
  fetchUser(3)
];

Promise.all(promises)
  .then(users => {
    console.log(users); // 所有用户数据的数组
  })
  .catch(error => {
    console.error('One of the requests failed:', error);
  });

// Promise.race - 竞态操作
const timeout = new Promise((_, reject) => {
  setTimeout(() => reject(new Error('Request timed out')), 5000);
});

Promise.race([fetchData(), timeout])
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Promise.allSettled - 等待所有Promise解决（无论成功或失败）
Promise.allSettled([fetchUser(1), fetchUser(999)])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('Success:', result.value);
      } else {
        console.log('Error:', result.reason);
      }
    });
  });

Async/Await最佳实践

// 基本使用
async function fetchUserData(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchUserPosts(user.id);
    const followers = await fetchUserFollowers(user.id);
    
    return {
      user,
      posts,
      followers
    };
  } catch (error) {
    console.error('Error fetching user data:', error);
    throw error; // 或返回默认值
  }
}

// 并行请求
async function fetchUserDataParallel(userId) {
  try {
    const user = await fetchUser(userId);
    
    // 并行请求
    const [posts, followers] = await Promise.all([
      fetchUserPosts(user.id),
      fetchUserFollowers(user.id)
    ]);
    
    return { user, posts, followers };
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// 处理循环中的异步操作
async function processItems(items) {
  // 串行处理（一个接一个）
  for (const item of items) {
    await processItem(item);
  }
  
  // 并行处理所有项
  const promises = items.map(item => processItem(item));
  const results = await Promise.all(promises);
  
  // 控制并发数量
  async function processInBatches(items, batchSize) {
    for (let i = 0; i < items.length; i += batchSize) {
      const batch = items.slice(i, i + batchSize);
      const batchPromises = batch.map(item => processItem(item));
      await Promise.all(batchPromises);
      console.log(`Processed batch ${i / batchSize + 1}`);
    }
  }
  
  await processInBatches(items, 3);
}

// 自动重试
async function fetchWithRetry(url, retries = 3, delay = 1000) {
  try {
    return await fetch(url);
  } catch (error) {
    if (retries === 0) throw error;
    console.log(`Retrying... Attempts left: ${retries}`);
    await new Promise(resolve => setTimeout(resolve, delay));
    return fetchWithRetry(url, retries - 1, delay * 2);
  }
}

设计模式实践

模块模式

使用IIFE(立即调用函数表达式)创建封装的模块。

// 基本模块模式
const calculator = (function() {
  // 私有变量
  let result = 0;
  
  // 私有函数
  function validate(n) {
    return typeof n === 'number';
  }
  
  // 公共API
  return {
    add(n) {
      if (validate(n)) {
        result += n;
      }
      return this;
    },
    subtract(n) {
      if (validate(n)) {
        result -= n;
      }
      return this;
    },
    multiply(n) {
      if (validate(n)) {
        result *= n;
      }
      return this;
    },
    getResult() {
      return result;
    },
    reset() {
      result = 0;
      return this;
    }
  };
})();

calculator.add(5).multiply(2).subtract(3);
console.log(calculator.getResult()); // 7

观察者模式

使用观察者模式创建发布-订阅系统。

class EventEmitter {
  constructor() {
    this.events = {};
  }
  
  // 订阅事件
  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
    return this;
  }
  
  // 取消订阅
  off(event, listener) {
    if (!this.events[event]) return this;
    
    this.events[event] = this.events[event].filter(
      l => l !== listener
    );
    return this;
  }
  
  // 只订阅一次
  once(event, listener) {
    const onceWrapper = (...args) => {
      listener(...args);
      this.off(event, onceWrapper);
    };
    return this.on(event, onceWrapper);
  }
  
  // 触发事件
  emit(event, ...args) {
    if (!this.events[event]) return false;
    
    this.events[event].forEach(listener => {
      listener(...args);
    });
    return true;
  }
}

// 使用示例
const emitter = new EventEmitter();

function messageHandler(message) {
  console.log(`Received: ${message}`);
}

emitter.on('message', messageHandler);
emitter.emit('message', 'Hello World'); // "Received: Hello World"
emitter.off('message', messageHandler);
emitter.emit('message', 'Not received'); // 不会输出任何内容

单例模式

确保一个类只有一个实例，并提供一个全局访问点。

class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    
    // 初始化代码
    this.data = [];
    Singleton.instance = this;
  }
  
  add(item) {
    this.data.push(item);
  }
  
  get(id) {
    return this.data.find(item => item.id === id);
  }
}

// 测试
const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // true

instance1.add({ id: 1, name: 'Item 1' });
console.log(instance2.get(1)); // { id: 1, name: 'Item 1' }

性能优化

防抖和节流

防抖和节流是控制函数执行频率的两种方法。

// 防抖 - 延迟执行，直到停止触发一段时间后才执行
function debounce(func, wait) {
  let timeout;
  
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 使用防抖处理搜索输入
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(function() {
  console.log('Searching for:', this.value);
  // 执行搜索操作
}, 500);

searchInput.addEventListener('input', debouncedSearch);

// 节流 - 限制函数在一定时间内只执行一次
function throttle(func, limit) {
  let inThrottle;
  
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

// 使用节流处理滚动事件
const throttledScroll = throttle(function() {
  console.log('Scroll position:', window.scrollY);
  // 执行滚动相关操作
}, 300);

window.addEventListener('scroll', throttledScroll);

内存管理和优化

// 避免内存泄漏
function setupEventListeners() {
  const button = document.getElementById('button');
  let counter = 0;
  
  // 错误 - 闭包会持有counter和button引用
  button.addEventListener('click', function() {
    counter++;
    console.log(`Clicked ${counter} times`);
  });
  
  // 正确 - 使用移除事件监听器
  function handleClick() {
    counter++;
    console.log(`Clicked ${counter} times`);
    
    if (counter >= 5) {
      button.removeEventListener('click', handleClick);
      counter = null; // 释放引用
    }
  }
  
  button.addEventListener('click', handleClick);
}

// 使用WeakMap/WeakSet存储对象关联数据
// WeakMap/WeakSet允许对象被垃圾回收
const cache = new WeakMap();

function processObject(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  
  const result = expensiveOperation(obj);
  cache.set(obj, result);
  return result;
}

// 避免过度使用闭包
function createFunctions() {
  const result = [];
  
  // 错误 - 每个函数都有自己的闭包，持有i的引用
  for (var i = 0; i < 1000; i++) {
    result.push(function() { return i; });
  }
  
  // 正确 - 使用IIFE创建一个新的作用域
  for (var i = 0; i < 1000; i++) {
    result.push((function(num) {
      return function() { return num; };
    })(i));
  }
  
  // 更好 - 使用let创建块级作用域
  for (let i = 0; i < 1000; i++) {
    result.push(function() { return i; });
  }
  
  return result;
}

代码拆分和延迟加载

// 动态导入模块
button.addEventListener('click', async () => {
  // 仅在需要时加载模块
  const { default: Calculator } = await import('./calculator.js');
  const calc = new Calculator();
  console.log(calc.add(5, 3));
});

// 组件懒加载 (React示例)
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <div>
      <React.Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </React.Suspense>
    </div>
  );
}

// 使用IntersectionObserver实现图片懒加载
function setupLazyLoading() {
  const images = document.querySelectorAll('img[data-src]');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        observer.unobserve(img);
      }
    });
  });
  
  images.forEach(img => observer.observe(img));
}

现代JavaScript特性

可选链操作符

// 传统方式
let city;
if (user && user.address && user.address.city) {
  city = user.address.city;
}

// 使用可选链
city = user?.address?.city;

// 与方法调用结合
const result = user?.login?.();

// 与数组结合
const firstElement = array?.[0];

空值合并运算符

// 传统方式
const name = user.name !== undefined && user.name !== null ? user.name : 'Anonymous';

// 使用空值合并运算符
const name = user.name ?? 'Anonymous';

// 与可选链结合
const cityName = user?.address?.city ?? 'Unknown City';

私有类字段

class User {
  // 公共字段
  role = 'user';
  
  // 私有字段 (使用#前缀)
  #id;
  #password;
  
  constructor(id, password) {
    this.#id = id;
    this.#password = password;
  }
  
  // 公共方法
  validatePassword(input) {
    return this.#verifyPassword(input);
  }
  
  // 私有方法
  #verifyPassword(input) {
    return input === this.#password;
  }
}

const user = new User(1, 'secret');
console.log(user.role); // "user"
// console.log(user.#id); // 语法错误 - 无法从外部访问私有字段

测试和调试技巧

断言和日志技巧

// 简单断言函数
function assert(condition, message) {
  if (!condition) {
    throw new Error(message || 'Assertion failed');
  }
}

function divide(a, b) {
  assert(typeof a === 'number' && typeof b === 'number', 'Both arguments must be numbers');
  assert(b !== 0, 'Cannot divide by zero');
  return a / b;
}

// 条件日志
const DEBUG = process.env.NODE_ENV !== 'production';

function debug(...args) {
  if (DEBUG) {
    console.log('[DEBUG]', ...args);
  }
}

// 创建格式化日志
function createLogger(namespace) {
  return {
    log: (...args) => console.log(`[${namespace}]`, ...args),
    warn: (...args) => console.warn(`[${namespace}:WARN]`, ...args),
    error: (...args) => console.error(`[${namespace}:ERROR]`, ...args),
    info: (...args) => console.info(`[${namespace}:INFO]`, ...args)
  };
}

const logger = createLogger('AuthService');
logger.log('User login attempt');
logger.error('Authentication failed', { userId: 123 });

// 使用console.table展示表格数据
console.table([
  { name: 'John', age: 30, role: 'Admin' },
  { name: 'Jane', age: 25, role: 'User' },
  { name: 'Bob', age: 40, role: 'User' }
]);

// 使用console.time测量性能
console.time('operation');
// 执行某些操作...
console.timeEnd('operation'); // 输出: "operation: 1234.56ms"

调试工具和技巧

// 使用debugger语句
function complexFunction(data) {
  // 当条件满足时触发断点
  if (data.critical) {
    debugger; // 浏览器会在此处暂停执行
  }
  
  // 处理逻辑...
}

// 监控变量变化
let value = 0;

function watchValue(newValue) {
  const oldValue = value;
  value = newValue;
  
  console.log(`Value changed from ${oldValue} to ${value}`);
  
  // 可以在这里添加断点或其他监控逻辑
}

// 错误边界和全局错误处理
window.addEventListener('error', (event) => {
  console.error('Global error caught:', event.error);
  // 发送错误到监控服务
});

// Promise错误处理
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
  // 发送错误到监控服务
});

总结

本文介绍了JavaScript编程中的各种实用技巧和最佳实践，包括现代语法特性、函数式编程、异步编程和性能优化等方面。掌握这些技巧可以帮助开发者编写出更加简洁、高效和可维护的JavaScript代码。

随着JavaScript语言的不断发展，我们会持续更新本文，加入更多现代化的JavaScript技巧和最佳实践。