Optimisation de la structure du Code if else dans le projet

Utilisateur 3910549976269 2021-10-13 17:32:46
optimisation la structure du code


Préface
Quand j'écris le Code,Un scénario qui rencontre toujours plusieurs conditions de jugement.La première chose qui m'est venue à l'esprit à ce moment - là était peut - êtreif else,Mais souvent cette performance、L'entretien ultérieur n'est pas très bon.

Comme les projets internes ne conviennent pas au partage,Je vais l'utiliser ici. <La sortie est le jour de la semaine> Pour parler de certaines des options d'optimisation du jugement logique.

Dis - le d'abord.,Pour éviter tout doute:

Il est probable qu'il y aura plusieurs niveaux de nidification que nous utiliserons dans nos projets,Contrairement à mon exemple, il n'y a qu'une seule couche.Mais l'idée d'optimisation est à peu près la même.Parce que returnWeekday() La méthode est exceptionnellement simple,Donc, une déclaration à l'avance.

Besoins

Écris un returnWeekday() Retour de la méthode"C'est la semaine*".

Ensuite, nous allons faire un pas à la fois.

Processus d'optimisation

Ici, je suis simplement divisé en “L'école primaire —> Introduction —> Niveau intermédiaire” Ces étapes.

L'école primaire

Quand on a commencé à avoir les besoins,Voir une série de jugements logiques,La première pensée devrait être if La déclaration est.

Les codes sont les suivants::

function returnWeekday(){
let string = "C'est la semaine";
let date = new Date().getDay();
if (date === 0) {
string += "Jour";
} else if (date === 1) {
string += "Un.";
} else if (date === 2) {
string += "2.";
} else if (date === 3) {
string += "Trois";
} else if (date === 4) {
string += "Quatre";
} else if (date === 5) {
string += "Cinq";
} else if (date === 6) {
string += "Six";
}
return string
}
console.log(returnWeekday())
Copier le Code

Quand on aura fini d'écrire ce code,,Le premier sentiment est elseif C'est trop?.

Mais pendant que nous réfléchissons à l'optimisation,,Le produit vous envoie un message pour vous demander ce qu'il en est de cette exigence.?Et j'ai apporté un joli sourire..À ce moment - là, tu te dis:,On verra ça plus tard..Mais au fil du temps,,Demande plus.Ça n'a jamais été optimisé.,Jusqu'à ce que le prochain prenne la relève.

Le code ci - dessus est vrai. elseif Trop de blocs.,Je ne me sens pas bien..

On regarde《JavaScript Programmation avancée》Quand,Voir cette phrase:

switch Déclarations et if Les déclarations sont les plus étroitement liées , Et c'est aussi une instruction de contrôle de flux couramment utilisée dans d'autres langues .

Est - ce qu'on pourrait envisager d'utiliser switch Les déclarations sont optimisées.?

Introduction

Ici, nous utilisons switch Instruction optimiser le code une fois.

Attention!:switch L'instruction compare les valeurs en utilisant des opérateurs de pleine qualité,Pas de conversion de type.

Les codes sont les suivants::

 let string = "C'est la semaine";
let date = new Date().getDay();
switch (date) {
case 0 :
string += "Jour";
break;
case 1 :
string += "Un.";
break;
case 2 :
string += "2.";
break;
case 3 :
string += "Trois";
break;
case 4 :
string += "Quatre";
break;
case 5 :
string += "Cinq";
break;
case 6 :
string += "Six";
break;
}
return string
}
console.log(returnWeekday())
Copier le Code

On est là. case Caractères d'épissage à l'intérieur,Pour atteindre les résultats escomptés.La structure ici semble en effet plus if La déclaration est un peu plus claire.Mais c'est un peu confus.?

Quel jour?,Conclusions des organisations concernées,Les étoiles ont changé..Il faut huit jours par semaine.(Pensée du produit,Vous ne pouvez pas imaginer).Nous returnWeekday() La méthode exige plus de jugement..

Notre espoir est une approche déjà encapsulée,Modifications mineures.Mais les changements de demande sont incontrôlables..

Alors nous avons continué à réfléchir à la façon d'optimiser.

Niveau intermédiaire

On a vu ça. case C'est un nombre.,Correspond à l'indice du tableau.

