想到啥写啥的前端小技巧

一、ES6+ 魔法语法

1. 解构赋值的隐藏技能

javascript 复制代码

// 交换变量（无需临时变量）
let a = 1, b = 2;
[a, b] = [b, a]; 

// 嵌套对象解构 + 重命名
const { data: { list: todoList } } = await fetchAPI(); 

// 解构函数参数
const parseUser = ({ name: userName, age = 18 }) => {
  console.log(`${userName} (${age}岁)`);
};

2. 数组操作的极简主义

javascript 复制代码

// 快速生成序列数组
const range = (n) => [...Array(n).keys()]; // [0,1,2..n-1]

// 数组洗牌（Fisher-Yates算法）
const shuffle = arr => 
  arr.slice().sort(() => Math.random() - 0.5);

// 数组去重（支持对象）
const unique = arr => 
  [...new Map(arr.map(item => [JSON.stringify(item), item])].map(([,v]) => v);

二、函数式编程精髓

1. 柯里化的优雅实现

scss 复制代码

const curry = (fn, arity = fn.length) => 
  (next = (...args) => 
    args.length >= arity 
      ? fn(...args) 
      : (...more) => next(...args, ...more)
  )();

// 使用示例
const add = curry((a, b, c) => a + b + c);
add(1)(2)(3); // 6
add(1, 2)(3); // 6

2. 管道运算符的替代方案

javascript 复制代码

const pipe = (...fns) => 
  (initialVal) => fns.reduce((val, fn) => fn(val), initialVal);

// 组合使用
const processData = pipe(
  filterInvalid,
  formatDate,
  sortByPrice
);

三、性能优化黑科技

1. 记忆化缓存（Memoization）

scss 复制代码

const memoize = (fn) => {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    return cache.has(key) 
      ? cache.get(key)
      : cache.set(key, fn(...args)).get(key);
  };
};

// 缓存斐波那契计算
const fib = memoize(n => n <= 1 ? n : fib(n-1) + fib(n-2));

2. 防抖与节流的终极方案

ini 复制代码

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

const throttle = (fn, interval) => {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn(...args);
      lastTime = now;
    }
  };
};

四、现代浏览器API妙用

1. 剪切板操作

javascript 复制代码

// 安全写入剪切板
const copyToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};

// 读取剪切板内容
const readClipboard = async () => {
  return await navigator.clipboard.readText();
};

2. 本地存储的高级用法

javascript 复制代码

// 带过期时间的localStorage
const storage = {
  set(key, value, ttl = 3600) {
    const item = {
      value,
      expires: Date.now() + ttl * 1000
    };
    localStorage.setItem(key, JSON.stringify(item));
  },
  get(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;
    
    const item = JSON.parse(itemStr);
    if (Date.now() > item.expires) {
      localStorage.removeItem(key);
      return null;
    }
    return item.value;
  }
};

五、代码整洁之道

1. 可选链与空值合并的黄金组合

ini 复制代码

// 安全访问嵌套属性
const userName = user?.profile?.contacts?.phone ?? '未知';

// 函数调用保护
api.getData?.().then(...);

2. 利用标签模板处理字符串

ini 复制代码

// SQL防注入模板
const sql = (strings, ...values) => {
  let query = '';
  strings.forEach((str, i) => {
    query += str;
    if (i < values.length) {
      query += escape(values[i]); // 自定义转义逻辑
    }
  });
  return query;
};

// 使用方式
const userId = 123;
const query = sql`SELECT * FROM users WHERE id = ${userId}`;