if-else를 교체하고 js에서 전환하는 방법
- 不言원래의
- 2018-07-16 09:56:494314검색
이 글은 js에서 if-else를 교체하고 전환하는 방법을 주로 소개합니다. 이제 도움이 필요한 친구들이 참고할 수 있도록 공유하겠습니다.
1.그런 경험이 있으신 분들이 많을 거라 믿습니다. , 프로젝트가 상대적으로 바쁜 경우 구현을 먼저 고려하고 그 당시에 가장 좋은 방법으로 솔루션을 구현합니다. 그런 다음 이전 코드를 살펴보고 더 나은 구현 솔루션이나 최적화를 생각해 보십시오. 계획. 저자도 예외는 아닙니다. if-else를 대체하고 특정 상황에서 전환하는 최근 솔루션을 독자들과 공유하겠습니다. 아이디어가 있으신 경우 댓글란에 메시지를 남겨주시면 더 많은 소통을 할 수 있도록 하겠습니다.
2. if-else 대신 조회 테이블
예를 들어 다음과 유사한 요구 사항이 발생할 수 있습니다. 예를 들어 특정 플랫폼의 신용 점수 등급이 700~950을 초과하면 우수한 신용을 의미하며 650을 의미합니다. -700은 우수한 신용, 600은 -650은 좋은 신용, 550-600은 중간 신용, 350-550은 나쁜 신용을 가지고 있습니다.
구현은 매우 간단합니다
function 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;
}
실행에는 문제가 없지만, 문제도 있습니다
1. 향후 수요가 있을 경우 변경될 수 있습니다. 예를 들어 650-750은 우수한 신용을 의미합니다. , 750-950은 우수한 신용을 의미합니다. 이런 식으로 전체적인 방식을 바꿔야 합니다.
2. 방법에는 700, 650, 600, 550 등 다양한 마법의 숫자가 있습니다. 향후 유지관리에 문제가 있을 수 있습니다.
3. if-else가 너무 많아서 좀 강박적이네요
그러니 룩업 테이블을 사용하여 구성 데이터와 비즈니스 로직을 분리해 보겠습니다
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>
이렇게 수정하면 장점이 있습니다. 수정해야 합니다. GraceForLevel, levelText만 수정하면 됩니다. 비즈니스 로직을 변경할 필요가 없습니다.
여기서 구성 데이터와 비즈니스 로직을 분리하는 것이 권장되는 이유
1. 구성 데이터를 수정하는 것이 비즈니스 로직을 수정하는 것보다 저렴하고 위험도 적습니다.2. 구성 데이터 소스 및 수정이 매우 유연할 수 있습니다
3. 논리적 분리를 통해 수정해야 하는 코드를 더 빠르게 찾을 수 있습니다
좀 더 유연하게 하고 싶다면 좀 더 일반적인 조회 기능을 캡슐화할 수 있습니다.
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;
}
캔톤타워에 입장하여 광저우로 돌아갑니다. 서호로 들어가 항저우로 돌아갑니다. 하지만 도시에는 하나 이상의 매력이 있기 때문에 어떤 사람들은 이렇게 쓰는 데 익숙합니다.
if(scenic==='广州塔'||scenic==='花城广场'||scenic==='白云山'){
_city='广州'
}
명소가 많고 데이터가 너무 길면 불편해 보이기도 하더군요. 획일적이지 않아요
.let scenicOfHangZhou=['西湖','湘湖','砂之船生活广场','京杭大运河','南宋御街']
if(~scenicOfHangZhou.indexOf(scenic)){
_city='杭州'
}스위치를 사용해도 이런 상황이 발생할 수 있습니다
function getCityForScenic(scenic) {
let _city='';
let scenicOfHangZhou=['西湖','湘湖','砂之船生活广场','京杭大运河','南宋御街'];
if(scenic==='广州塔'||scenic==='花城广场'||scenic==='白云山'){
_city='广州'
}
else if(~scenicOfHangZhou.indexOf(scenic)){
_city='杭州'
}
return _city;
}
위 코드가 나타날 확률은 매우 낮지만 결국 발생하게 됩니다. 이러한 코드는 나중에 혼란을 야기할 수 있습니다. 구성 데이터와 비즈니스 로직을 분리하면 이 문제를 피할 수 있습니다. function getCityForScenic(scenic) {
let _city='';
let scenicOfHangZhou=['西湖','湘湖','砂之船生活广场','京杭大运河','南宋御街'];
switch(true){
case (scenic==='广州塔'||scenic==='花城广场'||scenic==='白云山'):_city='广州';break;
case (!!~scenicOfHangZhou.indexOf(scenic)):return '杭州';
}
return _city;
}
어떤 사람들은 객체의 키 이름이 중국어로 되어 있다는 사실에 익숙하지 않습니다. 유연하게 처리할 수도 있습니다function getCityForScenic(scenic) {
let cityConfig={
'广州塔':'广州',
'花城广场':'广州',
'白云山':'广州',
'西湖':'杭州',
'湘湖':'杭州',
'京杭大运河':'杭州',
'砂之船生活广场':'杭州',
'南宋御街':'杭州',
}
return cityConfig[scenic];
}이런 식으로 향후 명소나 해당 도시를 추가하려면 위의 cityConfig만 수정하면 되며 비즈니스 로직을 변경할 필요도 없고 변경할 수도 없습니다. 변경되었습니다. 코딩 스타일이 통일되었습니다.
구성 데이터를 수정하는 것이 비즈니스 로직을 수정하는 것보다 비용이 덜 들고 위험도가 낮습니다.
구성의 소스 및 수정 데이터는 쉽게 유연해질 수 있습니다
구성과 비즈니스 로직을 분리하면 수정해야 할 코드를 빠르게 찾을 수 있습니다
데이터와 비즈니스 로직을 구성하면 코드 스타일을 통일할 수 있습니다
그러나 if-else가 전부는 아닙니다 에서는 이러한 변환을 권장하지만 일부 요구 사항에는 조회 변환을 사용하지 않는 것이 좋습니다. 예를 들어 if-else가 많지 않고, if 판단 논리가 획일적으로 사용되지 않는 경우에도 if-else 방식을 사용하는 것이 좋습니다. 하지만 매직넘버는 지워야 한다.
예를 들어 다음 예에서는 수신 타임스탬프가 필요 없으며 댓글 시간을 표시합니다. - 1시간 이내 댓글 게시: x분 전
리뷰 게시 24시간 ~ 30일 전: 어렵습니다. 몇 가지 if-else만 있으면 됩니다
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><p><strong></strong></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中文网！
相关推荐：
위 내용은 if-else를 교체하고 js에서 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!