C'est - à - dire::[ Oh, mon Dieu. , Un. , 2. , Trois , Quatre , Cinq , Six ] Indice.

Donc nous pouvons envisager d'utiliser des tableaux pour optimiser.

Les codes sont les suivants::

 let string = "C'est la semaine";
let date = new Date().getDay();
// Utiliser un tableau
let dateArr = [ Oh, mon Dieu. , Un. , 2. , Trois , Quatre , Cinq , Six ];
return string + dateArr[date]
}
console.log(returnWeekday())
Copier le Code

Est - ce que le code ci - dessus est plus que switch Déclarations et if C'est plus clair..Et même si une semaine devient huit jours,,Il suffit de modifier dateArr Le tableau est parfait..

Si chacun de nous case C'est une chaîne irrégulière.?Alors nous utilisons des objets,Chaque case Pour un key

Les codes sont les suivants::

 let string = "C'est la semaine";
let date = new Date().getDay();
// Utiliser des objets
dateObj = {
0: Oh, mon Dieu. ,
1: "Un.",
2: "2.",
3: "Trois",
4: "Quatre",
5: "Cinq",
6: "Six",
};
return string + dateObj[date]
}
console.log(returnWeekday())
Copier le Code

Utiliser l'écriture d'un tableau ou d'un objet ci - dessus,Tout en améliorant la lisibilité du Code,L'entretien devient plus facile..

Utiliser charAt Méthode des caractères

Les chaînes ont des méthodes similaires à l'utilisation d'indices de tableau:

function returnWeekday(){
return "C'est la semaine" + "Jour 1, 2, 3, 4, 5, 6".charAt(new Date().getDay());
}
console.log(returnWeekday())
Copier le Code

Évolution de la demande

À ce moment - là.,Il y a de l'espoir. returnWeekday() La méthode ne revient pas seulement à aujourd'hui, c'est le jour de la semaine.,Il convient également de faire la distinction entre les jours de travail et les jours de repos.,Appeler la méthode associée.

Si utilisé switch、 if Ou Tableau C'est un peu difficile à entretenir.,Il y a beaucoup de choses à réécrire..

 let string = "C'est la semaine";
let date = new Date().getDay();
// Utiliser des objets
dateObj = {
0: ['Oh, mon Dieu.','Hugh'],
1: ["Un.",'Travail'],
2: ["2.",'Travail'],
3: ["Trois",'Travail'],
4: ["Quatre",'Travail'],
5: ["Cinq",'Travail'],
6: ["Six",'Hugh'],
}
// Type,Les méthodes pertinentes peuvent également être utilisées ici.
dayType = {
'Hugh': function(){
// some code
console.log('Pour les jours de repos')
},
'Travail': function(){
// some code
console.log('Jours ouvrables')
}
}
let returnData = {
string : string + dateObj[date][0],
method : dayType[dateObj[date][1]]
}
return returnData
};
console.log(returnWeekday().method.call(this))
Copier le Code

Autres moyens communs d'optimisation

Voici quelques optimisations communes.

Opérations TERNAIRES

Convient à la simplicité if(){}else{} La situation.

handleScroll: function () {
let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
if( offsetTop < 0 ){
this.titleFixed = true
} else {
this.titleFixed = false
}
// Remplacer par trois yuans
(offsetTop < 0) ? this.titleFixed = true : this.titleFixed = false;
// Nous trouvons que l'assignation dans le bloc conditionnel est booléenne,C'est plus simple.
this.titleFixed = offsetTop < 0;
}
Copier le Code

C'est ce qui se passe lorsque vous réduisez le Code,La lisibilité n'a pas diminué non plus..

Logique et opérateur

Parfois, nous pouvons utiliser la logique et les opérateurs pour simplifier le Code

 someMethod()
}
// Peut être remplacé par
falg && someMethod();
Copier le Code

