20个实用且高频使用的JavaScript代码片段 | 数据处理、DOM操作、开发效率优化

以下是 20 个实用且高频使用的 JavaScript 代码片段，涵盖数据处理、DOM 操作和开发效率优化：

1. 防抖 (Debounce)

const debounce = (fn, delay = 300) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
};

// 使用：输入框搜索时减少请求频率
input.addEventListener('input', debounce(searchHandler, 500));

2. 节流 (Throttle)

const throttle = (fn, delay = 300) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall < delay) return;
    lastCall = now;
    fn.apply(this, args);
  };
};

// 使用：滚动事件优化
window.addEventListener('scroll', throttle(handleScroll, 200));

3. 深拷贝 (Deep Clone)

const deepClone = (obj) => {
  if (obj === null || typeof obj !== 'object') return obj;
  const clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
};

// 或使用一行代码（无法克隆函数/特殊对象）：
const cloned = JSON.parse(JSON.stringify(obj));

4. 数组去重

// 基础版
const uniqueArray = arr => [...new Set(arr)];

// 对象数组去重（根据 id）
const uniqueByKey = (arr, key) => [
  ...new Map(arr.map(item => [item[key], item])).values()
];

5. 扁平化数组 (Flatten)

const flatten = arr => arr.reduce(
  (acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []
);

// 或使用 ES2019 的 flat：
const deepFlatten = arr.flat(Infinity);

6. 生成随机颜色

const randomHexColor = () => 
  `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0')}`;

7. 日期格式化

const formatDate = (date, fmt = 'YYYY-MM-DD') => {
  const d = new Date(date);
  const map = {
    'YYYY': d.getFullYear(),
    'MM': String(d.getMonth() + 1).padStart(2, '0'),
    'DD': String(d.getDate()).padStart(2, '0'),
    'HH': String(d.getHours()).padStart(2, '0'),
    'mm': String(d.getMinutes()).padStart(2, '0'),
    'ss': String(d.getSeconds()).padStart(2, '0')
  };
  return fmt.replace(/(YYYY|MM|DD|HH|mm|ss)/g, match => map[match]);
};

8. 检测设备类型

const isMobile = () => 
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

9. Cookie 操作

const cookie = {
  set(name, value, days = 7) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
  },
  get(name) {
    return document.cookie
      .split('; ')
      .find(row => row.startsWith(`${name}=`))
      ?.split('=')[1];
  },
  delete(name) {
    this.set(name, '', -1);
  }
};

10. 异步重试机制

const retryAsync = async (fn, retries = 3, delay = 1000) => {
  try {
    return await fn();
  } catch (err) {
    if (retries === 0) throw err;
    await new Promise(resolve => setTimeout(resolve, delay));
    return retryAsync(fn, retries - 1, delay * 2); // 指数退避
  }
};

11. 对象属性过滤

const pick = (obj, keys) => 
  keys.reduce((acc, key) => (key in obj && (acc[key] = obj[key]), acc), {});

// 使用：pick({a:1, b:2, c:3}, ['a', 'c']) => {a:1, c:3}

12. URL 参数解析

const getUrlParams = () => 
  Object.fromEntries(new URLSearchParams(window.location.search));

// 或解析任意 URL：
const parseUrlParams = url => 
  Object.fromEntries(new URL(url).searchParams.entries());

13. 文件下载

const downloadFile = (content, fileName, type = 'text/plain') => {
  const blob = new Blob([content], { type });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
  URL.revokeObjectURL(url);
};

14. 检测暗色模式

const isDarkMode = () => 
  window.matchMedia('(prefers-color-scheme: dark)').matches;

15. 安全类型检查

const typeOf = (value) => 
  Object.prototype.toString.call(value).slice(8, -1).toLowerCase();

// 使用：
typeOf([])      // 'array'
typeOf(null)    // 'null'
typeOf(/regex/) // 'regexp'

16. 数字格式化

const formatNumber = (num, decimals = 2) => 
  num.toLocaleString('en-US', { 
    minimumFractionDigits: decimals, 
    maximumFractionDigits: decimals 
  });

// 使用：formatNumber(1234567.891) => "1,234,567.89"

17. 文本复制到剪贴板

const copyToClipboard = (text) => 
  navigator.clipboard.writeText(text).catch(() => {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  });

18. 生成 UUID

const generateUUID = () => 
  ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );

19. 函数执行时间测量

const measurePerf = async (fn, ...args) => {
  const start = performance.now();
  const result = await fn(...args);
  console.log(`耗时: ${(performance.now() - start).toFixed(2)}ms`);
  return result;
};

20. 链式属性访问保护

const safeGet = (obj, path, defaultValue = null) =>
  path.split('.').reduce((acc, key) => acc?.[key], obj) ?? defaultValue;

// 使用：
const user = { profile: { name: 'Alice' } };
safeGet(user, 'profile.age', 18); // 18

使用建议

1. 浏览器环境：优先使用现代 API（如 clipboard、URLSearchParams）
2. Node.js 适配：部分代码需调整（如 navigator 替换为 global）
3. TypeScript 增强：为关键函数添加类型注解
4. 性能关键路径：避免在循环中使用深拷贝等重型操作

这些代码片段覆盖了日常开发中 80% 的常见需求，建议根据项目需求封装成工具模块。