本文旨在解决在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 代码中的重复，提高代码的可维护性和可读性。在实际开发中，应根据具体情况选择合适的策略，避免过度优化，保持代码的简洁和易懂。
以上就是如何避免在JavaScript中重复编写相似代码：以问答网页为例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572579.html
微信扫一扫 
支付宝扫一扫 
