6 个 JavaScript 专业技巧，让你的代码更优雅、更易于维护 🔥🔥🔥
作为前端开发工程师，我们通常可以通过关注工作中的一些小细节来提高代码的可读性，并使代码看起来更优雅。
这次，我将分享一些实用且优雅的 JavaScript 小技巧，这些技巧一眼就能理解。
这些技巧旨在提高代码的效率和可读性。
方法一：减少 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）。根据开闭原则，当我们需要扩展某项功能时，应该通过扩展软件实体来实现需求变更，而不是修改现有代码。
这是一种经典的优化策略。我们可以使用类似的数据结构来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
}
方法二：利用流水线操作替换冗余循环
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 循环遍历数组，检查每个项目所属的组，然后累加结果。
虽然这种方法可行，但会导致代码冗长且可读性降低。通过使用诸如 `new`filter和 `new`之类的方法map，不仅可以使代码更简洁，还可以提高其语义清晰度。
这样一来，就可以立即清楚地看出，该过程首先涉及filtering数组，然后restructuring涉及它。
const group1Foods = foods
.filter(food => food.group === 1)
.map(food => food.name);
方法三：使用查找替换冗余循环
继续上面的例子，如果我们想根据属性值在食物对象数组中搜索特定的食物，那么它的实用性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;
}
}
您可以使用查找功能：
const foundFood = foods.find(food => food.name === 'Banana');
该find方法可以快速找到数组中满足给定测试函数的第一个元素，为传统的循环提供了一种更简洁、更高效的替代方案。
方法四：使用包含语句替换冗余循环
当您需要检查数组是否包含特定值时，使用此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`is` 不仅可以减少代码量，还可以使你的意图更清晰：检查数组中是否存在某个值。
这种方法为原本可能使用传统循环而导致的冗长过程提供了一种优雅的解决方案。
在处理数组时，它尤其有用，因为在处理数组时，您经常需要执行成员资格测试，这有助于您编写更简洁、更易于维护的代码。
方法五：使用一致的返回结果变量
作为最佳实践，尤其是在较小的函数中，可以使用类似 `result` 这样的统一变量名来表示返回值。这样可以清晰地表明返回值的来源，并提供一种标准化的命名约定，方便您和其他人识别。
function calculateTotal(items) {
let result = 0;
for (let i = 0; i < items.length; i++) {
result += items[i].price;
}
return result;
}
技术六：维护对象完整性
在处理后端请求返回的数据时，我们通常会单独处理各个属性。当只需要处理少量属性时，这种情况尤为常见。许多开发人员倾向于只提取操作所需的属性，这是第一种方法。然而，从长远来看，这种做法可能并不实用。
当不确定某个函数以后是否需要其他依赖项时，保持整个对象的完整性是明智之举。例如，如果函数现在getDocDetail使用了诸如 `a`icon和 ` b` 之类的属性content，将来可能需要用到title`c`、date`d` 以及其他属性。传递完整的对象，而不是单个属性，不仅可以减少参数列表的长度，还能提高代码的可读性和灵活性。
例子：
而不是只提取和传递所需的属性：
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 技巧可以有效提升代码质量和稳定性。通过实施这些策略，例如减少冗余循环、维护对象完整性以及使用现代 JavaScript 方法（如filter`get( )` map、` findget()`、`get()` 和 ` includesget()`），您可以创建更简洁、更高效且更易于维护的代码。这些实践不仅简化了编码过程，而且符合最佳实践，使您的应用程序更加健壮，更能适应变化。
所以，不妨在下一个项目中尝试这些技巧，亲身体验它们带来的改进。祝您编程愉快！
文章来源：https://dev.to/geekvergil/6-javascript-pro-tips-that-will-make-your-code-more-elegant-and-maintainable-2nge