자바스크립트에서 switch 문구를 사용할 필요가 없을 수도 있습니다.

switch가 없으면 복잡한 코드 블록이 없다

switch는 매우 편리합니다. 표현식을 지정하면case 자구의 다른 표현식과 일치하는지 확인할 수 있습니다.다음 예제를 고려하십시오.

const name = "Juliana";

switch (name) {
  case "Juliana":
    console.log("She's Juliana");
    break;
  case "Tom":
    console.log("She's not Juliana");
    break;
}

name이 "Juliana"일 때, 우리는 메시지를 인쇄하고, 이 블록을 종료하는 것을 중단할 것입니다.switch 함수 내부에 있을 때,case 블록에서return을 직접 사용하면 브레이크를 생략할 수 있습니다.
일치하는 항목이 없으면 default 옵션을 사용할 수 있습니다.

const name = "Kris";

switch (name) {
  case "Juliana":
    console.log("She's Juliana");
    break;
  case "Tom":
    console.log("She's not Juliana");
    break;
  default:
    console.log("Sorry, no match");
}

switch는 Redux Reducers에서도 대량으로 사용됩니다. (비록 Redux Toolkit은 샘플을 간소화했지만) 대량의if가 발생하지 않도록 합니다.다음 예제를 고려하십시오.

const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGIN_FAILED = "LOGIN_FAILED";

const authState = {
  token: "",
  error: "",
};

function authReducer(state = authState, action) {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return { ...state, token: action.payload };
    case LOGIN_FAILED:
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

이게 무슨 문제야?거의 없어요.그런데 더 좋은 선택이 있을까요?

Python에서 얻은 시사점

텔모에서 온 이 트윗이 나의 주의를 끌었다.그는 두 가지'스위치'스타일을 선보였는데, 그 중 하나는 파이썬에 매우 가까운 모델이다.
Python은 스위치가 없습니다. 더 좋은 대체 방법을 제공합니다.먼저 JavaScript에서 Python으로 코드를 마이그레이션합니다.

LOGIN_SUCCESS = "LOGIN_SUCCESS"
LOGIN_FAILED = "LOGIN_FAILED"

auth_state = {"token": "", "error": ""}


def auth_reducer(state=auth_state, action={}):
    mapping = {
        LOGIN_SUCCESS: {**state, "token": action["payload"]},
        LOGIN_FAILED: {**state, "error": action["payload"]},
    }

    return mapping.get(action["type"], state)

Python에서 우리는 사전을 사용하여 switch를 시뮬레이션할 수 있다.dict.get () 은 switch의 default 문장을 나타내는 데 사용할 수 있습니다.
존재하지 않는 키를 액세스하면 Python에서 KeyError 오류가 발생합니다.
>>> my_dict = {
    "name": "John", 
    "city": "Rome", 
    "age": 44
    }
>>> my_dict["not_here"]
# Output: KeyError: 'not_here'
.get () 메서드는 오류를 일으키지 않으며 존재하지 않는 키에 기본값을 지정할 수 있기 때문에 더욱 안전한 방법입니다.
>>> my_dict = {
    "name": "John", 
    "city": "Rome", 
    "age": 44
    }
>>> my_dict.get("not_here", "not found")
# Output: 'not found'
따라서 Pytho n의 이 행은 다음과 같습니다.

return mapping.get(action["type"], state)

JavaScript와 동일:

function authReducer(state = authState, action) {
  ...
    default:
      return state;
  ...
}

사전으로 switch 바꾸기

앞의 예제를 다시 한 번 생각해 보자.

const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGIN_FAILED = "LOGIN_FAILED";

const authState = {
  token: "",
  error: "",
};

function authReducer(state = authState, action) {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return { ...state, token: action.payload };
    case LOGIN_FAILED:
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

만약 switch를 사용하지 않는다면 우리는 이렇게 할 수 있다.

function authReducer(state = authState, action) {
  const mapping = {
    [LOGIN_SUCCESS]: { ...state, token: action.payload },
    [LOGIN_FAILED]: { ...state, error: action.payload }
  };

  return mapping[action.type] || state;
}

여기서 우리는 ES6의 계산 속성을 사용합니다. 여기서 맵핑의 속성은 두 개의 상수에 따라 즉시 계산됩니다. LOGIN_SUCCESS 및 LOGIN_FAILED.
속성에 대응하는 값입니다. 여기서 사용하는 것은 대상 해체입니다. 여기 ES9(ECMAScript 2018)에서 나온 것입니다.

const mapping = {
  [LOGIN_SUCCESS]: { ...state, token: action.payload },
  [LOGIN_FAILED]: { ...state, error: action.payload }
}

당신은 이런 방법을 어떻게 생각합니까?그것은 switch에 있어서는 아직 약간의 제한이 있을 수 있지만, Reducer에 있어서는 더욱 좋은 방안일 수 있다.
그러나 이 코드의 성능은 어떻습니까?

성능은 어떻습니까?

switch의 성능은 사전의 쓰기보다 우수하다.우리는 아래의 사례를 이용하여 테스트할 수 있다.

console.time("sample");
for (let i = 0; i < 2000000; i++) {
  const nextState = authReducer(authState, {
    type: LOGIN_SUCCESS,
    payload: "some_token"
  });
}
console.timeEnd("sample");

그것들을 열 번 정도 재면,
for t in {1..10}; do node switch.js >> switch.txt;done
for t in {1..10}; do node map.js >> map.txt;done
이상은 자바스크립트에서 switch 문장을 사용할 필요가 없을 수도 있다는 상세한 내용입니다. 자바스크립트 switch 문장에 대한 더 많은 자료는 저희 다른 관련 문장을 주목하세요!