大白话代码优化的原则与常见优化技巧

前端布洛芬

于 2025-03-01 22:40:42 发布

阅读量778

点赞数 27

分类专栏：大白话前端八股文章标签：前端 typescript javascript

本文链接：https://blog.csdn.net/qq_37212162/article/details/145955193

版权

大白话前端八股专栏收录该内容

397 篇文章

订阅专栏

大白话代码优化的原则与常见优化技巧

代码优化的原则

1. 可读性优先

解释：代码要像清晰的文章一样，让人一看就明白每个部分在做什么。变量和函数名得有实际意义，还可以适当添加注释，这样后续维护和理解代码就轻松多了。
示例（JavaScript - 未优化）：

let a = 10;
let b = 20;
let c = a + b;
console.log(c);

这里变量名 a、b、c 没明确含义，难以理解用途。

示例（JavaScript - 优化后）：

// 定义第一个加数
let firstNumber = 10;
// 定义第二个加数
let secondNumber = 20;
// 计算两个数的和
let sumResult = firstNumber + secondNumber;
console.log(sumResult);

通过有意义的变量名和注释，代码意图清晰。

示例（TypeScript - 优化后）：

// 定义第一个加数，明确类型为 number
let firstNumber: number = 10;
// 定义第二个加数，明确类型为 number
let secondNumber: number = 20;
// 计算两个数的和
let sumResult: number = firstNumber + secondNumber;
console.log(sumResult);

TypeScript 增加了类型声明，让代码更严谨易读。

2. 性能与效率并重

解释：代码运行得快、占资源少很重要。要选择高效的算法和数据结构，减少不必要的计算，就像用更巧的办法完成任务，节省时间和精力。
示例（JavaScript - 未优化）：

// 计算 1 到 n 的和，使用循环累加
function sumNumbers(n) {
    let result = 0;
    for (let i = 1; i <= n; i++) {
        result += i;
    }
    return result;
}
console.log(sumNumbers(100));

循环累加在 n 很大时计算慢。

示例（JavaScript - 优化后）：

// 计算 1 到 n 的和，使用等差数列求和公式
function sumNumbers(n) {
    return n * (n + 1) / 2;
}
console.log(sumNumbers(100));

用公式计算避免循环，提高效率。

示例（TypeScript - 优化后）：

// 计算 1 到 n 的和，使用等差数列求和公式，明确参数和返回值类型
function sumNumbers(n: number): number {
    return n * (n + 1) / 2;
}
console.log(sumNumbers(100));

TypeScript 明确类型，增强代码可靠性。

3. 可维护性和可扩展性

解释：代码要便于修改和添加新功能。把代码拆分成小的、功能单一的模块，就像搭积木一样，修改一个积木不影响其他部分。
示例（JavaScript - 未优化）：

// 这个函数既处理用户输入，又进行计算，还输出结果
function processUserInput() {
    let userInput = prompt("请输入一个数字:");
    let number = parseInt(userInput);
    let result = number * 2;
    console.log(`结果是: ${result}`);
}
processUserInput();

函数功能复杂，不利于维护扩展。

示例（JavaScript - 优化后）：

// 获取用户输入
function getUserInput() {
    let userInput = prompt("请输入一个数字:");
    return parseInt(userInput);
}

// 进行计算
function calculate(number) {
    return number * 2;
}

// 输出结果
function printResult(result) {
    console.log(`结果是: ${result}`);
}

// 主函数，调用各个功能模块
function main() {
    let number = getUserInput();
    let result = calculate(number);
    printResult(result);
}
main();

拆分成多个函数，职责清晰，便于维护扩展。

示例（TypeScript - 优化后）：

// 获取用户输入，明确返回值类型
function getUserInput(): number {
    let userInput = prompt("请输入一个数字:");
    return parseInt(userInput);
}

// 进行计算，明确参数和返回值类型
function calculate(number: number): number {
    return number * 2;
}

// 输出结果，明确参数类型
function printResult(result: number) {
    console.log(`结果是: ${result}`);
}

// 主函数，调用各个功能模块
function main() {
    let number: number = getUserInput();
    let result: number = calculate(number);
    printResult(result);
}
main();

TypeScript 类型约束让代码更健壮。

常见优化技巧

1. 减少重复代码

解释：重复代码会让代码变长，修改时容易出错。把重复部分封装成函数或类，需要时直接调用，就像把常用工具放在一个盒子里，用的时候直接拿。
示例（JavaScript - 未优化）：

// 计算两个矩形的面积
let length1 = 5;
let width1 = 3;
let area1 = length1 * width1;
console.log(`第一个矩形的面积是: ${area1}`);

let length2 = 7;
let width2 = 4;
let area2 = length2 * width2;
console.log(`第二个矩形的面积是: ${area2}`);

计算面积代码重复。

示例（JavaScript - 优化后）：

// 定义一个函数来计算矩形的面积
function calculateRectangleArea(length, width) {
    return length * width;
}

let length1 = 5;
let width1 = 3;
let area1 = calculateRectangleArea(length1, width1);
console.log(`第一个矩形的面积是: ${area1}`);

