else를 제거하고 코드를 더욱 우아하게 보이게 만드세요.

javascript 칼럼에서는 if else를 제거하고 코드를 더욱 우아하게 만드는 방법을 소개합니다.

머리말

if else로 가득 찬 코드를 접한 학생들이 많을 것입니다. 단순하고 투박하게 계속해서 점진적인 변화를 꾀하는 것은 종종 혼란을 야기할 뿐입니다. 복잡도는 높아지고 가독성은 떨어지게 됩니다. 그런 다음 리팩토링할 시간입니다. 잠시 시간을 내어 이 기사를 읽어보세요. 아마도 도움이 될 것입니다.

시나리오 1: 상태에 따라 해당 이름 표시

최적화 계획 1: 객체 객체

const statusStr = {
  '1': '待付款',
  '2': '待发货',
  '3': '已发货',
  '4': '交易完成',
  '5': '交易关闭',
  'default': '',
}
const getStatus = (status) =>{
  return statusStr[status] || statusStr['default']
}

판단 조건을 객체의 속성 이름으로, 처리 로직을 객체의 속성 값으로 사용 .버튼을 클릭하면 객체 속성을 검색하여 논리적인 판단을 하게 됩니다.

최적화 계획 2: Map 객체

const statusStr = new map([
  '1': ['待付款'],
  '2': ['待发货'],
  '3': ['已发货'],
  '4': ['交易完成'],
  '5': ['交易关闭'],
  'default': [''],
])
const getStatus = (status) =>{
  let actions = statusStr.get(status) || statusStr.get('default')
  return  actions[0];
}

이렇게 작성하면 es6의 Map 객체가 사용됩니다. 그러면 Map과의 차이점은 무엇인가요? 객체와 객체 객체?

객체에는 일반적으로 자체 프로토타입이 있으므로 객체에는 항상 "프로토타입" 키가 있습니다. 객체의 키는 문자열이나 기호만 될 수 있지만 맵의 키는 어떤 값이라도 될 수 있습니다. 크기 속성을 통해 맵의 키-값 쌍 수를 쉽게 얻을 수 있지만 객체의 키-값 쌍 수는 수동으로만 확인할 수 있습니다.

시나리오 2: 여러 조건에 해당하는 이름

이제 문제를 업그레이드해 보겠습니다. 과거에는 버튼을 클릭할 때 상태만 판단하면 되었지만 이제는 사용자의 신원도 판단해야 합니다.
"예:"

const onButtonClick = (status,identity)=>{
  if(identity == 'guest'){
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }else if(identity == 'master') {
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }
}

위의 예에서 논리가 이진 판단으로 업그레이드되면 판단의 양이 두 배로 늘어나고 코드의 양도 두 배가 된다는 것을 알 수 있습니다. 이번에는?

최적화 계획 1: 조건을 문자 접합 형태로 Map 객체에 저장

const actions = new Map([
  ['guest_1', ()=>{/*do sth*/}],
  ['guest_2', ()=>{/*do sth*/}],
  ['guest_3', ()=>{/*do sth*/}],
  ['guest_4', ()=>{/*do sth*/}],
  ['guest_5', ()=>{/*do sth*/}],
  ['master_1', ()=>{/*do sth*/}],
  ['master_2', ()=>{/*do sth*/}],
  ['master_3', ()=>{/*do sth*/}],
  ['master_4', ()=>{/*do sth*/}],
  ['master_5', ()=>{/*do sth*/}],
  ['default', ()=>{/*do sth*/}],
])
const onButtonClick = (identity,status)=>{
  let action = actions.get(`${identity}_${status}`) || actions.get('default')
  action.call(this)
}

위 코드의 핵심 논리는 두 조건을 문자열로 접합하고 조건 접합 문자열을 키로 사용하는 것입니다. , 값의 Map 객체를 검색하여 실행하는 처리 기능을 사용합니다. 이 작성 방법은 여러 조건을 판단할 때 특히 유용합니다.

최적화 계획 2: 조건을 문자 접합 형태로 Object 객체에 저장

