js 및 또는 연산자 || && 멋진 use_javascript 기술

먼저 질문을 드리겠습니다.

그림과 같이
성장 속도 표시 규정은 다음과 같다고 가정합니다.
성장률 5는 화살표 1개를 표시합니다. >성장률 10은 화살표 2개를 표시합니다.
성장률 12는 화살표 3개를 표시합니다.
성장률 15는 화살표 4개를 표시합니다.
코드로 어떻게 구현하나요?

거의 if, else:
Js 코드

코드 복사 코드는 다음과 같습니다.

var add_level = 0;

if(add_step == 5){
add_level = 1
}
else if(add_step == 10){
add_level = 2;
}
else if(add_step == 12){
add_level = 3
}
else if(add_step == 15){
add_level = 4; 🎜 >}
else {
add_level = 0;
}


약간 더 나은 스위치:
Js 코드

코드 복사 코드는 다음과 같습니다. var add_level = 0

switch(add_step){

case 5: add_level = 1 ;
break;
case 10: add_level = 2;
case 12: add_level = 3;
case 15: add_level = 4; ;
default : add_level = 0;
break;


} 요구사항이 다음과 같이 변경된 경우:
성장률이 12보다 크며 화살표가 4개 표시됩니다. 성장률은 >10입니다. 3개의 화살표가 표시됩니다.
성장률이 5보다 크면 화살표가 2개 표시됩니다.
성장률이 0보다 크면 화살표가 1개 표시됩니다.
성장률은
그렇다면 스위치로 구현하는 것은 매우 번거로울 것입니다.

그렇다면 단 한줄의 코드로 구현하는 것을 생각해보신 적 있으신가요?
자, js의 강력한 표현력을 살펴보겠습니다.
Js 코드




코드 복사


코드는 다음과 같습니다. 다음과 같습니다:

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || && 4 ) || 0; 더 강력하고 더 좋아짐:

Js 코드

코드 복사


코드는 다음과 같습니다.

var add_level={'5':1,'10':2,'12':3,'15':4}[add_step ] || 0; 두 번째 요구사항: Js 코드

코드 복사


다음:

var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || 0
먼저 개념을 정리하겠습니다. 기억하세요: js 논리 연산에서는 0, "", null, false, undefine 및 NaN이 모두 false로 판단되고 나머지는 모두 true로 판단됩니다( 누락된 부분은 없는 것 같습니다.) 음, 확인 부탁드립니다. 이것을 기억해야 합니다. 그렇지 않으면 || 및 &&를 사용할 때 문제가 발생합니다.
그런데 사람들은 if(!!attr); 코드가 많이 나오는데 왜 if(attr)만 쓰지 않느냐고 자주 묻습니다.
사실 이 방법이 더 엄격한 작성 방법입니다. :
typeof5와 typeof!!5의 차이점을 테스트해 보세요. !!의 기능은 다른 유형의 변수를 bool 유형으로 변환하는 것입니다.
다음에서는 주로 논리 연산자 &&와 ||에 대해 설명합니다.
거의 모든 언어에서 || 및 &&는 "단락" 원칙을 따릅니다. 예를 들어 &&의 첫 번째 표현식이 거짓이면 두 번째 표현식은 처리되지 않지만 ||는 그 반대입니다.
js도 위의 원칙을 따릅니다. 하지만 더 흥미로운 것은 그들이 반환하는 값입니다.
코드: var attr = true && 4 && “aaa”
그러면 attr 연산의 결과는 단순히 true 또는 false가 아니라 "aaa"입니다.
한 번 살펴보겠습니다. ||:
코드: var attr = attr || ""; 이 작업은 변수가 정의되었는지 확인하는 데 자주 사용됩니다. 그렇지 않은 경우에는 함수 매개변수의 기본값을 정의할 때 더 유용합니다. 왜냐하면 PHP와 달리 js는 유형 매개변수에 func($attr=5)를 직접 정의할 수 있기 때문입니다. 다시 한 번 위의 원칙을 기억하세요. 실제 매개변수가 0, "", null, false, 정의되지 않음 또는 NaN이어야 하는 경우 해당 매개변수도 false로 처리됩니다.

if(a >=5){
alert("Hello")
}
는 다음과 같이 쓸 수 있습니다:
a >= 5 && Alert("Hello ");
여기에는 코드 한 줄만 필요합니다. 하지만 한 가지 주목할 점은 js의 || 및 && 기능이 코드를 간소화하는 데 도움이 되지만 코드의 가독성도 떨어진다는 것입니다. 이를 위해서는 우리 스스로 무게를 달아야 합니다.
한편으로는 JS 코드를 간소화하면 특히 널리 사용되는 JS 공공 라이브러리의 경우 네트워크 트래픽을 크게 줄일 수 있습니다. 제가 개인적으로 추천하는 것은: 상대적으로 복잡한 애플리케이션이라면 적절하게 코멘트를 적어주세요. 이는 코드를 단순화할 수 있는 표현식과 동일하지만 가독성이 떨어지며, 코드를 읽는 사람의 요구 사항이 더 높아지는 가장 좋은 방법은 주석을 작성하는 것입니다.

이런 기술을 사용할 필요는 없지만 이해할 수 있어야 합니다. 왜냐하면 이러한 기술은 널리 사용되었기 때문입니다. 특히 JQuery와 같은 js 상자의 코드를 이해하지 못한다면 더욱 그렇습니다. , 다른 사람의 코드를 이해하기 어려울 것입니다.
var Yahoo = Yahoo ||처럼 매우 널리 사용됩니다.
자, 마지막으로 jQuery의 코드를 살펴보겠습니다.

Js 코드

코드 복사 코드는 다음과 같습니다.

var Wrap =
// 옵션 또는 optgroup
!tags.indexOf(" [ 1, "< ;다중 선택 ='다중'>", "" ] ||

!tags.indexOf(" [ 1, "

", "

" ] ||

tagged.match(/^ [ 1, "" ] ||

!tags.indexOf(" [ 2, "", "< ;/tbody> ;" ] ||

// 는 위에서 일치
(!tags.indexOf(" [ 3, "", "" ] ||

!tags.indexOf(" [ 2, "", " " ] ||

// IE는 및 <script> 태그를 정상적으로 직렬화할 수 없습니다. <BR> !jQuery.support.htmlSerialize && <BR> [ 1, "div< div>" , "" ] || <br><br> [ 0, "", "" ]; <br><br> // HTML로 이동한 다음 그 뒤로 추가 래퍼를 벗겨냅니다. <BR> div .innerHTML = Wrap[1] elem Wrap[2]; <br><br> // 오른쪽 깊이로 이동 <BR> while ( Wrap[0]-- ) <BR> div = div.lastChild; <BR> <br><br>이 코드는 작성자가 $(html)을 처리하는 데 사용됩니다. <option>은 <select> 내에 있어야 합니다. <BR>아마도 작성자가 !tags.indexOf("<opt")라는 또 다른 매우 기발한 기능을 가지고 있다는 사실을 발견하셨을 것입니다. 작성자는 중복되는 코드 없이 매우 간단하게 startWith 함수를 구현했습니다. jquery 소스 코드에는 누구나 배울 수 있는 정교한 코드가 많이 있습니다.</script>