자바스크립트 연산자 및 &&의 사용법에 대한 자세한 설명 ||

js AND-OR 연산자 || &&는 코드를 간소화하고 프로그램의 가독성을 줄이는 데 사용할 수 있는 훌륭한 도구입니다.

요구 사항 1.

성장 속도 표시 규정은 다음과 같다고 가정합니다.
성장률 5는 화살표 1개를 표시합니다.
성장률 12는 화살표 3개를 표시합니다. 15개 디스플레이의 성장률 4개의 화살표를 표시합니다.
다른 것들은 0개의 화살표를 표시합니다.
코드로 어떻게 구현하나요?

요구사항 2.

성장률 표시 규정은 다음과 같다고 가정합니다.

성장률이 12보다 큰 경우 4개의 화살표가 표시됩니다.

성장률이 12보다 큰 경우 3개의 화살표가 표시됩니다. 10;

성장률이 5보다 크면 화살표가 2개 표시됩니다.

성장률이 0보다 크면 화살표가 1개 표시됩니다.

성장률이 0보다 크면 화살표가 0개 표시됩니다.

그렇다면 스위치로 구현하는 것은 매우 번거로운 작업입니다.

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

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

더 강력하고 더 나은:

var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;

var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

우선, 개념을 정리합시다: js 로직에서는 작업 중에 0, " ", null, false, undefound, NaN 등은 모두 false로 판단되며, 나머지는 모두 true로 판단됩니다. (빠진 것이 없는 것 같으니 확인 부탁드립니다.) 이를 기억해야 합니다. 그렇지 않으면 || 및 &&를 사용할 때 문제가 발생합니다.

그나저나: 사람들은 if(!!attr) 코드를 많이 보면 왜 직접 if(attr)를 쓰지 않느냐고 묻곤 합니다.

사실 이 방법이 더 엄격한 작성 방법입니다.
테스트해 보세요. typeof 5와 typeof!5 차이. !!의 기능은 다른 유형의 변수를 bool 유형으로 변환하는 것입니다.
다음에서는 논리 연산자 &&와 ||에 대해 주로 설명합니다.
거의 모든 언어에서 || 및 &&는 "단락" 원칙을 따릅니다. 예를 들어 &&의 첫 번째 표현식이 거짓이면 두 번째 표현식은 처리되지 않지만 ||는 그 반대입니다.
js도 위의 원칙을 따릅니다. 하지만 더 흥미로운 것은 그들이 반환하는 값입니다.
Code: var attr = true && 4 && “aaa”;
그러면 attr 연산의 결과는 단순히 true 또는 false가 아니라 "aaa"입니다.
한 번 살펴보겠습니다. ||:
Code: var attr = attr || ""; 이 작업은 변수가 정의되었는지 확인하는 데 자주 사용됩니다. 정의되지 않은 경우 초기 값을 지정합니다. 이는 함수 매개변수의 기본값을 정의할 때 더 유용합니다. 왜냐하면 PHP와 달리 js는 유형 매개변수에 func($attr=5)를 직접 정의할 수 있기 때문입니다. 다시 한 번 위의 원칙을 기억하세요. 실제 매개변수가 0, "", null, false, 정의되지 않음 또는 NaN이어야 하는 경우 해당 매개변수도 false로 처리됩니다.

if(a >=5){ 
alert("你好"); 
}

는 다음과 같이 작성할 수 있습니다.

a >= 5 && alert("你好");

여기에는 코드 한 줄만 필요합니다. 하지만 한 가지 주목할 점은 js의 || 및 && 기능이 코드를 간소화하는 데 도움이 되지만 코드의 가독성도 떨어진다는 것입니다. 이를 위해서는 우리 스스로 무게를 달아야 합니다.

JS 코드를 간소화하면 특히 널리 사용되는 JS 공공 라이브러리의 경우 네트워크 트래픽을 크게 줄일 수 있습니다. 제가 개인적으로 추천하는 것은: 상대적으로 복잡한 애플리케이션이라면 적절하게 코멘트를 적어주세요. 이는 코드를 단순화할 수 있는 표현식과 동일하지만 가독성이 떨어지며, 코드를 읽는 사람의 요구 사항이 더 높아지는 가장 좋은 방법은 주석을 작성하는 것입니다.

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

var wrap = 
    // option or optgroup 
    !tags.indexOf("<opt") && 
    [ 1, "<select multiple=&#39;multiple&#39;>", "</select>" ] || 
    !tags.indexOf("<leg") && 
    [ 1, "<fieldset>", "</fieldset>" ] || 
    tags.match(/^<(thead|tbody|tfoot|colg|cap)/) && 
    [ 1, "<table>", "</table>" ] || 
    !tags.indexOf("<tr") && 
    [ 2, "<table><tbody>", "</tbody></table>" ] || 
    // <thead> matched above 
    (!tags.indexOf("<td") || !tags.indexOf("<th")) && 
    [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] || 
    !tags.indexOf("<col") && 
    [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] || 
    // IE can&#39;t serialize <link> and <script> tags normally 
    !jQuery.support.htmlSerialize && 
    [ 1, "p<p>", "</p>" ] || 
    [ 0, "", "" ]; 
    // Go to html and back, then peel off extra wrappers 
    p.innerHTML = wrap[1] + elem + wrap[2]; 
    // Move to the right depth 
    while ( wrap[0]-- ) 
        p = p.lastChild;

이 코드는 작성자가 $(html)을 처리하는 데 사용됩니다. 5a07473c87748fb1bf73f23d45547ab8과 같은 일부 태그는 제한되어야 합니다. 선택> ;선택>.

아마도 작성자의 또 다른 매우 영리한 점은 !tags.indexOf("

위 내용은 자바스크립트 연산자 및 &&의 사용법에 대한 자세한 설명 ||의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!