Artikel yang menerangkan sintaks dan penggunaan biasa operator ternary dalam JS

Artikel ini akan membincangkan sintaks operator ternary dalam JavaScript dan beberapa kegunaan biasa saya harap ia akan membantu anda!

Pengendali ternary (juga dikenali sebagai operator bersyarat) boleh digunakan untuk melakukan semakan bersyarat sebaris dan bukannya menggunakan if...else kenyataan. Ia menjadikan kod lebih pendek dan lebih mudah dibaca. Ia boleh digunakan untuk menetapkan nilai kepada pembolehubah berdasarkan syarat, atau untuk melaksanakan ungkapan berdasarkan syarat.

Sintaks

Operator ternary menerima tiga operan; ia adalah satu-satunya operator dalam JavaScript yang boleh melakukan ini. Anda menyediakan syarat untuk menguji, diikuti dengan tanda soal, dan kemudian dua ungkapan yang dipisahkan oleh titik bertindih. Jika keadaan dianggap benar, ungkapan pertama dilaksanakan jika ia dianggap palsu, ungkapan terakhir dilaksanakan.

Ia digunakan dalam format berikut:

condition ? expr1 : expr2

Di sini, condition ialah syarat untuk diuji. Jika nilainya dianggap true, expr1 dilaksanakan. Jika tidak, jika nilainya dianggap false, expr2 dilaksanakan.

expr1 dan expr2 ialah sebarang ungkapan. Ia boleh menjadi pembolehubah, panggilan fungsi atau keadaan lain.

Contohnya:

1 > 2 ? console.log("true") : console.log('false');

Menggunakan operator ternary untuk penugasan

Salah satu kes penggunaan yang paling biasa untuk operator ternary ialah membuat keputusan yang mana Nilai diberikan kepada pembolehubah. Selalunya, nilai satu pembolehubah mungkin bergantung pada nilai pembolehubah atau keadaan yang lain.

Walaupun ini boleh dilakukan menggunakan pernyataan if...else, ia menjadikan kod lebih panjang dan kurang boleh dibaca. Contohnya:

const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = '数组太长';
} else {
  message = '数组太短';
}

console.log(message); // 数组太长

Dalam contoh kod ini, anda terlebih dahulu mentakrifkan pembolehubah message. Anda kemudian menggunakan pernyataan if...else untuk menentukan nilai pembolehubah.

Ini boleh dilakukan hanya dalam satu baris menggunakan operator ternary:

const numbers = [1,2,3];
let message = numbers.length > 2 ? '数组太长' : '数组太短';

console.log(message); // 数组太长

Gunakan operator ternary untuk melaksanakan ungkapan

tiga Meta operator boleh digunakan untuk melakukan apa-apa jenis ungkapan.

Sebagai contoh, jika anda ingin memutuskan fungsi mana yang hendak dijalankan berdasarkan nilai pembolehubah, anda boleh melakukannya menggunakan pernyataan if...else berikut:

if (feedback === "yes") {
  sayThankYou();
} else {
  saySorry();
}

Ini boleh dilakukan dalam satu baris menggunakan operator ternary Completed in:

feedback === "yes" ? sayThankYou() : saySorry();

Jika feedback mempunyai nilai yes, maka sayThankYou akan memanggil dan melaksanakan fungsi tersebut. Jika tidak, fungsi saySorry akan dipanggil dan dilaksanakan.

Gunakan operator ternary untuk semakan nol

Dalam banyak kes, anda mungkin berurusan dengan pembolehubah yang mungkin atau mungkin tidak mempunyai nilai yang ditentukan - contohnya, daripada pengguna Apabila memasukkan hasil carian, atau apabila mendapatkan semula data daripada pelayan.

Menggunakan operator ternary, anda boleh menyemak kewujudan pembolehubah dengan menghantar namanya sebagai ganti operan bersyarat null. undefined

