简单的技巧有助于使代码更清晰、更容易-js教程-PHP中文网

Những Tip đơn giản giúp đoạn code trở nên CLEAR và MAIN dễ hơn

以我自己作为前端程序员的经验，我在写代码时经常养成自己的习惯，帮助代码变得灵活，提高代码的阅读和维护能力。
这些都是非常简单但非常有用的技巧，我想分享给你，让你一眼就能完全理解。

技巧 1：减少 if-else 语句的数量

每次我们编写使用超过2个if-else的东西时，我们都需要考虑是否有更优化的方式来编写代码。一个简单的例子如下：

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

登录后复制

在这个例子中我正在编写一个获取手机品牌价格的函数，如果我想添加oppo手机的价格，我需要添加一个if-else分支，或者我想修改手机。小米手机我将不得不努力找到小米手机在我下巴的位置。
像这样编写代码可能会使代码容易出现错误，例如冗长、难以阅读、难以搜索和扩展。
但别担心，我将向您展示如何在不违反 DRY 原则的情况下正确编写它。我们将使用一个对象来存储产品价格，而不是使用 if-else-if
链。

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

登录后复制

在上面的改进示例中，我们可以更清楚地阅读代码，或者当我们想要更改产品的价格时，我们不需要更改 getPrice() 函数的核心逻辑。

技术 2：流水线技术减少不必要的循环次数

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

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

登录后复制

这是传统的方式，可以使用for循环遍历数组中的每个元素，检查哪个元素满足条件，然后将其添加到结果数组中。
虽然上面的方法并没有错，但是这样写代码会让代码变得更加冗长，难以阅读。相反，我们可以使用filter和map等常用函数来帮助保持代码简洁并增强语义。

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

登录后复制

技巧3：使用find替换重复的循环

继续上面的电话部分示例。那么使用find就显示出明显的方便

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

登录后复制

这种搜索方法可以让你快速定位到数组中第一个满足给定条件的元素，使得代码比使用传统循环更加清晰。

技巧4：使用includes替换冗余循环

当我们需要检查数组是否包含特定值时，使用 include 可以简化代码，而不是循环遍历数组来检查元素是否存在。

例如：

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

登录后复制

您只需要使用包括：

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

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

登录后复制

此方法为使用传统循环的更繁琐过程提供了一个优雅的解决方案。

在处理您经常需要检查的数组时，此功能特别有用。

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

据我所知，尤其是在紧凑函数中，我们可以对返回结果使用一致的变量名称。这澄清了返回值的来源，并提供了标准的变量命名约定，如果其他人读取您的代码，他们可以轻松识别它。

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

登录后复制

技术 6：维护对象完整性

在操作从后端返回的 JSON 数据时，我们经常会在键值中单独处理特定属性。当我们有时遇到只使用少数属性的情况时，这一点甚至更加明显。许多程序员倾向于只提取操作所需的属性，这是人们想到的第一个方法，然而这是一种实用且短暂的做事方式。

当不确定函数稍后是否需要额外的依赖项时，建议保持整个对象的完整性。例如，功能组件可以使用图标和内容，但稍后可以使用标题或日期。将整个对象传递给函数组件而不是单个属性不仅可以减少 props 列表的长度，还可以增强代码的可读性和灵活性

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

登录后复制

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

登录后复制