Maison > Article > interface Web > Comment remplacer if-else et basculer dans js
Comment remplacer if-else et basculer dans js
- 不言original
- 2018-07-16 09:56:494210parcourir
Cet article explique principalement comment remplacer if-else et switch dans js. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer
1.
Je crois que beaucoup de gens ont cette expérience. Lorsque le projet est occupé, ils envisageront d'abord la mise en œuvre et mettront en œuvre la solution de la meilleure façon possible à ce moment-là. Lorsque le projet n'est pas occupé, ils examineront le code précédent et réfléchiront. à ce sujet. Existe-t-il une meilleure solution de mise en œuvre ou d'optimisation ? L'auteur ne fait pas exception. Permettez-moi de partager avec les lecteurs ma solution récente pour remplacer if-else et basculer dans des situations spécifiques. Si vous avez des idées, veuillez laisser un message dans la zone de commentaires et laissez-nous communiquer davantage. 2.table de recherche au lieu de if-elsePar exemple, vous pouvez rencontrer des exigences similaires à celles-ci : Par exemple, si la cote de crédit d'une certaine plateforme dépasse 700- 950, cela signifie un excellent crédit, 650-700 a un excellent crédit, 600-650 a un bon crédit, 550-600 a un crédit moyen et 350-550 a un mauvais crédit. La mise en œuvre est très simplefunction showGrace(grace) {
let _level='';
if(grace>=700){
_level='信用极好'
}
else if(grace>=650){
_level='信用优秀'
}
else if(grace>=600){
_level='信用良好'
}
else if(grace>=550){
_level='信用中等'
}
else{
_level='信用较差'
}
return _level;
}
function showGrace(grace) {
let graceForLevel=[700,650,600,550];
let levelText=['信用极好','信用优秀','信用良好','信用中等','信用较差'];
for(let i=0;i<graceforlevel.length>=graceForLevel[i]){
return levelText[i];
}
}
//如果不存在，那么就是分数很低，返回最后一个
return levelText[levelText.length-1];
}</graceforlevel.length>L'avantage d'une telle modification est que s'il y a besoin de la modifier, il suffit de modifier graceForLevel et levelText. La logique métier n'a pas besoin d'être modifiée. Pourquoi est-il recommandé ici de séparer les données de configuration de la logique métier ? 1. La modification des données de configuration est moins coûteuse et moins risquée que la modification de la logique métier 2. Les sources de données de configuration et les modifications. sont possibles Très flexible3. Il est recommandé de séparer la configuration et la logique métier, afin que vous puissiez trouver plus rapidement le code qui doit être modifiéSi vous souhaitez être plus flexible. , vous pouvez encapsuler une fonction de recherche légèrement plus générale.
function showGrace(grace,level,levelForGrace) {
for(let i=0;i<level.length>=level[i]){
return levelForGrace[i];
}
}
//如果不存在，那么就是分数很低，返回最后一个
return levelForGrace[levelText.length-1];
}
let graceForLevel=[700,650,600,550];
let levelText=['信用极好','信用优秀','信用良好','信用中等','信用较差'];</level.length>
function getCityForScenic(scenic) {
let _city=''
if(scenic==='广州塔'){
_city='广州'
}
else if(scenic==='西湖'){
_city='杭州'
}
return _city;
}Entrez dans la tour de Canton pour retourner à Guangzhou. Entrez dans le lac de l'Ouest et retournez à Hangzhou. Mais une ville a plus d’une attraction, donc certaines personnes ont l’habitude de l’écrire ainsi.
if(scenic==='广州塔'||scenic==='花城广场'||scenic==='白云山'){
_city='广州'
}S'il y a de nombreuses attractions et que les données sont très longues, cela semble inconfortable. Certaines personnes aiment écrire comme ça
let scenicOfHangZhou=['西湖','湘湖','砂之船生活广场','京杭大运河','南宋御街']
if(~scenicOfHangZhou.indexOf(scenic)){
_city='杭州'
}
le style n'est pas uniforme.
function getCityForScenic(scenic) {
let _city='';
let scenicOfHangZhou=['西湖','湘湖','砂之船生活广场','京杭大运河','南宋御街'];
if(scenic==='广州塔'||scenic==='花城广场'||scenic==='白云山'){
_city='广州'
}
else if(~scenicOfHangZhou.indexOf(scenic)){
_city='杭州'
}
return _city;
}Même si vous utilisez switch, une telle situation peut se produire
function getCityForScenic(scenic) {
let _city='';
let scenicOfHangZhou=['西湖','湘湖','砂之船生活广场','京杭大运河','南宋御街'];
switch(true){
case (scenic==='广州塔'||scenic==='花城广场'||scenic==='白云山'):_city='广州';break;
case (!!~scenicOfHangZhou.indexOf(scenic)):return '杭州';
}
return _city;
}Bien que la probabilité que le code ci-dessus apparaisse est très faible, cela se produira après tout. Un tel code pourrait prêter à confusion à l'avenir. Ce problème peut être évité si les données de configuration et la logique métier sont séparées.
function getCityForScenic(scenic) {
let cityConfig={
'广州塔':'广州',
'花城广场':'广州',
'白云山':'广州',
'西湖':'杭州',
'湘湖':'杭州',
'京杭大运河':'杭州',
'砂之船生活广场':'杭州',
'南宋御街':'杭州',
}
return cityConfig[scenic];
}Certaines personnes ne sont pas habituées à ce que le nom clé d'un objet soit en chinois. Cela peut également être géré de manière flexible
function getCityForScenic(scenic) {
let cityConfig=[
{
scenic:'广州塔',
city:'广州'
},
{
scenic:'花城广场',
city:'广州'
},
{
scenic:'白云山',
city:'广州'
},
{
scenic:'西湖',
city:'杭州'
},
{
scenic:'湘湖',
city:'杭州'
},
{
scenic:'京杭大运河',
city:'杭州'
},
{
scenic:'砂之船生活广场',
city:'杭州'
}
]
for(let i=0;i<cityconfig.length> De cette façon, si vous souhaitez ajouter des attractions ou des villes correspondantes à l'avenir, vous pouvez uniquement modifier la cityConfig ci-dessus. La logique métier n'a pas besoin d'être modifiée. , et il ne peut pas être modifié. Le style de codage est unifié. <p></p>
<p>Voici un bref résumé des avantages de l'utilisation d'une forme de séparation des données de configuration et de la logique métier<strong></strong></p>
<ol class=" list-paddingleft-2">
<li>Modifier les données de configuration est moins coûteux que de modifier la logique métier, risque moindre<p></p>
</li>
<li>Les sources de données de configuration et les modifications peuvent être très flexibles<p></p>
</li>
<li>La séparation de la configuration et de la logique métier permet une identification plus rapide des modifications nécessaires Les données de configuration du code<p></p>
</li>
<li> et la logique métier peuvent rendre le style de code unifié<p></p>
</li>
</ol>Mais tous les if-else ne recommandent pas cette transformation, certains Il n'est pas recommandé d'utiliser la transformation de recherche en fonction des besoins. Par exemple, s’il n’y a pas beaucoup de if-else et que la logique du jugement if n’est pas utilisée de manière uniforme, il est toujours recommandé d’utiliser la méthode if-else. Mais ce chiffre magique doit être dissipé. <blockquote></blockquote>Par exemple, ce qui suit élimine le besoin d'horodatage entrant et affiche l'heure du commentaire, <p></p>
<p>Publier les commentaires dans l'heure : il y a x minutes<strong></strong></p> <p>Publier les commentaires de 1h à 24h : il y a x heures <strong></strong></p>
<p>Publier les commentaires de 24h à 30 jours : il y a x jours >Avis publiés il y a plus de 30 jours : mois/ jour<strong></strong></p>
<p>Commentaires publiés l'année dernière et datant de plus de 30 jours : commentaires publiés il y a plus de 30 jours : année/mois/jour<strong></strong></p>Ce n'est pas difficile de réaliser, juste quelques si-sinon <p><strong></strong></p>
<p></p>
<p>运行结果没问题，但是也存在一个问题，就是这个需求有神仙数字：2592000000，86400000，3600000，60000。对于后面维护而言，一开始可能并不知道这个数字是什么东西。</p>
<p>所以下面就消灭神仙数字，常量化</p>
<pre class="brush:php;toolbar:false">function formatDate(timeStr){
//获取当前时间戳
let _now=+new Date();
//求与当前的时间差
let se=_now-timeStr;
const DATE_LEVEL={
month:2592000000,
day:86400000,
hour:3600000,
minter:60000,
}
let _text='';
//去年
if(new Date(timeStr).getFullYear()!==new Date().getFullYear()&&se>DATE_LEVEL.month){
_text=new Date(timeStr).getFullYear()+'年'+(new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
}
//一个月以上
else if(se>DATE_LEVEL.month){
_text=(new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
}
//一天以上
else if(se>DATE_LEVEL.day){
_text=Math.floor(se/DATE_LEVEL.day)+'天前';
}
//一个小时以上
else if(se>DATE_LEVEL.hour){
_text=Math.floor(se/DATE_LEVEL.hour)+'小时前';
}
//一个小时以内
else{
//如果小于1分钟，就显示1分钟前
if(se<date_level.minter><p>运行结果也是正确的，代码多了，但是神仙数字没了。可读性也不差。</p>
<blockquote>这里也顺便提一下，如果硬要把上面的需求改成look-up的方式，代码就是下面这样。这样代码的修改的扩展性会强一些，成本会小一些，但是可读性不如上面。取舍关系，实际情况，实际分析。</blockquote>
<pre class="brush:php;toolbar:false">function formatDate(timeStr){
//获取当前时间戳
let _now=+new Date();
//求与当前的时间差
let se=_now-timeStr;
let _text='';
//求上一年最后一秒的时间戳
let lastYearTime=new Date(new Date().getFullYear()+'-01-01 00:00:00')-1;
//把时间差添加进去（当前时间戳与上一年最后一秒的时间戳的差）添加进去，如果时间差（se）超过这个值，则代表了这个时间是上一年的时间。
//DATE_LEVEL.unshift(_now-lastYearTime);
const DATE_LEVEL={
month:2592000000,
day:86400000,
hour:3600000,
minter:60000,
}
let handleFn=[
{
time:DATE_LEVEL.month,
fn:function(timeStr){
return (new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
}
},
{
time:DATE_LEVEL.day,
fn:function(timeStr){
return Math.floor(se/DATE_LEVEL.day)+'天前';
}
},
{
time:DATE_LEVEL.hour,
fn:function(timeStr){
return Math.floor(se/DATE_LEVEL.hour)+'小时前';
}
},
{
time:DATE_LEVEL.minter,
fn:function(timeStr){
return Math.ceil(se/DATE_LEVEL.minter)+'分钟前';
}
}
];
//求上一年最后一秒的时间戳
let lastYearTime=new Date(new Date().getFullYear()+'-01-01 00:00:00')-1;
//把时间差（当前时间戳与上一年最后一秒的时间戳的差）和操作函数添加进去，如果时间差（se）超过这个值，则代表了这个时间是上一年的时间。
handleFn.unshift({
time:_now-lastYearTime,
fn:function(timeStr){
if(se>DATE_LEVEL.month){
return new Date(timeStr).getFullYear()+'年'+(new Date(timeStr).getMonth()+1)+'月'+new Date(timeStr).getDate()+'日';
}
},
});
let result='';
for(let i=0;i<handlefn.length>=handleFn[i].time){
result=handleFn[i].fn(timeStr);
if(result){
return result;
}
}
}
//如果发布时间小于1分钟，之际返回1分钟
return result='1分钟前'
}</handlefn.length>
3.配置对象代替switch
比如有一个需求：传入cash，check，draft，zfb，wx_pay，对应输出：现金，支票，汇票，支付宝，微信支付。
需求也很简单，就一个switch就搞定了
function getPayChanne(tag){
switch(tag){
case 'cash':return '现金';
case 'check':return '支票';
case 'draft':return '汇票';
case 'zfb':return '支付宝';
case 'wx_pay':return '微信支付';
}
}
但是这个的硬伤还是和上面一样，万一下次又要多加一个如：bank_trans对应输出银行转账呢，代码又要改。类似的问题，同样的解决方案，配置数据和业务逻辑分离。代码如下。
function getPayChanne(tag){
let payChanneForChinese = {
'cash': '现金',
'check': '支票',
'draft': '汇票',
'zfb': '支付宝',
'wx_pay': '微信支付',
};
return payChanneForChinese[tag];
}
同理，如果想封装一个通用的，也可以的
let payChanneForChinese = {
'cash': '现金',
'check': '支票',
'draft': '汇票',
'zfb': '支付宝',
'wx_pay': '微信支付',
};
function getPayChanne(tag,chineseConfig){
return chineseConfig[tag];
}
getPayChanne('cash',payChanneForChinese);
这里使用对象代替 switch 好处就在于
使用对象不需要 switch 逐个 case 遍历判断。
使用对象，编写业务逻辑可能更灵活
使用对象可以使得配置数据和业务逻辑分离。好处参考上一部分内容。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Parlons brièvement du contenu du garbage collection jsArticle suivant：Parlons brièvement du contenu du garbage collection js
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs整合微信UI（weui）
- JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