Ini amat berguna apabila pembolehubah ialah objek. Jika anda cuba mengakses harta null pada objek yang sebenarnya undefinedatau ralat akan berlaku. Menyemak bahawa objek sebenarnya ditetapkan dahulu boleh membantu anda mengelakkan ralat.

Contohnya:

let book = { name: '小明', works: '斗破苍穹' };
console.log(book ? book.name : '张三'); // "小明"

book = null;
console.log(book ? book.name : '张三'); // "张三"

Dalam bahagian pertama blok kod ini, book ialah objek dengan dua sifat - name dan works menggunakan operasi ternary pada Apabila simbol ialah book, ia akan menyemak sama ada ia bukan null atau undefined. Jika tidak - bermakna ia mempunyai nilai - name maka harta itu diakses dan akan dikeluarkan kepada konsol. Jika tidak, jika kosong, 张三 mencetak pada konsol.

Oleh kerana bookbukan null, tajuk buku akan direkodkan dalam konsol. Walau bagaimanapun, dalam bahagian kedua, apabila syarat yang sama digunakan, syarat dalam operator ternary gagal kerana bookialah null. Oleh itu, "Zhang San" mengeluarkan konsol.

Syarat bersarang

Walaupun pengendali ternary digunakan sebaris, berbilang syarat boleh digunakan sebagai sebahagian daripada ungkapan operator ternary. Anda boleh membuat sarang atau rantaian berbilang syarat untuk melakukan semakan bersyarat serupa dengan pernyataan if...else if...else.

Sebagai contoh, nilai pembolehubah mungkin bergantung pada berbilang syarat. Ia berfungsi menggunakan if...else if...else:

let score = '67';
let grade;
if (score <p> Dalam blok kod ini, anda menguji berbilang syarat pada pembolehubah <code>score</code> untuk menentukan gred huruf pembolehubah. </p><p> Keadaan yang sama ini boleh dilakukan menggunakan pengendali ternary, seperti berikut: </p><pre class="brush:php;toolbar:false">let score = '67';
let grade = score <p> menilai syarat pertama, iaitu <code>score . Jika ia <code>true</code>, maka nilai <code>grade</code> ialah <code>F</code>. Jika ia <code>false</code>, ungkapan kedua dinilai, iaitu <code>score . </code></code></p><p>Ini berterusan sehingga semua syarat adalah <code>false</code>, yang bermaksud nilai pangkat akan menjadi <code>A</code>, atau sehingga salah satu syarat dinilai sebagai <code>true</code> dan nilai sebenarnya diberikan kepada <code>grade</code>. </p><h2 data-id="heading-5"><strong>示例</strong></h2><p>在这个实时示例中，您可以测试三元运算符如何在更多条件下工作。
如果您输入的值小于 100，则会显示“太低”消息。如果您输入的值大于 100，则会显示消息“太高”。如果输入 100，将显示“完美”消息。</p><pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			#result {
				display: block;
			}

			button,
			#result {
			 margin-top: 10px;
			}
		</style>
		
	</head>
	<body>
		<div>
			<label for="number">输入一个数字</label>
			<input type="number" name="number" id="number" />
		</div>
		<button>提交</button>
		<span id="result"></span>
	</body>
	<script>
		const button = document.querySelector(&#39;button&#39;);
		const numberElm = document.querySelector(&#39;#number&#39;);
		const resultElm = document.querySelector(&#39;#result&#39;);
	
		button.addEventListener(&#39;click&#39;, function() {
			resultElm.textContent = numberElm.value > 100 ? &#39;太高&#39; : (numberElm.value < 100 ? &#39;太低&#39; : &#39;完美&#39;);
		});
	</script>
</html>

结论

正如本教程中的示例所解释的，JavaScript 中的三元运算符有很多用例。if...else在许多情况下，三元运算符可以通过替换冗长的语句来增加代码的可读性。

【相关推荐：javascript视频教程、编程基础视频】

Atas ialah kandungan terperinci Artikel yang menerangkan sintaks dan penggunaan biasa operator ternary dalam JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!