머리말
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!