source

함수가 있는 JavaScript 3차 연산자 예제

ittop 2023. 8. 15. 11:45
반응형

함수가 있는 JavaScript 3차 연산자 예제

jQuery 1.7.1을 사용하고 있습니다.

나는 이제 막 자바스크립트 3차 연산자를 사용하여 간단한 if/else 문을 대체하기 시작했습니다.저는 여러 곳에서 성공적으로 해왔습니다.저는 다른 것을 성공적으로 만들었을 때 확실히 그렇게 되지 않을 것이라고 생각했을 때 놀랐지만, 어쨌든 노력했습니다.

원래 진술은 다음과 같습니다.

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    if (IsChecked == true){
        removeItem($this);
    } else {
        addItem($this);
    }
}

다음은 3진 연산자를 사용한 동일한 함수입니다.

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    (IsChecked == true) ? removeItem($this) : addItem($this);
}

사용된 예는 모두 다음과 같은 변수를 설정하는 것에 불과했기 때문에 놀랐습니다.

x = (1 < 2) ? true : false;

제 질문은 이것이 "정상적인" 사용이며 대부분의 자바스크립트 버전에서 작동할 것인가 하는 것입니다.어디서 실패할까요?그것에 대한 다른 덜 명백한 용도가 있습니까?

업데이트 -- "실제" 조언에 감사드립니다!!!

저는 이것을 제 기능으로 사용하고 있습니다.

function updateItem() {
    $this = $(this);
    $this.hasClass("IsChecked") ? removeItem($this) : addItem($this);
}

헤헤, 당신의 질문에 꽤 흥미로운 삼원통사의 사용법이 있습니다; 저는 마지막 것이 가장 좋습니다...

x = (1 < 2) ? true : false;

여기서 삼원을 사용하는 것은 완전히 불필요합니다 - 당신은 간단히 쓸 수 있습니다.

x = (1 < 2);

마찬가지로, 3항 문의 조건 요소는 항상 부울 값으로 평가되므로 다음을 표현할 수 있습니다.

(IsChecked == true) ? removeItem($this) : addItem($this);

간단히 말해:

(IsChecked) ? removeItem($this) : addItem($this);

사실, 저는 또한 그것을 제거할 것입니다.IsChecked또한 다음과 같은 이점을 제공합니다.

($this.hasClass("IsChecked")) ? removeItem($this) : addItem($this);

이것이 허용 가능한 구문인지에 대해서는, 확실히 그렇습니다!가독성에 영향을 주지 않으면서 코드 네 줄을 하나로 줄일 수 있는 좋은 방법입니다.제가 당신에게 해주고 싶은 유일한 조언은 같은 선에 여러 개의 삼원문을 내포하는 것을 피하라는 것입니다(그러면 광기가 있습니다!)

일반적으로 공간을 절약하기 위해 3진법이 사용됩니다.의미적으로, 그들은 동일합니다.저는 가독성을 희생하는 것을 좋아하지 않기 때문에 완전한 if/then/else 구문을 선호합니다. 저는 구식이고 교정기를 선호합니다.

대부분의 경우 전체 if/then/else 형식이 사용됩니다.각 분기의 코드 블록이 더 크거나, 다중 분기 if/else 트리가 있거나, 긴 문자열에 여러 개의 다른/if가 있는 경우 특히 인기가 있습니다.

삼원 연산자는 단순한 조건에 따라 변수에 값을 할당하거나 매우 짧은 결과로 여러 가지 결정을 내릴 때 일반적입니다.당신이 인용한 예는 사실 말이 안 됩니다. 왜냐하면 표현식은 추가 논리 없이 두 값 중 하나로 평가되기 때문입니다.

좋은 생각:

this > that ? alert(this) : alert(that);  //nice and short, little loss of meaning

if(expression)  //longer blocks but organized and can be grasped by humans
{
    //35 lines of code here
}
else if (something_else)
{
    //40 more lines here
}
else if (another_one)  /etc, etc
{
    ...

덜 좋음:

this > that ? testFucntion() ? thirdFunction() ? imlost() : whathappuh() : lostinsyntax() : thisisprobablybrokennow() ? //I'm lost in my own (awful) example by now.
//Not complete... or for average humans to read.

if(this != that)  //Ternary would be done by now
{
    x = this;
}
else
}
    x = this + 2;
}

