如何避免在JavaScript中重复编写相似代码：以问答网页为例-小浪学习网

如何避免在JavaScript中重复编写相似代码：以问答网页为例

本文旨在解决在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()));：这行代码使用三元运算符根据选择的主题来获取对应的课程。