Utiliser includes Traitement de plusieurs conditions

 someMethod()
}
Modifier comme suit:
if( [ 202 , 203 , 204 ].includes(code) ){
someMethod()
}
Copier le Code
版权声明
本文为[Utilisateur 3910549976269]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211013173242781X.html

  1. Error in spring source code compilation: the monoprocessor in reactor.core.publisher is outdated
  2. Buctf [geek Challenge 2019] http
  3. 20 个值得学习的 Vue 开源项目
  4. 20 projets open source à apprendre
  5. Scène et application de la manette des gaz anti - bavardage
  6. Qu'est - ce que j'ai gagné en abandonnant vue pour les six mois de React?
  7. À partir de [Bytecode cache] et de [http cache], intervieweur: « est - ce si mince? »
  8. [niveau intermédiaire et avancé] obligatoire, 30 + questions manuscrites à haute fréquence et réponses détaillées (dix mille caractères longs), voyez comment "vous" ne pouvez pas m'abattre
  9. Mise en œuvre d'un outil d'échafaudage universel pour l'ingénierie Web de 0 à 1
  10. 【中高级前端】必备,30+高频手写题及详细答案(万字长文),看“你”怎么难倒我
  11. In less than two days, the box office exceeded 400 million, and Changjin Lake broke out, breaking seven records in Chinese film history
  12. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  13. react之组件生命周期
  14. L'équipe de vue dévoile un nouvel outil d'échafaudage rapide comme la foudre Create View, qui remplacera la vue CLI à l'avenir, avec seulement 300 lignes de code, apprenez - le!
  15. 20 dessins illustrant le fonctionnement du moteur de rendu du Navigateur
  16. In less than two days, the box office exceeded 400 million, and Changjin Lake broke out, breaking seven records in Chinese film history
  17. 千锋重庆web前端学习之理解CSS位置属性
  18. 什么是语义HTML标记以及如何使用它们?
  19. Si vous vous représentez avec un tableau, c'est le champ de Van Gogh.
  20. 前端面试手写代码
  21. 前端开发框架Vue中Vuex的使用原理分享
  22. vue-echarts初次体验
  23. 分享一些web前端开发好用的网站
  24. 每天读一点webpack-003
  25. react之组件生命周期
  26. Alibaba collection version of mybatis handwritten documents, Java front-end interview questions
  27. SpringBoot Java后端实现okhttp3超时设置
  28. react之組件生命周期
  29. Cycle de vie des composants de React
  30. 使用Reactor将阻塞调用变为异步非阻塞
  31. Baked cake wife sun photos, plain face on camera, beautiful appearance is still a beauty, watching children during the festival is a little helpless
  32. 亚洲知名插画师荒川(arakawa) 仅8件独版NFT作品系列《Can't Out》正式上架Element综合市场
  33. Taiyuan: singing, welcoming the national day, gathering to praise blessings
  34. Arakawa, un illustrateur Asiatique bien connu, n'a mis sur le marché que huit pièces de la collection NFT "can't out" en une seule édition.
  35. Résumé des questions d'entrevue Hadoop (II) - - hdfs
  36. 如何解决“Serverless”系统的冷启动问题
  37. BootstrapBlazor 模板安装
  38. BootstrapBlazor 模板安装
  39. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  40. 使用ESLint+Prettier来统一前端代码风格
  41. 为什么说 Node.js 是实时应用程序开发的绝佳选择
  42. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  43. 使用elementui在完成项目中遇到的未知知识点2
  44. On the mechanism of webpack loader
  45. 云原生体系下 Serverless 弹性探索与实践
  46. vue开发技巧
  47. Une fleur merveilleuse de l'histoire de l'industrie des nouveaux véhicules énergétiques, Zhongtai Jiangnan T11, une voiture vintage que vous n'avez jamais vue
  48. 致敬!再见了!LayUI !
  49. Vue安装和卸载
  50. Implement a flipped character with the transform attribute of CSS
  51. 你的第一个 Docker + React + Express 全栈应用
  52. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  53. Zhang Daxian sends a blessing video on xYG relay, showing positive energy in details
  54. 前端技巧-JS元编程ES6 symbol公开符号
  55. Article de 37 ans seul à l'hôpital!Il boitait, soupçonnait d'être blessé, souriait avec douleur
  56. 前端推荐!10分钟带你了解Konva运行原理
  57. npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js
  58. 零基础学习Web前端需要注意什么呢?
  59. The Youth League promotes Yiyang Qianxi new film, and the relationship between the two generation and the generation is good. Li Fei is blessed.
  60. Qu'est - ce qu'il faut remarquer à l'avant - plan Web de l'apprentissage de base zéro?