大家好，我是第八哥，作为一个摸爬滚打了 10 年的互联网开发老兵，我太清楚烂代码有多坑人了。
当年接手一个项目，里面的 JavaScript 代码乱得像一锅粥 —— 变量到处飘，循环嵌套三四层，一个函数写了两百多行。改个小需求，半天不敢动，生怕牵一发而动全身。
后来花了三个月重构，才把代码优化干净。不仅页面加载快了 40%，后续维护效率更是直接翻倍。
今天就掏掏心窝子，跟大家分享些实战中验证过的 JavaScript 代码优化技巧，都是能立竿见影的干货。
1. 变量声明：别再让 var 到处 “流浪”
刚学 JS 那会，我也爱用 var 声明变量。但用久了就会发现，这玩意儿太 “野” 了 —— 不仅可以重复声明，还会变量提升到作用域顶部，经常出 bug。
现在我早改用 let 和 const 了。
看个例子：
// 优化前
var name = ' 张三 ';
var age = 20;
var name = ' 李四 '; // 不报错，悄悄覆盖了！
// 优化后
const name = ' 张三 '; // 不可变用 const
let age = 20; // 可变用 let
//const name = ' 李四 '; // 直接报错，避免被意外修改记住：优先用 const，变量需要改再用 let，彻底跟 var 说拜拜。这样代码的可读性和安全性会提升一大截。
2. 循环优化：少走弯路，多省性能
循环是最容易藏性能坑的地方，尤其是数据量大的时候。
我见过有人这么写循环：
for (let i = 0; i < arr.length; i++) {
// 每次循环都要计算 arr.length，白耗性能
console.log(arr[i]);
}其实稍微改一下就好了：
const len = arr.length; // 把长度存起来，只算一次
for (let i = 0; i < len; i++) {
console.log(arr[i]);
}如果用 forEach 或者 for...of 更简洁，但要注意：数据量超大时，普通的 for 循环性能还是更胜一筹。
3. 条件判断：别再堆 if-else 了
if-else 嵌套三层以上，代码就像迷宫。我之前维护过一个表单验证逻辑，if-else 套了五层，改个规则得画流程图才敢动。
其实使用对象字面量能让条件判断清爽很多：
// 优化前
function getPrice(type) {
if (type === 'fruit') {
return 10;
} else if (type === 'vegetable') {
return 8;
} else if (type === 'meat') {
return 30;
} else {
return 0;
}
}
// 优化后
const priceMap = {
fruit: 10,
vegetable: 8,
meat: 30,
default: 0
};
function getPrice(type) {
return priceMap[type] || priceMap.default;
}是不是一眼就能看明白？新增类型时，直接往对象里加就行了，根本不用改函数结构。
4. 函数写法：越短越精越好
函数太长，就像一本书没有章节 —— 想找个功能得从头翻到尾。我现在写函数，基本原则是 “一个函数只干一件事”，超过 20 行就拆。
还有箭头函数，能让代码短不少：
// 优化前
function add(a, b) {
return a + b;
}
// 优化后
const add = (a, b) => a + b;另外，用解构赋值处理参数，能少写很多重复代码：
// 优化前
function getUserInfo(user) {
const name = user.name;
const age = user.age;
const address = user.address;
}
// 优化后
function getUserInfo({ name, age, address }) {
// 直接用 name、age、address 就行
}5. 性能优化：别让代码 “拖后腿”
代码能跑起来不算完，还得跑得快。尤其是前端，性能直接影响用户体验。
比如频繁操作 DOM 时，可以先缓存起来：
// 优化前
for (let i = 0; i < 100; i++) {
document.getElementById('list').innerHTML += <li>${i}</li>;
}
// 优化后
const list = document.getElementById('list');
let html = '';
for (let i = 0; i < 100; i++) {
html += <li>${i}</li>;
}
list.innerHTML = html;还有防抖节流，处理滚动、输入事件时必备，能避免不必要的计算：
// 防抖函数
function debounce(fn, delay) {
let timer = null;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}最后说句掏心窝的话
代码优化不是炫技，而是为了让自己和同事少受罪。
刚开始可能觉得麻烦，但养成习惯后，写出来的代码会越来越 “顺眼”，维护起来也轻松。
毕竟，好代码自己会说话，烂代码只会让人骂娘啊。
评论