[프런트 엔드 사전] if () 문 코드 최적화에 대한 returnWeekday ()에서

머리말

최근에 부서는 이전 코드에 대해 몇 가지 최적화를 수행하고 있으며 코드에서 일련의 if () {} elseif () {} 논리적 판단을 보았습니다. 이것은 분명히 최적화의 여지가 있습니다.

내부 코드는 공유하기에 적합하지 않기 때문에 <오늘의 요일로 출력>을 사용하여 논리적 판단 최적화를위한 몇 가지 솔루션에 대해 이야기하겠습니다.

의심을 피하기위한 첫 번째 진술은 다음과 같습니다.

프로젝트에서 사용하는 것은 하나의 레벨 만있는 내 예제와 달리 여러 레벨의 중첩을 가질 가능성이 있습니다. 그러나 최적화 아이디어는 거의 동일합니다. returnWeekday () 메서드는 매우 간단하므로 미리 선언하십시오.
수요

"Today is week *"를 반환하는 returnWeekday () 메서드를 작성합니다.

다음으로 단계별로 진행하겠습니다.

최적화 과정

여기서는 "초급-> 엔트리-> 중급"단계로 간단히 나눕니다.

초보자

요구 사항을 얻기 시작하고 일련의 논리적 판단을 보았을 때 가장 먼저 떠오른 것은 if 문이어야합니다.

코드 쇼 :

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    if (date === 0) {

        string += "日";

    } else if (date === 1) {

        string += "一";

    } else if (date === 2) {

        string += "二";

    } else if (date === 3) {

        string += "三";

    } else if (date === 4) {

        string += "四";

    } else if (date === 5) {

        string += "五";

    } else if (date === 6) {

        string += "六";

    }

    return string

}

console.log(returnWeekday())

이러한 코드 작성을 마치면 첫인상은 elseif 블록이 너무 많은지 여부입니다.

그러나 최적화 방법에 대해 여전히 생각하는 동안 제품이 Dingding에 대한 메시지를 보내이 요구 사항이 어떻게 완료되었는지 묻습니다. 그는 또한 웃기는 이모티콘 패키지를 가져 왔습니다. 이 시점에서 당신은 스스로에게 말하고,이 최적화에 대해 나중에 이야기합시다. 그러나 시간이 지남에 따라 수요가 추가됩니다. 이것은 다음이 인계 될 때까지 다시 최적화되지 않았습니다.

위 코드에는 elseif 블록이 너무 많아서보기가 불편합니다.

"JavaScript Advanced Programming"을보고있을 때 다음 문장을 보았습니다.

switch 문은 if 문과 가장 밀접한 관련이 있으며 다른 언어에서 일반적으로 사용되는 흐름 제어 문이기도합니다.

그렇다면이를 최적화하기 위해 switch 문을 사용할 수 있습니까?

시작하기

여기서 우리는 코드를 최적화하기 위해 switch 문을 사용합니다.

참고 : switch 문은 값을 비교할 때 합동 연산자를 사용하며 유형 변환이 없습니다.

코드 쇼 :

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    switch (date) {

        case 0 :

            string += "日";

            break;

        case 1 :

            string += "一";

            break;

        case 2 :

            string += "二";

            break;

        case 3 :

            string += "三";

            break;

        case 4 :

            string += "四";

            break;

        case 5 :

            string += "五";

            break;

        case 6 :

            string += "六";

            break;

    }

    return string

}

console.log(returnWeekday())

예상 결과를 출력하는 목적을 달성하기 위해 케이스의 문자를 연결합니다. 여기의 구조는 if 문보다 조금 더 명확 해 보입니다. 하지만 여전히 약간 혼란스러워?

어느 날 관련 조직이 운세가 변경되었음을 발견했다고 가정합니다. 일주일에 8 일이 필요합니다 (생각할 수없는 제품 사고). returnWeekday () 메소드는 추가적인 판단 단계가 필요합니다.

우리의 희망은 캡슐화 된 메서드를 자주 수정하지 않는 것입니다. 그러나 수요의 변화는 통제 할 수 없습니다.

그래서 우리는 최적화 방법에 대해 계속 생각합니다.

중급

여기서 케이스는 배열의 첨자와 일치하는 숫자입니다.

즉, [ '天', 'one', 'two', 'three', 'four', 'five', 'six'] 아래 첨자입니다.

따라서 최적화를 위해 배열 사용을 고려할 수 있습니다.

코드 쇼 :

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    // 使用数组

    let dateArr = ['天','一','二','三','四','五','六'];

    return string + dateArr[date]

}

