当前位置：首页 > 全部内容 > 正文

JavaScript代码重构与优化实战指南

作者：霁月

时间：2026-10-25

浏览：116

本文基于《重构：改善既有代码的设计》核心思想，详解JavaScript代码优化的关键技巧。内容涵盖提炼函数、参数化消除重复、使用策略模式替换复杂分支、提炼与内联变量、拆分阶段与循环、分解及合并条件表达式，以及使用卫语句和分离查询修改函数。通过具体代码示例，帮助开发者提升代码可读性与可维护性。

文章目录

引言

首先明确一个核心观点：

编写代码的首要目的是让人易于阅读和理解，其次才是让机器执行。

代码与语言文字类似，本质是思想与信息的载体，清晰的表达能极大提升沟通效率。本文内容主要源自《重构：改善既有代码的设计(第2版)》，下面直接通过代码示例展开讨论。

提炼函数

概念解析

将一段具有明确功能的代码块提取出来，封装为一个独立的函数，并以该功能的作用来命名此函数。

适用场景

当阅读一段代码需要花费大量精力才能理解其意图时，应当将其提炼为函数，并根据其实际行为进行命名。这样在后续阅读代码时，可以通过函数名直接明了地知晓其用途。

操作方法

// ==================重构前==================
function printOwing(invoice) {
    let outstanding = 0;
    console.log("***********************");
    console.log("**** Customer Owes ****");
    console.log("***********************");
}
// ==================重构后==================
function printOwing(invoice) {
    let outstanding = 0;
    printBanner()
}
function printBanner() {
    console.log("***********************");
    console.log("**** Customer Owes ****");
    console.log("***********************");
}

函数参数化

概念解析

通过引入参数传入不同的值，从而消除代码中的重复部分。

适用场景

当发现两个函数的逻辑高度相似，仅存在部分字面量值的差异时，可以将它们合并为一个函数，并通过参数传递不同的值，以此消除重复代码。

操作方法

// ==================重构前==================
// 点击异常项
clickFaultsItem(item){
    this.$u.route({
        url:'xxx',
        params:{
            id: item.id,
            type: '异常'
        }
    })
}
// 点击正常项
clickNormalItem(item){
    this.$u.route({
        url:'xxx',
        params:{
            id: item.id,
            type: '正常'
        }
    })
}
// ==================重构后==================
clickItem(id, type){
     this.$u.route({
        url:'xxx',
        params:{id, type}
    })
}

使用策略模式替换“胖”分支

概念解析

利用策略模式替代冗长的if-else或switch-case语句。

适用场景

当if-else或switch-case的分支数量过多时，可以使用策略模式将各个分支逻辑独立出来，使代码结构更清晰。

操作方法

// ==================重构前==================
function getPrice(tag, originPrice) {
    // 新人价格
    if(tag === 'newUser') {
        return originPrice > 50.1 ? originPrice - 50 : originPrice
    }
    // 返场价格
    if(tag === 'back') {
         return originPrice > 200 ? originPrice - 50 : originPrice
    }
    // 活动价格
    if(tag === 'activity') {
        return originPrice > 300 ? originPrice - 100 : originPrice
    }
}
// ==================重构后==================
const priceHandler = {
    newUser(originPrice){
        return originPrice > 50.1 ? originPrice - 50 : originPrice
    },
    back(originPrice){
        return originPrice > 200 ? originPrice - 50 : originPrice
    },
    activity(originPrice){
         return originPrice > 300 ? originPrice - 100 : originPrice
    }
}
function getPrice(tag, originPrice){
    return priceHandler[tag](originPrice)
}

提炼变量

概念解析

将复杂的表达式提炼为一个局部变量，以替换原表达式。

适用场景

当某个表达式过于复杂且难以阅读时，可以提炼出一个局部变量，将表达式分解为更易管理的形式。此外，这样的变量在调试过程中也更为方便。

操作方法

