本文旨在解决在JavaScript开发中重复编写相似代码的问题，以一个问答网页为例，展示如何通过使用三元运算符和函数来避免代码冗余，提高代码的可维护性和可读性。我们将重点讲解如何简化条件判断语句，以及如何将重复的代码块封装成可重用的函数，从而减少代码量，提升开发效率。
减少重复代码的策略
在开发过程中，我们经常会遇到需要根据不同的条件执行相似操作的情况。如果直接复制粘贴代码，会导致代码冗余，难以维护。以下是一些减少重复代码的常用策略：
使用三元运算符简化条件判断： 当条件判断的结果只有两种情况时，可以使用三元运算符 condition ? expr1 : expr2 来替代 if...else 语句，使代码更简洁。
-
封装可重用函数： 将重复的代码块封装成函数，可以在不同的地方调用，避免重复编写相同的代码。
立即学习“Java免费学习笔记（深入）”；
示例：优化问答网页代码
在提供的问答网页代码中，$('.go-btn').on('click', function() { ... }); 部分存在大量重复的代码，主要体现在以下几个方面：
- 根据选择的主题 (Biology, Chemistry, Physics) 选择不同的问题数组 (biologyQ, chemistryQ, physicsQ)。
- 根据选择的主题，获取对应的课程 (#myBiology, #myChemistry, #myPhysics)。
- 对筛选后的问题数组进行洗牌 (shuffle)。
- 将洗牌后的问题显示在对应的 div 元素中 (#q1, #q2, #q3)。
- 根据选择的问题数量显示对应的 div 元素。
以下代码展示了如何使用三元运算符来简化主题和课程的选择：
$(document).ready(function(){
$('.go-btn').on('click',function() {
var array = ($('#myTopic').val() == 'Biology' ? biologyQ : ($('#myTopic').val() == 'Chemistry' ? chemistryQ : physicsQ));
const lessonSelected = ($('#myTopic').val() == 'Biology' ? $('#myBiology').val() : ($('#myTopic').val() == 'Chemistry' ? $('#myChemistry').val() : $('#myPhysics').val()));
var lessonResult = $.grep(array, function(e){ return e.lesson == lessonSelected; });
{
const array = lessonResult;
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
};
const result = shuffle(array);
$('#q1').html(result[0].question);
$('#q2').html(result[1].question);
$('#q3').html(result[2].question);
var currentVal = $('#myNumber').val();
$('.selected').hide().slice(0, currentVal).show();
}
});
});代码解释:
- var array = ($('#myTopic').val() == 'Biology' ? biologyQ : ($('#myTopic').val() == 'Chemistry' ? chemistryQ : physicsQ));：这行代码使用三元运算符根据选择的主题来选择对应的问题数组。如果选择的是 Biology，则 array 等于 biologyQ；如果选择的是 Chemistry，则 array 等于 chemistryQ；否则 array 等于 physicsQ。
- const lessonSelected = ($('#myTopic').val() == 'Biology' ? $('#myBiology').val() : ($('#myTopic').val() == 'Chemistry' ? $('#myChemistry').val() : $('#myPhysics').val()));：这行代码使用三元运算符根据选择的主题来获取对应的课程。
进一步优化：封装函数
虽然使用三元运算符可以简化代码，但仍然存在一些重复的代码块，例如洗牌和显示问题。可以将这些代码块封装成函数，进一步减少重复。
封装 shuffle 函数：
原代码中已经包含了一个 shuffle 函数，用于对数组进行洗牌。这个函数可以被直接使用，无需修改。
注意事项：
- 确保函数的功能单一，只负责完成特定的任务。
- 为函数添加适当的注释，说明其功能和参数。
总结
通过使用三元运算符和函数，可以有效地减少 JavaScript 代码中的重复，提高代码的可维护性和可读性。在实际开发中，应根据具体情况选择合适的策略，避免过度优化，保持代码的简洁和易懂。