console.log(returnWeekday())

위의 코드는 switch 문과 if 문보다 훨씬 명확합니다. 그리고 주가 8 일이 되더라도 dateArr 배열을 수정하면됩니다.

각 케이스가 불규칙한 문자열이면 어떨까요? 그런 다음 객체를 사용합니다. 각 케이스가 핵심입니다.

코드 쇼 :

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    // 使用对象

    dateObj = { 

        0: '天', 

        1: "一", 

        2: "二", 

        3: "三", 

        4: "四", 

        5: "五", 

        6: "六", 

    };

    return string + dateObj[date]

}

console.log(returnWeekday())

위의 배열 또는 객체 작성을 사용하면 코드의 가독성이 향상되고 동시에 유지 관리가 쉬워집니다.

charAt 문자 방법 사용

문자열에는 배열 첨자를 사용하는 것과 비슷한 방법이 있습니다.

// charAt 定位方法

function returnWeekday(){

    return "今天是星期" + "日一二三四五六".charAt(new Date().getDay());

}

console.log(returnWeekday())

수요 변화

이때 어떤 사람들은 returnWeekday () 메서드가 오늘의 요일을 반환 할뿐만 아니라 근무일과 휴식 일을 구분하고 관련 메서드를 호출해야한다고 희망합니다.

스위치, if 또는 어레이를 사용하면 유지 관리가 약간 번거롭고 다시 작성해야 할 곳이 많습니다.

function returnWeekday(){

    let string = "今天是星期";

    let date = new Date().getDay();

    // 使用对象

    dateObj = { 

        0: ['天','休'], 

        1: ["一",'工'], 

        2: ["二",'工'], 

        3: ["三",'工'], 

        4: ["四",'工'], 

        5: ["五",'工'], 

        6: ["六",'休'], 

    }

    // 类型，这里也可以对应相关方法

    dayType = {

        '休': function(){

            // some code

            console.log('为休息日')

        },

        '工': function(){

            // some code

            console.log('为工作日')

        }

    }

    let returnData = {

        'string' : string + dateObj[date][0],

        'method' : dayType[dateObj[date][1]]

    }

    return returnData

};

console.log(returnWeekday().method.call(this))

기타 일반적인 최적화 방법

다음은 몇 가지 일반적인 최적화 방법입니다.

삼항 연산

간단한 if () {} else {} 상황에 적합합니다.

//滚动监听，头部固定

handleScroll: function () {

    let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;

    if( offsetTop < 0 ){

        this.titleFixed = true

    } else {

        this.titleFixed = false

    }

    // 改成三元

    (offsetTop < 0) ? this.titleFixed = true : this.titleFixed = false;

    // 我们发现条件块里面的赋值情况是布尔值，所以可以更简单

    this.titleFixed = offsetTop < 0;

}

이런 식으로 코드가 간소화 될 때 가독성이 감소하지 않습니다.

논리 AND 연산자

때때로 논리 AND 연산자를 사용하여 코드를 단순화 할 수 있습니다.

if( falg ){

    someMethod()

}

다음으로 변경할 수 있습니다.

falg && someMethod();

포함을 사용하여 여러 조건 처리

if( code === '202' || code === '203' || code === '204' ){

    someMethod()

}

다음으로 변경할 수 있습니다.

if( ['202','203','204'].includes(code) ){

    someMethod()

}

Vue 관련 기사 출력 계획

최근에는 친구들이 항상 Vue와 관련된 질문을하니, 다음에 Vue 관련 기사 10 개를 출력 해 모두에게 도움이 되길 바라겠습니다. 7 ~ 10 일 내에 업데이트를 유지하겠습니다.

1. Vue의 라이프 사이클에 Vuex를 주입하는 과정 (완료)

2. Vue 소스 코드 학습에 필요한 지식 보유 (완료)

3. Vue 반응 원리 분석 (완료)

4. 신규 및 기존 VNode를 패치하는 프로세스

5. 기능 구성 요소를 개발하고 npm을 업로드하는 방법

6. 이러한 측면에서 Vue 프로젝트 최적화

7. Vue-Router 디자인의 프런트 엔드 라우팅 개발에 대해 이야기

8. 프로젝트에서 Webpack을 올바르게 사용하는 방법

9. Vue 서버 렌더링

10. Axios와 Fetch 중에서 선택하는 방법

내 공식 계정에 주목 해주시면 가능한 한 빨리 최신 기사를 받아보실 수 있습니다.

그룹 교환에 참여하려면 코드를 스캔하여 직접 그룹에 참여할 수 있습니다.