자바스크립트 조건부 판단 활용 스킬 정리

이 기사는 javascript에 대한 관련 지식을 제공합니다. 주로 JavaScript 조건부 사용 기술에 대한 자세한 설명을 소개합니다. 도움이 필요한 친구들이 함께 살펴보시기 바랍니다. 모든 사람. .

[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]

이 글에서는 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를 사용하는 경우 열거형을 직접 사용할 수 있습니다.

Using Object

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

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (color in Colors) {
    return Colors[color]
  } else {
    return '#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 비디오 튜토리얼, web front-end】

위 내용은 자바스크립트 조건부 판단 활용 스킬 정리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!