// ==================重构前==================
function price(order) {
    //价格 = 商品原价 - 数量满减价 + 运费
    return order.quantity * order.price -
    Math.max(0, order.quantity - 500) * order.price * 0.05 +
    Math.min(order.quantity * order.price * 0.1, 100);
}
// ==================重构后==================
function price(order) {
    const basePrice = order.quantity * order.price;
    const quantityDiscount = Math.max(0, order.quantity - 500) * order.price * 0.05;
    const shipping = Math.min(basePrice * 0.1, 100);
    return basePrice - quantityDiscount + shipping;
}

内联变量

概念解析

使用变量右侧的表达式来替换变量本身，这是提炼变量的逆向操作。

适用场景

当变量的命名并不比其对应的表达式更具表现力时，可以采用此方法。

操作方法

// ==================重构前==================
let basePrice = anOrder.basePrice;
return (basePrice > 1000);
// ==================重构后==================
return anOrder.basePrice > 1000

封装变量

概念解析

对变量进行封装，仅允许通过特定的函数进行访问。

适用场景

对于所有作用域超出单个函数的可变数据，均可采用封装变量的方法。数据被使用的范围越广，就越值得投入精力对其进行合理的封装。

操作方法

// ==================重构前==================
let defaultOwner = {firstName: "Martin", lastName: "Fowler"};
// 访问
spaceship.owner = defaultOwner;
// 赋值
defaultOwner = {firstName: "Rebecca", lastName: "Parsons"};
// ==================重构后==================
function getDefaultOwner() {return defaultOwner;}
function setDefaultOwner(arg) {defaultOwner = arg;}
// 访问
spaceship.owner = getDefaultOwner();
// 赋值
setDefaultOwner({firstName: "Rebecca", lastName: "Parsons"});

拆分阶段

概念解析

将一大段连续的行为拆分为多个顺序执行的独立阶段。

适用场景

当发现一段代码同时处理两件不同的事情时，可以将其拆分为各自独立的模块。这样在后续需要修改时，可以单独处理每个模块，互不影响。

操作方法

// ==================重构前==================
function priceOrder(product, quantity, shippingMethod) {
    const basePrice = product.basePrice * quantity;
    const discount = Math.max(quantity - product.discountThreshold, 0)
    * product.basePrice * product.discountRate;
    const shippingPerCase = (basePrice > shippingMethod.discountThreshold)
    ? shippingMethod.discountedFee : shippingMethod.feePerCase;
    const shippingCost = quantity * shippingPerCase;
    const price = basePrice - discount + shippingCost;
    return price;
}
/*
该例中前两行代码根据商品信息计算订单中与商品相关的价格， 随后的两行则根据配送信息计算配送成本。
将这两块逻辑相对独立后，后续如果修改价格和配送的计算逻辑则只需修改对应模块即可。
*/
// ==================重构后==================
function priceOrder(product, quantity, shippingMethod) {
    const priceData = calculatePricingData(product, quantity);
    return applyShipping(priceData, shippingMethod);
}
// 计算商品价格
function calculatePricingData(product, quantity) {
    const basePrice = product.basePrice * quantity;
    const discount = Math.max(quantity - product.discountThreshold, 0)
    * product.basePrice * product.discountRate;
    return {basePrice, quantity, discount};
}
// 计算配送价格
function applyShipping(priceData, shippingMethod) {
    const shippingPerCase = (priceData.basePrice > shippingMethod.discountThreshold)
    ? shippingMethod.discountedFee : shippingMethod.feePerCase;
    const shippingCost = priceData.quantity * shippingPerCase;
    return priceData.basePrice - priceData.discount + shippingCost;
}

拆分循环

概念解析

将一个执行多种任务的循环拆分为多个独立的循环。

适用场景

