자바스크립트 조건부 판단 활용 스킬 정리-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2022-09-06 17:28:15

앞으로

2097명이 탐색했습니다.

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

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

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

이 글에서는 JavaScript로 더 간단한 조건부 판단을 작성하는 방법을 소개하는 짧은 시간을 들여 코드를 더 간결하고 가독성 있게 작성하는 데 도움을 줍니다. 암호.

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

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

로그인 후 복사

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

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

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

문자열을 조건으로 직접 사용하면 문제가 있습니다. 즉, 철자 실수를 하면 당황스러울 것입니다.

convertToHex("salte")

로그인 후 복사

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

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

로그인 후 복사

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

Using Object

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

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

로그인 후 복사

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

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

또 다른 좋은 방법은 기대에 미치지 못하는 상황을 함수 앞에 적어두고, 반납하는 것을 잊지 않도록 미리 반납하는 것입니다.

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

로그인 후 복사

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

객체와 함께 Map 사용

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

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

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

로그인 후 복사