JavaScript 스위치를 작성하는 방법에는 네 가지가 있습니다. 알고 계십니까? 당신이 알든 모르든 나는 모릅니다.
제가 아는 JavaScript 스위치 문을 작성하는 방법은 한 가지뿐입니다. 하지만 브랜치를 처리하는 경우 이를 작성하는 방법은 여러 가지가 있습니다. if 분기 작성 방법은 1개, switch 분기 작성 방법은 2번째, 전략 모드를 사용하는 방법은 3번째, 조건 연산자까지 포함하면 정확히 4가지가 됩니다.
이번 글의 주인공은 스위치입니다. 스위치는 일반적으로 스위치 변수 또는 표현식과 대소문자 상수로 작성된다는 것을 누구나 알고 있습니다. 예를 들어 100점 만점의 경우 90점 이상은 우수, 80점 이상 90점은 양호, 60점 이상 80점은 합격, 60점 이하는 불합격으로 간주됩니다. 아마도 다음과 같이 작성될 것입니다:
function calcGrade(score ) {
const 라인 = 점수 / 10 |
스위치 (라인) {
사례 10: 사례 9:
"훌륭함"을 반환합니다.
사례 8:
"좋음"을 반환합니다.
사례 7: 사례 6:
"적격"을 반환합니다.
기본:
"자격 없음"을 반환합니다.
}
} 코드에서 score / 10 | 0 Math.floor(score / 10) 과 동일한 효과를 가지며, 이는 몫의 정수 부분을 얻기 위해 10으로 나눕니다.
이 스위치는 매우 잘 사용되며 if...else 분기의 긴 목록을 사용하지 않는 반올림 방법도 영리한 트릭입니다.
하지만 이제 규칙이 변경되어 적격과 우수의 구분 점수가 80점에서 75점으로 낮아졌습니다.
위의 반올림 방법은 여전히 가능하지만 이번에는 제수가 더 이상 10이 아니라 5입니다. 이에 따라
9개를 사용하는 것이 좋습니다. 만약...그렇다면.
? 실제로 스위치를 사용하여 작성하는 더 간단한 방법이 있습니다.
function calcGrade(score) {
스위치 (참) {
사례 점수 >= 90:
"훌륭함"을 반환합니다.
사례 점수 >= 75:
"좋음"을 반환합니다.
사례 점수 >= 60:
"적격"을 반환합니다.
기본:
"자격 없음"을 반환합니다.
}
} 좀 이상한 느낌이 드나요? 이것은 일반적인 스위치 표현식 케이스 상수가 아니라 정반대인 스위치 상수 케이스 표현식입니다! 이 프로그램을 받아서 실행해보면 전혀 문제가 없다는 것을 알 수 있습니다. - 스위치와 케이스는 === 에 따라 일치하기 때문에 표현식인지 상수인지 상관하지 않습니다. 즉, 스위치와 케이스 뒤에 표현식이 올 수 있습니다!
응, 표정!
따라서 위의 예에서 switch(true) switch( 2 > 1) 변경하면 동일한 효과가 나타납니다.
알았어, 내 마음은 열려있어. 스위치를 얼마나 많은 방법으로 작성할 수 있는지는 중요하지 않습니다. 다음으로 살펴볼 것은 스위치 변형입니다.
: C#에 스위치 표현식이 있는 걸 봤는데, 구현할 수 있을까요?
걱정하지 마세요. JavaScript의 모든 것은 표현식이 될 수 있습니다... 그렇지 않다면 IIFE를 사용하여 하나의
함수 calcGrade(score) {를 캡슐화하세요.
반환 (값 => {
스위치 (참) {
대소문자 값 >= 90:
"훌륭함"을 반환합니다.
대소문자 값 >= 75:
"좋음"을 반환합니다.
대소문자 값 >= 60:
"적격"을 반환합니다.
기본:
"자격 없음"을 반환합니다.
}
})(점수);
} 실제 사용에서는 표현식을 전달해야 할 수 있으므로 여기서는 score IIFE의 매개변수로 사용됩니다. 이 경우 사전에 한 번만 평가해야 합니다(대체 부작용을 피하기 위해).
그러나 이러한 캡슐화는 분명히 의미가 없습니다. 실제로 이렇게 캡슐화하려면 전략으로 캡슐화하는 것이 좋습니다.
function calcGrade(score) {
return ((값, 규칙) => rule.find(({ t }) => t(값)).v)(
점수,
[
{ t: n => n >= 90, v: "매우 좋음" },
{ t: n => n >= 75, v: "좋음" },
{ t: n => n >= 60, v: "적격" },
{ t: () => true, v: "부적합" },
]
);
} 각 전략은 테스터( t )와 값( v )을 포함하는 개체입니다. tester 는 판단해야 할 값, 즉 여기 switch (表达式) 의 표현식을 전달하는 판단 함수이며, 이 표현식도 미리 평가한 후 IIFE의 매개변수로 전달됩니다. 조건에 맞는 전략을 먼저 찾아 그 가치를 꺼내는 것이 전략을 적용하는 과정은 단순하고 투박하다.
물론 이 전략은 다소 과잉이다. 정말로 전략을 사용해야 할 때 전략은 대개 가치가 아니라 행동, 즉 함수입니다.
우리는 switch 문에서 각 Case가 동일한 범위에 있으므로 두 Case 문에서 동일한 지역 변수를 선언할 수 없다는 것을 알고 있습니다. { } 로 래핑하면 이러한 문제가 해결되지만 코드가 보기에는 좋지 않습니다. 특히 break 잊지 않도록 주의하세요. 전략을 사용하면 눈에 보기 좋게 보일 수 있으며 중단 문제에 대해 걱정할 필요가 없습니다.
여기에서는 데모 목적으로 전략 동작에서 결과가 먼저 출력되고 그 다음 레벨이 출력됩니다. 돌아왔다.
함수 calcGrade(점수) {
return ((값, 규칙) => rule.find(({ t }) => t(값)).fn(값))(
점수,
[
{
t: n => n >= 90,
fn: 점수 => {
const grade = "우수";
console.log(등급,점수);
성적 반환;
}
},
{
t: n => n >= 75,
fn: 점수 => {
const 등급 = "좋음";
console.log(등급,점수);
성적 반환;
}
},
{
t: n => n >= 60,
fn: 점수 => {
const grade = "합격";
console.log(등급,점수);
성적 반환;
}
},
{
t: () => 사실,
fn: 점수 => {
const grade = "부적격";
console.log(등급,점수);
성적 반환;
}
},
]
);
} 코드에는 전략적인 동작 로직이 포함되어 있기 때문에 실제로 약간 깁니다. 실제로 스위치 표현식 으로 사용하려면 전략 부분이 너무 길지 않은 표현식이어야 합니다. 위 코드에서 전략 동작은 유사하며 함수로 캡슐화될 수 있으므로 표현식 형식으로 작성할 수 있습니다.
function calcGrade(score) {
const printGrade = (등급, 점수) => {
console.log(등급,점수);
성적 반환;
};
return ((값, 규칙) => rule.find(({ t }) => t(값)).fn(값))(
점수,
[
{ t: n => n >= 90, fn: 점수 => printGrade("우수", 점수) },
{ t: n => n >= 75, fn: 점수 => printGrade("좋음", 점수) },
{ t: n => n >= 60, fn: 점수 => printGrade("자격", 점수) },
{ t: () => true, fn: 점수 => printGrade("부적격", 점수) },
]
);
} 이제 보기에 괜찮아 보이나요?
위의 코드들은 형태가 다르고 비슷한 일을 하며, 어느 것이 더 나은지에 대한 비교는 없습니다. 당신이 무엇을 좋아하든 당신은 우아하고, 당신이 무엇을 좋아하지 않더라도 당신은 호의를 받지 않습니다. 다양한 상황에서는 적절한 접근 방식을 선택하세요. 위의 코드는 전략을 찾기 위해 find() 사용합니다. 대신에 filter() 사용하면 이야기가 달라집니다.