当遇到一个身兼数职的循环时，可以将其拆解，确保每个循环只做一件事。这样在每次修改时，只需理解需要修改的那部分代码的行为即可。虽然这可能导致执行两次甚至多次循环，但实际处理列表数据时，循环本身很少成为性能瓶颈。此外，拆分出循环通常还能使一些更强大的优化手段变得可行。

操作方法

// ==================重构前==================
const people = [
    { age: 20, salary: 10000 },
    { age: 21, salary: 15000 },
    { age: 22, salary: 18000 }
]
let youngest = people[0] ? people[0].age : Infinity;
let totalSalary = 0;
for (const p of people) {
    // 查找最年轻的人员
    if (p.age < youngest) youngest = p.age;
    // 计算总薪水
    totalSalary += p.salary;
}
console.log(`youngestAge: ${youngest}, totalSalary: ${totalSalary}`);
// ==================重构后==================
const people = [
    { age: 20, salary: 10000 },
    { age: 21, salary: 15000 },
    { age: 22, salary: 18000 }
]
let totalSalary = 0;
for (const p of people) {
    // 只计算总薪资
    totalSalary += p.salary;
}
let youngest = people[0] ? people[0].age : Infinity;
for (const p of people) {
    // 只查找最年轻的人员
    if (p.age < youngest) youngest = p.age;
} 
console.log(`youngestAge: ${youngest}, totalSalary: ${totalSalary}`);
// ==================提炼函数==================
const people = [
    { age: 20, salary: 10000 },
    { age: 21, salary: 15000 },
    { age: 22, salary: 18000 }
]
console.log(`youngestAge: ${youngestAge()}, totalSalary: ${totalSalary()}`);
function totalSalary() {
    let totalSalary = 0;
    for (const p of people) {
        totalSalary += p.salary;
    }
    return totalSalary;
} 
function youngestAge() {
    let youngest = people[0] ? people[0].age : Infinity;
    for (const p of people) {
        if (p.age < youngest) youngest = p.age;
    }
    return youngest;
}
// ==================使用工具类进一步优化==================
const people = [
    { age: 20, salary: 10000 },
    { age: 21, salary: 15000 },
    { age: 22, salary: 18000 }
]
console.log(`youngestAge: ${youngestAge()}, totalSalary: ${totalSalary()}`);
function totalSalary() {
    return people.reduce((total,p) => total + p.salary, 0);
}
function youngestAge() {
    return Math.min(...people.map(p => p.age));
}

拆分变量

概念解析

将一个承担多个责任的变量拆分为两个或多个变量。

适用场景

如果一个变量承担多个责任，就应该将其替换为多个变量，每个变量只承担单一责任。

操作方法

// ==================重构前==================
let temp = 2 * (height + width);
console.log(temp);
temp = height * width;
console.log(temp);
// ==================重构后==================
const perimeter = 2 * (height + width);
console.log(perimeter);
const area = height * width;
console.log(area);

分解条件表达式

概念解析

将复杂的条件表达式提炼成一个独立的函数。

适用场景

在包含复杂条件逻辑的函数中，往往可以将原函数中对应的代码改为调用新提炼的函数。

将每个分支条件分解成新函数可以带来以下好处：

  • 提高代码可读性。
  • 突出条件逻辑，更清楚地表明每个分支的作用。
  • 突出每个分支成立的原因。

操作方法

// ==================重构前==================
// 计算一件商品的总价，该商品在冬季和夏季的单价是不同的
if (!aDate.isBefore(plan.summerStart) && !aDate.isAfter(plan.summerEnd))
charge = quantity * plan.summerRate;
else
charge = quantity * plan.regularRate + plan.regularServiceCharge;
// ==================重构后==================
if (summer())
    charge = summerCharge();
else
    charge = regularCharge();
