자바스크립트 조건부 판단 활용법에 대해 이야기해보겠습니다.-JS 튜토리얼-php.cn

이 기사는 JavaScript에 대한 관련 지식을 주로 설명합니다. 관심 있는 친구는 아래를 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.

이 글에서는 좀 더 간결한 코드를 작성하는 데 도움이 되도록 JavaScript에서 더 간단한 조건부 판단을 작성하는 방법을 소개합니다. 소스 코드 주소

색상 값을 16진수 인코딩으로 변환하는 함수가 있다고 가정해 보겠습니다.

function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === 'slate') {
      return '#64748b'
    } else if (color === 'gray') {
      return '#6b7280'
    } else if (color === 'red') {
      return '#ef4444'
    } else if (color === 'orange') {
      return '#f97316'
    } else if (color === 'yellow') {
      return '#eab308'
    } else if (color === 'green') {
      return '#22c55e'
    } else {
      return '#ffffff'
    }
  } else {
    return '#ffffff'
  }
}

이 함수의 기능은 매우 간단합니다. 색상 문자열을 전달한 다음 해당 16진수를 반환하는 것입니다. 전달된 값이 문자열이 아니거나 아무것도 전달되지 않으면 흰색 16진수가 반환됩니다.

다음으로 이 코드 최적화를 시작하겠습니다.

문자열을 조건으로 직접 사용하지 마세요

문자열을 직접 조건으로 사용하는 데 문제가 있습니다. 즉, 철자 실수를 하면 매우 당황스럽습니다.

convertToHex("salte")

이 오류를 방지하려면 상수를 사용할 수 있습니다.

const Colors = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === Colors.SLATE) {
      return '#64748b'
    } else if (color === Color.GRAY) {
      return '#6b7280'
    }
    // ...
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

typescript를 사용하는 경우 열거형을 직접 사용할 수 있습니다.

객체 사용하기

사실 위의 코드에서 객체의 값에 16진수 값을 직접 저장할 수 있다는 것을 찾는 것은 어렵지 않습니다.

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (color in Colors) {
    return Colors[color]
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

이렇게 하면 코드가 더 간결해지고 읽기 쉬워집니다.

기대에 미치지 못하면 미리 반품하세요

또 다른 모범 사례는 기대에 미치지 못하는 상황을 함수 앞에 적어두고, 반품하는 것을 잊지 않도록 미리 반품하는 것입니다. const 색상 = { 슬레이트: '#64748b', 회색: '#6b7280', // ... } 함수 변환ToHex(색상) { if (!color 색상) { '#ffffff'를 반환합니다. } 색상[색상] 반환 } ConvertToHex(Colors.SLATE)

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (!color in Colors) {
    return '#ffffff'
  }
  return Colors[color]
}
convertToHex(Colors.SLATE)

이렇게 하면 다른 것이 필요하지 않습니다. 이 기술을 사용하면 코드에서 다른 많은 부분을 제거할 수 있습니다.

객체와 함께 Map 사용

map을 사용하는 것이 더 전문적입니다. 왜냐하면 map은 모든 유형의 키를 저장할 수 있고 Map.prototype에서 상속되며 더 편리한 메서드와 속성을 갖기 때문입니다.

그리고 Object는 속성에 액세스하는 데 더 편리합니다. 계속해서 Object를 사용하여 열거형을 구현할 수 있습니다.

const ColorsEnum = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
const Colors = new Map()
Colors.set(ColorsEnum.SLATE, '#64748b')
Colors.set(ColorsEnum.GRAY, '#6b7280')
// ...
Colors.set('DEFAULT', '#ffffff')
function convertToHex(color) {
  if (!Colors.has(color)) {
    return Colors.get('DEFAULT')
  }
  return Colors.get(color)
}
convertToHex(Colors.SLATE)

Map에는 함수도 저장할 수 있습니다

많은 색상, 최대 수천 가지 색상을 저장하고 백엔드 구성도 지원해야 하며 결과는 일종의 계산 프로세스를 통해 얻을 수 있다고 가정해 보겠습니다.

그런 다음 지도를 사용하여 함수를 저장할 수 있습니다.

return Colors.get(color)()

삼항식과 스위치는 피하세요

삼항식은 간략하지만 다단계 조건이라면 읽기가 매우 어려울 것입니다.

switch는 if에 비해 뚜렷한 이점이 없습니다. 대신 반환하기가 쉬워 코드가 예상대로 실행되지 않는 경우가 있습니다.

이상은 JavaScript 조건부 판단 활용 기법에 대한 자세한 설명입니다.

추천 학습: "JavaScript 비디오 튜토리얼"

위 내용은 자바스크립트 조건부 판단 활용법에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!