>  기사  >  웹 프론트엔드  >  JavaScript 삼항 연산자_javascript 기술을 사용하기 위한 다양한 기술

JavaScript 삼항 연산자_javascript 기술을 사용하기 위한 다양한 기술

WBOY
WBOY원래의
2016-05-16 16:03:421346검색

코드를 너무 많이 작성하면 무의식적으로 if else를 삼항으로 대체하게 됩니다. 그러면 코드가 더욱 간결해지고 예리해집니다. 물론 삼항을 사용하면 절정에 달할 수 있다고 말하는 사람들도 있습니다. 저도 최근에 js를 작성하면서 이런 느낌을 받았는데, 공유할 만한 몇 가지 팁을 모아봤습니다.

빅버드님, 다음 문단은 건너뛰세요. 빅버드가 수정 도와드리겠습니다^__^

====인기라인====

표현식 (expr1) ? (expr2) : (expr3)

expr1이 TRUE로 평가되면 값은 expr2이고, expr1이 FALSE로 평가되면 값은 expr3입니다.

============

일반적인 사용법

if else를 자주 사용하는 경우

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

if(고마워요 천형님 ||고마워요 고시황제){
실패하지 마세요
}그밖에{
문걸이;
}

그렇다면 삼항 표현은
코드 복사 코드는 다음과 같습니다.

천 형제를 숭배하세요 || 시험 황제를 숭배하세요. 시험에 실패하지 마세요: 멘멘항

통찰력 있는 코드를 많이 찾는 것은 매우 멋진 일입니다.

일상생활에서 이러한 if else 판단이 자주 발생하며, 특히 중첩이 많은 경우에는 삼항을 사용하는 것이 더 조화로워 코드를 더욱 산뜻하게 만들고 구조를 명확하게 만들 수 있습니다.

좀 더 스마트해진 사용법
지속적인 변화를 통해 삼항의 다양한 사용법이 파생될 수 있습니다. 다음 jquery 코드

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

플래그 ? $('body').addClass('hover') : $('body').removeClass('hover') ;

더욱 변태적이네요.
코드 복사 코드는 다음과 같습니다.

$('.item')[ 플래그 ? 'addClass' : 'removeClass']('hover')

위의 코드는 혼란스러워 보입니다. flag = true일 때 코드는 다음 코드가 되기 때문입니다.
코드 복사 코드는 다음과 같습니다.

$('.item')['addClass']('hover')

이 작성 방법은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.

$('.item').addClass('hover')

다시 업그레이드

필요에 따라 원하는 함수를 호출하여 더 많은 작업을 처리할 수 있습니다.

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

함수 a(){
뭐라도 해라
}
함수 b(){
뭐라도 해라
}

플래그 ? a() : b();

그럼 선생님 완전체

그러니까 버튼이 2개 있는데, 하나는 전진 동작용이고 하나는 후진 동작용입니다. 작동 기능은 거의 동일합니다.

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

var action_turn = 함수(e, 유형){
        var self = $(e).closest('li');
        var target = self[type === 'prev' ? 'prev' : 'next']();
          target.addClass('has-img');
          self.removeClass('has-img')
}

var btn_next = $('#item-photo-panel a.next')
btn_next.click(함수(){
        action_turn(this, '다음');
         false를 반환합니다.
});
var btn_prev = $('#item-photo-panel a.prev')
btn_prev.click(함수(){
        action_turn(this, '이전');
         false를 반환합니다.
});


피해야 할 것
코드 복사 코드는 다음과 같습니다.

경고( true ? 'true' : false ? 't' : 'f' )

내가 의미하는 것은 위와 같이 중첩된 삼항을 피하려고 하는 것입니다. 왜냐하면 js에서는 명령문이 오른쪽에서 왼쪽으로 이루어지고 위의 코드는
과 동일하기 때문입니다.
코드 복사 코드는 다음과 같습니다.

경고( true ? 'true' : ( false ? 't' : 'f' ) )

예를 들어, PHP에서는 세 개의 요소를 중첩하면 결과가 완전히 다릅니다.
코드 복사 코드는 다음과 같습니다.

echo (( true ? 'true' : false ) ? 't' : 'f' ) //php

팁:
게다가 PHP의 삼항에 이런 프롬프트가 있다는 걸 발견했습니다

참고: 삼항 연산자는 명령문이므로 평가는 변수가 아니라 명령문의 결과입니다. 이는 참조로 변수를 반환하려는 경우 중요합니다. 참조로 반환하는 함수의 return $var == 42 ? $a : $b; 문은 작동하지 않으며 향후 버전의 PHP에서는 이에 대한 경고가 표시됩니다.

그러나 테스트 후에 위의 접근 방식이 javascript에서 작동한다는 것을 알았습니다. 이는 아마도 js가 php에 비해 BT만큼 엄격하지 않기 때문일 것입니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.