> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트의 연산자, 연산자, {} 사용법에 대한 자세한 설명

자바스크립트의 연산자, 연산자, {} 사용법에 대한 자세한 설명

伊谢尔伦
풀어 주다: 2017-07-18 14:01:39
원래의
1188명이 탐색했습니다.

1. 일반적인 삼항 연산자 사용

if (foo) bar(); else baz(); ==> foo?bar():baz();
if (!foo) bar(); else baz(); ==> foo?baz():bar();
if (foo) return bar(); else return baz(); ==> return foo?bar():baz();
로그인 후 복사

if 문을 최적화하기 위해 위의 삼항 연산자 사용에 확실히 익숙할 것이며 아마도 자주 사용할 수도 있습니다.

<script>
var i=9
var ii=(i>8)?100:9;
alert(ii);
</script>
로그인 후 복사

출력 결과:

100

2. and(&&) 및 or(||) 연산자를 사용하세요.

if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();
로그인 후 복사

3 중괄호를 생략하세요. {}

if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}
로그인 후 복사

이런 방식은 매우 짜증납니다. 당신과 나에게 익숙하다면 코드를 최적화할 때 이렇게 하거나 UglifyJS가 해결하도록 도와주는 것이 좋습니다. 결국 중괄호가 하나라도 빠져 있으면 코드의 가독성이 높지 않습니다.

이 글을 쓰면서 jQuery의 아버지가 쓴 "JavaScript 마스터하기"에서 HTML 요소 속성을 얻는 방법을 생각했습니다.

function getAttr(el, attrName){
var attr = {&#39;for&#39;:&#39;htmlFor&#39;, &#39;class&#39;:&#39;className&#39;}[attrName] || attrName;
};
로그인 후 복사

이렇게 작성하지 않으면 두 개의 if 문을 사용하여 처리해야 할 수도 있습니다. 위 코드는 간결하고 효과적일 뿐만 아니라 가독성도 높습니다.

잘 생각해보면 문제를 해결하는 효과적인 방법을 찾을 수 있는 경우가 많지만, 중요한 것은 우리가 더 나은 방법을 찾기 위해 마음을 사용하느냐에 있습니다.

【자바스크립트 기술】if(x==null) 약어

if(x==null) 또는 if (typeof (x) == 'undefine')은 확인되지 않은 if(!x)로 축약될 수 있습니다. .

반대로, if(x)는 x가 비어 있지 않음을 의미합니다

객체가 존재하는지 판단하세요

if(document.form1.softurl9){
//判断是否存在softurl9,防止js出错
}
로그인 후 복사
if(document.getElementById("softurl9")){
//判断是否存在softurl9,防止js出错
}
로그인 후 복사


보충:

javascript || && 약어 if

<script type="text/javascript"> 
    如果你想写 
    if (!false) 
    { 
        alert(&#39;false&#39;); 
    } 
    不妨考虑写成: 
    false || alert(&#39;false&#39;); 
    false || alert(&#39;false&#39;); true || alert(&#39;true&#39;); //output false; 
    用"||"的情况下,第一个条件true,不检测第二个直接返回true.第一个条件false,会执行第二个条件检测 
    false && alert(&#39;false&#39;); true && alert(&#39;true&#39;); //output true 
    用"&&"的情况下,第一个条件true,还会检测第二个条件。第一个条件false,直接返回false退出。 
    简而言之, 替换 if 的简单实用, ? : 替换 if else的实用。 写短小精悍的代码 
    usage: 
    $("#regform input[type!=hidden]").each( 
        function(index) { 
            $(this).parent().has("p.valid-under").length || $(&#39;<p class="valid-under"></p>&#39;).appendTo($(this).parent()); 
        } 
    );   
</script>
로그인 후 복사


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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