在日常的前端项目里我经常会被一堆重复的「写法」绊倒。每当我把这些小窍门贴在脑后代码就像被打了鸡血一样顺畅。下面把我在真实项目中屡试不爽的技巧搬出来配上一点点情绪化的描述，希望你读完后也Neng「哇」一声。

// 对象解构
const user = { name: '小明', age: 28, city: '上海' };
const { name, age } = user;
// 数组解构 + 默认值
const arr = ;
const  = arr;
console.log; // 10 20

Ru果你曾经在循环里写 let a = obj.a; let b = obj.b; 那种机械感，一定会爱上这套语法。

// 可选链 
const deep = { a: { b: { c: 5 } } };
console.log; // 5
console.log;   // undefined
// 空值合并 
const count = 0;
console.log; // 0   
console.log; // 默认

const add =  => a + b;
const getUser = id => ;

记住：Ru果返回的是对象字面量，需要外层包裹圆括号，否则会被误认为块语句。

const raw = ;
const uniq = ;
// 

// ES2019 原生 flat
const nested = ]]];
console.log); // 
// 手写递归
function flatten{
    return arr.reduce=> 
        Array.isArray ? acc.concat) : acc.concat
    , );
}
console.log);

const nums = ;
// 求和
const sum = nums.reduce=>s+n,0);
// Zui大、Zui小
const max = Math.max;
const min = Math.min;

// 
运算符
const o1 = { a:1 };
const o2 = { b:2 };
const merged = {...o1,...o2}; // {a:1,b:2}
// Object.assign 同理
const merged2 = Object.assign;
// 简易深拷贝
function deepClone{
    return JSON.parse);
}

function buildUser{
    return {
        id: Date.now,
        : value,
        : new Date
    };
}
console.log);
/*
{
  id:1623456789012,
  name:'李四',
  nameTime:2024-03-01T...
}
*/

const cfg = { host:'localhost', port:8080 };
Object.entries.forEach=>{
    console.log;
});

// 防抖：用户停止输入后才触发搜索
function debounce{
    let timer=null;
    return =>{
        clearTimeout;
        timer=setTimeout=>fn.apply,delay);
    };
}
// 节流：滚动事件每200msZui多执行一次
function throttle{
    let last=0;
    return =>{
        const now=Date.now;
        if{
            last=now;
            fn.apply;
        }
    };
}

let start=null;
function step{
    if start=timestamp;
    const progress=timestamp-start;
    element.style.transform=`translateX`;
    if requestAnimationFrame;
}
requestAnimationFrame;

它Neng让浏览器在每一次绘制前统一调度，大幅降低卡顿概率。

function memoize{
    const cache=new Map;
    return function{
        const key=args.join;
        if) return cache.get;
        const result=fn.apply;
        cache.set;
        return result;
    };
}
const fib=memoize{
    if return n;
    return fib+fib;
});
console.log); // 秒级响应

// 随机整数 
function randInt{
    return Math.floor*)+min;
}
// 随机字符
function randStr{
    const pool='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    return Array.from=>pool).join;
}
console.log, randStr);

function fmtDate{
    const d=new Date;
    const Y=d.getFullYear;
    const M=String+1).padStart;
    const D=String).padStart;
    const H=String).padStart;
    const Mins=String).padStart;
    const S=String).padStart;
    return `${Y}-${M}-${D} ${H}:${Mins}:${S}`;
}
console.log));

function deepCloneFull{
   ifreturn src;
   if return new Date;
   if return new RegExp;
   const target=Array.isArray?:{};
   for{
       if){
           target=deepCloneFull;
       }
   }
   return target;
}
let obj={a:{b:}};
let copy=deepCloneFull;
copy.a.b.c.setFullYear;
console.log); // 原始对象仍保持原年份

#TODO 注释规范：在关键业务函数前加上「🚀」或「⚡️」标记，方便团队快速定位。

#日志彩色输出：使用 %c

console.log

#错误捕获统一封装：写一个 alertError, 把所有异常dou funnel 到这里后期改 UI 时只改这一个地方。

#模块化思维：即使是单文件项目，也尽量把工具函数抽成独立模块，保持「职责单一」。这样以后迁移到 TypeScript 时几乎零成本。

#阅读代码的仪式：Pull Request 前先打开 VSCode 的「Render whitespace」功Neng，kan有没有多余的空格或 TAB，让代码kan起来geng整洁。