정말 기본적인 경험칙입니다. 한 줄로 전체를 이해하거나 더 잘 이해할 수 있습니까?3학년은 괜찮습니다.그렇지 않으면 확장합니다.

저는 또한 저에게서 무언가를 추가하고 싶습니다.

3항 연산자를 사용하여 함수를 호출할 수 있는 다른 구문은 다음과 같습니다.

(condition ? fn1 : fn2)();

두 기능 모두에 동일한 파라미터 목록을 전달해야 하므로 한 번만 작성해야 하는 경우에 유용합니다.

(condition ? fn1 : fn2)(arg1, arg2, arg3, arg4, arg5);

공간 절약을 위해 개인적으로 매우 좋아하는 멤버 함수 이름으로도 3진 연산자를 사용할 수 있습니다.

$('.some-element')[showThisElement ? 'addClass' : 'removeClass']('visible');

또는

$('.some-element')[(showThisElement ? 'add' : 'remove') + 'Class']('visible');

다른 예:

var addToEnd = true; //or false
var list = [1,2,3,4];
list[addToEnd ? 'push' : 'unshift'](5);

당신이 올린 예시는 특별히 까다로운 것이 없습니다.

에서는 첫 인수가 3인 에는 3진법을 합니다.true두 번째 인수는 평가되고 반환되며, 그렇지 않으면 세 번째 인수는 평가되고 반환됩니다.이러한 각 인수는 함수 호출을 포함하여 유효한 코드 블록일 수 있습니다.

다음과 같이 생각해 보십시오.

var x = (1 < 2) ? true : false;

다음과 같이 쓸 수도 있습니다.

var x = (1 < 2) ? getTrueValue() : getFalseValue();

이것은 완벽하게 유효하며 이러한 함수는 값 반환과 관련이 있는지 여부에 관계없이 임의 코드를 포함할 수 있습니다.또한 함수 결과가 어떤 것에도 할당될 필요가 없는 것처럼 3차 연산의 결과도 어떤 것에도 할당될 필요가 없습니다.

(1 < 2) ? getTrueValue() : getFalseValue();

이제 임의의 함수로 이러한 함수를 대체하면 다음과 같은 예가 표시됩니다.

(1 < 2) ? removeItem($this) : addItem($this);

자, 마지막 예는 다음과 같이 쓰여질 수 있기 때문에 실제로는 3진법이 전혀 필요하지 않습니다.

x = (1 < 2);  // x will be set to "true"

만약 당신이 neternal operators에 간다면, 저는 당신이 다음과 같은 것을 하고 싶어할 것이라고 믿습니다.

   var audience = (countrycode == 'eu') ? 'audienceEU' :
                  (countrycode == 'jp') ? 'audienceJP' :
                  (countrycode == 'cn') ? 'audienceCN' :
                  'audienceUS';

쓰기/읽기가 다음보다 훨씬 효율적입니다.

var audience = 'audienceUS';
if countrycode == 'eu' {
   audience = 'audienceEU';
} else if countrycode == 'jp' {
   audience = 'audienceJP';
} else if countrycode == 'cn' {
   audience = 'audienceCN';
}

모든 좋은 프로그래밍과 마찬가지로, 공백은 프로젝트를 마친 후 코드를 읽어야 하는 사람들에게 모든 것을 좋게 해줍니다.

질문에 이미 답했다는 것을 알고 있습니다.

하지만 여기에 한 가지 요점을 추가하겠습니다.이것은 단지 참 또는 거짓의 경우만은 아닙니다.아래 참조:

var val="Do";

Var c= (val == "Do" || val == "Done")
          ? 7
          : 0

여기서 val이 Do 또는 Done이면 c는 7이 되고 그렇지 않으면 0이 됩니다.이 경우 c는 7이 됩니다.

이것은 실제로 이 운영자의 또 다른 관점입니다.

언급URL : https://stackoverflow.com/questions/10323829/javascript-ternary-operator-example-with-functions

반응형