코딩하는 동안 자신을 반복하는 것에 지쳤습니까? 당신은 여전히 전통적인’만약… 내가 당신에게 말하면,당신은 4 줄에 15 줄의 코드를 쓸 수 있습니까? 지금 1-800-삼항 연산자를 호출합니다.
삼항 연산자는 다른 문장의 속기 버전입니다. 자바스크립트에서 3 개의 피연산자를 사용하는 유일한 조건부 연산자입니다.
삼항 연산자의 기본 구문은
조건입니까? 표현 1 : 표현 2
- 조건이 테스트/평가될 값인 경우,
- 표현식 1 은 표현식 1 이 거짓인 경우 실행될 모든 유형의 값일 수 있습니다.
- 표현식 2 는 표현식 1 이 거짓인 경우 실행될 모든 유형의 값일 수 있습니다.즉,대체 값은 일반적으로’다른’
- “? “의미”만약”,그리고” : “의미”다른”
의 예를 살펴 보자
우리는 하나를 사용하여,자신의 나이에 의해 구동 할 수 있는지 확인한다면 경우…다른 문을—이 같은 것을 보인다
var age = 18;if (age >= 16) {
alert("You're allowed to drive!");
}else {
alert("You should be 16 to drive!");
}// "You're allowed to drive!"
삼항 연산자를 사용하여,같은 코드는 다음과 같습니다
var age = 18;alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"// You're allowed to drive!
짜잔! 이 코드 블록은 변수’나이’가 16 보다 크거나 같으면 브라우저가’운전 허용’이라고 경고해야합니다!’,그렇지 않으면’당신은 운전 16 해야한다!’경고해야한다!
삼항식을 채택하는 또 다른 이유는 코드의 어느 곳에 나 적합 할 수있는 유연성과 소형 크기 때문입니다. 예를 들어 문자열의 결과를 문자열에 직접 연결하려는 경우 조건을 별도로 선언하지 않고도 쉽게 연결할 수 있습니다.
var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00
멤버가 참인 경우’수수료는$2.00’이고’수수료는$10.00’입니다.
무엇을 추측?! 또한 삼항 연산의 결과를 변수에 할당할 수도 있습니다. 우리가 이전에 사용한 것과 동일한 운전 예를 사용합시다.
var age = 18;
var canDrive = (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!";
console.log(canDrive); // "You're allowed to drive!"
이 예제에서는 결과를 변수에 저장하고 나중에 콘솔에 표시했습니다.
삼항 연산자에는 전통적인 경우… 여러 개의 삼항 연산자를 연결하여 우리가’만약…
var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!
위의 코드 블록은 연도가 2018 보다 작 으면 브라우저가’너무 일찍’경고하거나,연도가 2018 보다 크면’너무 늦음’이 표시되고,그렇지 않으면 더 크거나 작지 않은 경우’정확히’가 표시됩니다.
다음 문에서도 중첩할 수 있습니다:
var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!
우리의 눈은 코드를 수직으로 스캔하여 들여 쓰기와 공백이 코드를 쉽게 읽을 수 있도록 도와줍니다. 그들은 삼항에서 제외되지 않으며 여유 공간은 코드에 영향을 미치지 않습니다.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);
위의 코드는 모든 삼항 평가 또는 모든 경우…
사례당 여러 개의 작업을 수행하고 쉼표로 구분할 수도 있습니다.
var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.'),
location.assign('continue.html')
) : (
stop = true,
alert('Sorry, you are much too young!')
);
여러 작업을 수행하고 값을 변수에 할당할 수도 있습니다. 마지막 쉼표로 구분된 값이 변수에 할당됩니다.
var age = 16;
var auth = age > 18 ? (
alert('OK, you can go.'),
// alert returns "undefined", but it will be ignored because
// isn't the last comma-separated value of the parenthesis
'APPROVED' // the value to be assigned if age > 18
) : (
alert('You are much too young!'),
alert('Sorry :-('),
// etc. etc.
'DISAPPROVE' // the value to be assigned if !(age > 18)
);
location.assign(auth); // "DISAPPROVE"
마지막으로 삼항 연산을 사용하여 함수의 값을 반환 할 수 있습니다. 예를 들어,우리는 크리스 프랫 마블 유니버스의 구성원인지 여부를 결정하기 위해 값을 반환하는 함수를 작성한다면;
var marvel = true;function chrisPratt(marvel) {
if (marvel === true){
return "I am Star-Lord!";
}
else {
return "Have you watched Guardians of the Galaxy?";
}}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
다른 문을 작성하고 큰 괄호 등에 자신의 값을 포함했다. 그러나 삼항 연산자를 사용하여 단축 할 수 있습니다. 위의 동일한 코드는 삼항 연산에서와 같이 평가됩니다;
var marvel = true;function chrisPratt(marvel) {
return (marvel === true) ? "I am Star-Lord!" : "Have you watched Guardians of the Galaxy?";
}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"
참고:삼항 연산에 사용되는 모든 변수는 연산이 생성되기 전에 정의되어야 합니다.
당신이 그것을 멀리 만든 경우,감사합니다!
트위터와 인스 타 그램에 나를 추가 주시기 바랍니다