let length2 = 7;
let width2 = 4;
let area2 = calculateRectangleArea(length2, width2);
console.log(`第二个矩形的面积是: ${area2}`);

封装成函数避免重复。

示例（TypeScript - 优化后）：

// 定义一个函数来计算矩形的面积，明确参数和返回值类型
function calculateRectangleArea(length: number, width: number): number {
    return length * width;
}

let length1: number = 5;
let width1: number = 3;
let area1: number = calculateRectangleArea(length1, width1);
console.log(`第一个矩形的面积是: ${area1}`);

let length2: number = 7;
let width2: number = 4;
let area2: number = calculateRectangleArea(length2, width2);
console.log(`第二个矩形的面积是: ${area2}`);

TypeScript 类型明确，增强代码安全性。

2. 优化循环

解释：循环执行次数多或者内部操作复杂会让代码变慢。尽量减少循环次数，把能提前计算的放到循环外面，就像提前准备好材料再做饭，节省时间。
示例（JavaScript - 未优化）：

// 找出数组中所有偶数的平方
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let squaredEvenNumbers = [];
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        let squared = numbers[i] * numbers[i];
        squaredEvenNumbers.push(squared);
    }
}
console.log(squaredEvenNumbers);

循环内多次操作，效率低。

示例（JavaScript - 优化后）：

// 使用数组方法 filter 和 map 找出数组中所有偶数的平方
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let squaredEvenNumbers = numbers.filter(num => num % 2 === 0).map(num => num * num);
console.log(squaredEvenNumbers);

使用数组方法更简洁高效。

示例（TypeScript - 优化后）：

// 使用数组方法 filter 和 map 找出数组中所有偶数的平方，明确数组元素类型
let numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let squaredEvenNumbers: number[] = numbers.filter(num => num % 2 === 0).map(num => num * num);
console.log(squaredEvenNumbers);

TypeScript 类型定义让代码更严谨。

3. 合理使用数据结构

解释：不同数据结构有不同特点，选对了能提高性能。就像选合适的容器装东西，用对容器找东西就快。
示例（JavaScript - 未优化）：

// 查找数组中是否存在某个元素
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let target = 5;
let found = false;
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] === target) {
        found = true;
        break;
    }
}
console.log(`是否找到: ${found}`);

数组查找效率低。

示例（JavaScript - 优化后）：

// 使用 Set 来查找元素
let numbers = new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
let target = 5;
let found = numbers.has(target);
console.log(`是否找到: ${found}`);

Set 查找效率高。

示例（TypeScript - 优化后）：

// 使用 Set 来查找元素，明确 Set 元素类型
let numbers: Set<number> = new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
let target: number = 5;
let found: boolean = numbers.has(target);
console.log(`是否找到: ${found}`);

TypeScript 类型声明让代码更可靠。

在实际项目中进行代码优化的经验

以下是在实际项目里进行代码优化的一些实用经验，都是大白话，让你轻松理解：

项目前期规划阶段

吃透需求再动手

在开始写代码之前，一定要和提出需求的人（像产品经理、客户啥的）好好唠唠，把项目到底要实现啥功能、达到啥效果弄清楚。就好比你要盖房子，得先知道人家想要啥样的房子，是别墅还是公寓，有几个房间、几个卫生间，心里有了谱再开工。要是没搞明白就动手写，最后做出来的东西可能根本不符合人家要求，到时候还得推倒重来，浪费时间和精力。

选好架构搭好框架

根据项目的大小和复杂程度，选一个合适的架构模式。这就像盖房子得先选好结构，是砖混结构、框架结构还是钢结构。比如说做一个小型的博客网站，可能简单的架构就够用了；但要是做一个大型的电商平台，就得选更复杂、更灵活的架构，把前后端分开，前端负责把页面展示得漂漂亮亮，让用户看着舒服，后端专心处理业务逻辑和数据，这样分工明确，开发起来效率高，以后维护也方便。

把代码拆成小模块

把整个项目想象成一个大拼图，把它拆分成好多小块，每个小块就是一个独立的模块，只负责干一件事儿。就像一个游戏，里面有角色管理、地图绘制、战斗系统这些不同的部分，把它们分别做成独立的模块。这样做的好处是，以后要是想改某个部分，比如说要给角色增加新技能，只需要改角色管理这个模块就行，不会影响到其他部分，也方便代码的复用和扩展。

代码编写阶段

按规矩写代码

大家一起写代码，就得有个统一的规矩，就像开车得遵守交通规则一样。比如说变量和函数的命名得有个规则，用大家都能看懂的方式来命名，像用驼峰命名法，userName 一看就知道是用户姓名的意思。代码的格式也得统一，该缩进的地方缩进，该换行的地方换行，这样代码看起来整整齐齐，别人一看就明白。

别写重复的代码

要是有一段代码在好几个地方都用到了，就别在每个地方都重新写一遍，把它提取出来做成一个函数或者类。就好比你做饭，每次都要切葱花，你可以把切葱花的步骤单独拿出来，做成一个“切葱花函数”，以后每次做饭需要葱花的时候，直接调用这个函数就行。这样既节省了时间，又方便修改，要是切葱花的方法变了，只需要改这个函数就行了。