const actions = {
  'guest_1':()=>{/*do sth*/},
  'guest_2':()=>{/*do sth*/},
  //....
}
const onButtonClick = (identity,status)=>{
  let action = actions[`${identity}_${status}`] || actions['default']
  action.call(this)
}

최적화 계획 3: Map 객체에 조건을 Object 객체 형태로 저장

약간 있을 수 있습니다. 문자열을 형성하기 위해 쿼리 조건을 사용하는 것은 어색합니다. 그런 다음 Map 개체를 사용하고 Object 개체를 키로 사용하는 또 다른 솔루션이 있습니다.

const actions = new Map([
  [{identity:'guest',status:1},()=>{/*do sth*/}],
  [{identity:'guest',status:2},()=>{/*do sth*/}],
  //...
])
const onButtonClick = (identity,status)=>{
  let action = [...actions].filter(([key,value])=>(key.identity == identity && key.status == status))
  action.forEach(([key,value])=>value.call(this))
}

시나리오 3: 상태를 기반으로 해당 작업 만들기

"예를 들어 :"

function init () {
    if (isAnswer === 1) {
        if (isOldUser === 1) {
            // ...
        } else if (isOldUser === 2) {
            // ...
        }
    } else if (isAnswer === 2) {
        if (isOldUser === 1) {
            // ...
        } else if (isOldUser === 2) {
            // ...
        }
    } else if (isAnswer === 3) {
        if (isOldUser === 1) {
            // ...
        } else if (isOldUser === 2) {
            // ...
        }
    }
}

최적화 솔루션 1: 검색 테이블, 책임 체인 조회 테이블

const rules = [
    {
        match (an, old) {if (an === 1) {return true}},
        action (an, old) {
        if (old === 1) {// ...} 
        else if (old === 2) {// ...}
        }
    },
    {
        match (an, old) { if (an === 2) {return true } },
        action (an, old) {
            if (old === 1) {// ...} 
            else if (old === 2) {// ...}
        }
    },
    {
        match (an, old) {if (an === 3) {return true}},
        action (an, old) {
            if (old === 1) {// ...} 
            else if (old === 2) {// ...}
        }
    }
]
function init (an, old) {
    for (let i = 0; i < rules.length; i++) {
        // 如果返回true
        if (rules[i].match(an, old)) {
            rules[i].action(an, old)
        }
    }
}
init(isAnswer, isOldUser)

영구적인 솔루션이 아닌 일시적인 솔루션처럼 보일 수도 있지만 실제로는 그렇지 않습니다. init 함수의 복잡성 크게 감소됩니다. 우리는 제어 흐름의 복잡한 로직을 최적화 계획 2: 기능적 프로그래밍으로 분할했습니다. 예를 들어 다음과 유사한 요구 사항이 발생할 수 있습니다. 예를 들어 특정 플랫폼의 신용 점수 등급이 700-950을 초과하는 경우입니다. , 이는 우수한 신용을 의미하며, 650-700은 우수한 신용, 600-650은 우수한 신용, 550-600은 중간 신용, 350-550은 낮은 신용을 의미합니다.

import R from 'ramda'
var fn = R.cond([
  [R.equals(0),   R.always('water freezes at 0°C')],
  [R.equals(100), R.always('water boils at 100°C')],
  [R.T,           temp => 'nothing special happens at ' + temp + '°C']
]);
fn(0); //=> 'water freezes at 0°C'
fn(50); //=> 'nothing special happens at 50°C'
fn(100); //=> 'water boils at 100°C'

최적화 계획 1: 조회 테이블을 사용하여 구성 데이터와 비즈니스 로직을 분리

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;
}

Summary

대부분의 경우 if else를 교체하고 전환하는 더 유연한 방법을 사용할 수 있습니다. 다른 것을 교체해야 하는 경우 상황에 따라 다릅니다.

더 많은 관련 무료 학습:

javascript(동영상)

위 내용은 else를 제거하고 코드를 더욱 우아하게 보이게 만드세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!