6 个 JavaScript 专业技巧让你的代码更优雅、更易于维护🔥🔥🔥

作为前端开发工程师，我们工作中经常可以通过注意一些小细节来增强代码的可读性，让我们的代码看起来更加优雅。

这次，我将分享一些方便、优雅、一目了然的 JavaScript 技巧。

这些技巧旨在提高代码的效率和可读性。

技术 1：减少 if...else 意大利面条式代码

当我们发现自己编写的函数包含两个以上的“if...else”语句时，就该考虑是否有更好的优化方法了。

function getPrice(item) {
    if (item === 'apple') return 1.0;
    else if (item === 'banana') return 0.5;
    else if (item === 'orange') return 0.75;
    // more conditions...
}

这种实现方式会用许多条件语句使函数体变得杂乱。因此，当我们想要添加另一个项目时，我们否则需要修改函数内部的逻辑以包含另一个“if...else”语句。

这在某种程度上违背了开放/封闭原则（OCP）。根据OCP，当我们需要扩展某个功能时，我们应该通过扩展软件实体来实现需求的变化，而不是修改现有的代码。

这是一个经典的优化策略，我们可以使用类似 Map 的数据结构来存储所有项，这里我们可以直接创建一个对象来存储数据。

const priceMap = {
    apple: 1.0,
    banana: 0.5,
    orange: 0.75,
    // more items...
};

function getPrice(item) {
    return priceMap[item] || 0; // returns 0 if item not found
}

这种方法确保当我们需要添加另一个项目时，我们不必改变“getPrice”之类的函数的核心逻辑。

确实，很多人更喜欢在需要的地方直接使用foodMap之类的东西。这里我只是用一个简单的例子来说明这个思考过程。

const priceMap = new Map();
priceMap.set('apple', 1.0);
priceMap.set('banana', 0.5);
priceMap.set('orange', 0.75);

function getPrice(item) {
    return priceMap.get(item) || 0; // returns 0 if item not found
}

技术2：使用流水线操作代替冗余循环

const foods = [
    { name: 'Apple', group: 1 },
    { name: 'Banana', group: 2 },
    { name: 'Carrot', group: 1 },
    // more items...
];

const group1Foods = [];
for (let i = 0; i < foods.length; i++) {
    if (foods[i].group === 1) {
        group1Foods.push(foods[i].name);
    }
}

传统上，您可能会使用 for 循环来迭代数组，检查每个项目是否属于其组，然后累积结果。

虽然这种方法有效，但它会导致代码冗长且可读性较差。通过使用 `filter` 和 `map` 等方法，您不仅可以使代码更简洁，还可以增强其语义清晰度。

这样，就可以立即清楚，该过程首先涉及“过滤”数组，然后“重组”它。

const group1Foods = foods
    .filter(food => food.group === 1)
    .map(food => food.name);

技术 3：使用 find 替换冗余循环

继续上面的例子，如果我们想根据属性值在食物对象数组中搜索特定的食物，那么“find”的实用性就变得显而易见。

**例子：**

不要使用 for 循环来搜索特定项目：

const foods = [
    { name: 'Apple', group: 1 },
    { name: 'Banana', group: 2 },
    { name: 'Carrot', group: 1 },
    // more items...
];

let foundFood;
for (let i = 0; i < foods.length; i++) {
    if (foods[i].name === 'Banana') {
        foundFood = foods[i];
        break;
    }
}

您可以简单地使用 find：

const foundFood = foods.find(food => food.name === 'Banana');

`find` 方法允许您快速找到数组中满足所提供测试函数的第一个元素，为传统循环提供更清晰、更高效的替代方法。

技术 4：使用包含替换冗余循环

当您需要检查数组是否包含特定值时，使用 `includes` 方法可以大大简化代码。无需使用循环遍历数组来检查元素是否存在，`includes` 提供了一种更高效、更易读的方式来实现相同的结果。

**例子：**

不要使用 `for` 循环来确定数组是否包含某个元素：

const fruits = ['Apple', 'Banana', 'Carrot'];
let hasBanana = false;
for (let i = 0; i < fruits.length; i++) {
    if (fruits[i] === 'Banana') {
        hasBanana = true;
        break;
    }
}

您可以简单地使用“includes”：

const hasBanana = fruits.includes('Banana');

使用“includes”不仅可以减少代码量，而且可以使您的意图更清晰：检查数组中是否存在某个值。

该方法为使用传统循环可能更加冗长的流程提供了一种优雅的解决方案。

在处理需要经常执行成员资格测试的数组时它特别有用，可以帮助您编写更干净、更易于维护的代码。

技术 5：使用一致的结果返回变量

作为最佳实践，尤其是在较小的函数中，您可以使用一致的变量名（如 result）作为返回值。这可以清楚地说明返回值的来源，并提供了您和其他人可以轻松识别的标准化命名约定。

function calculateTotal(items) {
    let result = 0;
    for (let i = 0; i < items.length; i++) {
        result += items[i].price;
    }
    return result;
}

技术 6：维护对象完整性

在处理后端请求返回的数据时，我们经常会单独处理特定属性。当只有少数属性需要处理时，这种情况尤其常见。许多开发人员倾向于仅提取操作所需的属性，这是第一种方法。然而，从长远来看，这种做法可能不切实际。

当不确定某个函数以后是否需要其他依赖项时，建议保持整个对象的完整性。例如，如果函数 `getDocDetail` 现在使用 `icon` 和 `content` 等属性，则将来可能需要 `title`、`date` 和其他属性。传递完整对象而不是单个属性不仅可以减少参数列表的长度，还可以增强代码的可读性和灵活性。

**例子：**

而不是仅提取和传递所需的属性：

function getDocDetail(icon, content) {
    // process icon and content
}

const doc = { icon: 'icon.png', content: 'Some content', title: 'Document Title', date: '2023-10-15' };
getDocDetail(doc.icon, doc.content);

最好传递整个对象：

function getDocDetail(doc) {
    const { icon, content } = doc;
    // process icon and content
    // Access doc.title, doc.date etc. if needed in future
}

const doc = { icon: 'icon.png', content: 'Some content', title: 'Document Title', date: '2023-10-15' };
getDocDetail(doc);

这种方法允许轻松访问任何其他属性而无需更改其签名，从而使您的函数具有面向未来性。随着新需求的出现，代码变得更加强大且更易于维护，因为它避免了不断更改函数参数的需要。这种做法支持模块化设计原则，并有助于打造更简洁、可扩展的代码库。

🌟 最后的想法

以上分享的 JavaScript 技术可以有效提高代码质量和稳定性。通过实施这些策略，例如减少冗余循环、保持对象完整性以及使用“filter”、“map”、“find”和“includes”等现代 JavaScript 方法，您可以创建更干净、更高效、更易于维护的代码。这些做法不仅简化了您的编码过程，而且符合最佳实践，使您的应用程序更加健壮且更能适应变化。

因此，请在您的下一个项目中尝试这些技巧，并亲身体验改进。祝您编码愉快！