function summer() {
    return !aDate.isBefore(plan.summerStart) && !aDate.isAfter(plan.summerEnd);
}
function summerCharge() {
    return quantity * plan.summerRate;
}
function regularCharge() {
    return quantity * plan.regularRate + plan.regularServiceCharge;
}
// 进一步优化（使用三元运算符）
charge = summer() ? summerCharge() : regularCharge();
function summer() {
    return !aDate.isBefore(plan.summerStart) && !aDate.isAfter(plan.summerEnd);
}
function summerCharge() {
    return quantity * plan.summerRate;
}
function regularCharge() {
    return quantity * plan.regularRate + plan.regularServiceCharge;
}

合并条件表达式

概念解析

将多个独立的条件表达式合并为一个。

适用场景

当发现一串条件检查虽然检查条件各不相同，但最终执行的行为却一致时，应该使用“逻辑或”和“逻辑与”将它们合并为一个条件表达式。

操作方法

// ==================重构前==================
if (anEmployee.seniority < 2) return 0;
if (anEmployee.monthsDisabled > 12) return 0;
if (anEmployee.isPartTime) return 0;
// ==================重构后==================
if (isNotEligableForDisability()) return 0;
function isNotEligableForDisability() {
    return ((anEmployee.seniority < 2)
            || (anEmployee.monthsDisabled > 12)
            || (anEmployee.isPartTime));
}

以卫语句取代嵌套条件表达式

概念解析

如果某个条件极其罕见，应该单独检查该条件，并在该条件为真时立刻从函数中返回。这种单独的检查通常被称为“卫语句”（guard clauses）。

适用场景

如果使用if-else结构，你对if分支和else分支的重视程度是同等的。这样的代码结构传递给阅读者的消息就是：各个分支有同样的重要性。卫语句则不同，它告诉阅读者：“这种情况不是本函数的核心逻辑所关心的，如果它真发生了，请做一些必要的整理工作，然后退出。”为了传递这种信息，可以使用卫语句替换嵌套结构。

操作方法

// ==================重构前==================
function payAmount(employee) {
    let result;
    if(employee.isSeparated) {
        result = {amount: 0, reasonCode:"SEP"};
    }
    else {
        if (employee.isRetired) {
            result = {amount: 0, reasonCode: "RET"};
        }
        else {
            result = someFinalComputation();
        }
    }
    return result;
}
// ==================重构后==================
function payAmount(employee) {
    if (employee.isSeparated) return {amount: 0, reasonCode: "SEP"};
    if (employee.isRetired) return {amount: 0, reasonCode: "RET"};
    return someFinalComputation();
}

将查询函数和修改函数分离

概念解析

将查询动作从修改动作中分离出来的方式。

适用场景

如果遇到一个“既有返回值又有副作用”的函数，此时可以将查询动作从修改动作中分离出来。

操作方法

// ==================重构前==================
function alertForMiscreant (people) {
    for (const p of people) {
        if (p === "Don") {
            setOffAlarms();
            return "Don";
        }
        if (p === "John") {
            setOffAlarms();
            return "John";}
    }
    return "";
}
// 调用方
const found = alertForMiscreant(people);
// ==================重构后==================
function findMiscreant (people) {
    for (const p of people) {
        if (p === "Don") {
            return "Don";
        }
        if (p === "John") {
            return "John";
        }
    }
    return "";
}
function alertForMiscreant (people) {
    if (findMiscreant(people) !== "") setOffAlarms();
}
// 调用方
const found = findMiscreant(people);
alertForMiscreant(people);

以上就是JavaScript代码优化技巧示例详解的详细内容，更多关于JavaScript优化技巧的资料请关注本站其它相关文章！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

tween.js 内存泄漏预防：怎么正确停止动画与清理对象

Vue或React项目中为何不建议直接使用JS刷新页面

哪里可以找到高质量的免费JS脚本资源？

JS数组对象怎么根据指定ID字段去重

JS数组去重方法性能对比：Set、Map与Filter谁更快

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JavaScript常见SyntaxError语法错误排查与修复方法
JS 解压出现乱码或报错怎么解决？
JS动态构建复杂嵌套JSON对象的方法