JSの三項演算子の構文と一般的な使い方を解説した記事-jsチュートリアル-php.cn

JSの三項演算子の構文と一般的な使い方を解説した記事

青灯夜游

リリース： 2022-10-14 19:31:25

転載

3565 人が閲覧しました

この記事では、JavaScript の三項演算子の構文といくつかの一般的な使用法について説明します。

JSの三項演算子の構文と一般的な使い方を解説した記事

三項演算子 (条件演算子 とも呼ばれます) を使用すると、# を使用する代わりにインライン条件チェックを実行できます。 ##if...else ステートメント。コードが短くなり、読みやすくなります。条件に基づいて変数に値を割り当てたり、条件に基づいて式を実行したりするために使用できます。

構文

三項演算子は 3 つのオペランドを受け入れます。JavaScript でこれを実行できる唯一の演算子です。テストする条件を指定し、その後に疑問符、コロンで区切られた 2 つの式を指定します。条件が true とみなされる場合は最初の式が実行され、条件が false とみなされる場合は最後の式が実行されます。

これは次の形式で使用されます。

condition ? expr1 : expr2

ログイン後にコピー

ここで、

condition はテストする条件です。その値が true とみなされる場合、expr1 が実行されます。それ以外の場合、その値が false とみなされると、expr2 が実行されます。

expr1 および expr2 は任意の式です。変数、関数呼び出し、またはその他の条件を指定することもできます。

例:

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

ログイン後にコピー

代入に三項演算子を使用する

三項演算子の最も一般的な使用例の 1 つは、どの値を決定するかです。変数に代入します。多くの場合、ある変数の値は別の変数または条件の値に依存することがあります。

これは

if...else ステートメントを使用して実行できますが、コードが長くなり、読みにくくなります。例:

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

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

ログイン後にコピー

このコード例では、最初に変数

message を定義します。次に、if...else ステートメントを使用して変数の値を決定します。

これは、三項演算子を使用して 1 行で簡単に実行できます。

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

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

ログイン後にコピー

三項演算子を使用して式を実行します。

三項演算子を使用できます。任意のタイプの式を実行します。

たとえば、変数の値に基づいて実行する関数を決定したい場合は、次の

if...else ステートメントを使用してこれを行うことができます:

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

ログイン後にコピー

これは、三項演算子を 1 行で実行できます。

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

ログイン後にコピー

フィードバックの値が yes の場合、sayThankYou は次のようになります。が呼び出され、関数が実行されます。それ以外の場合は、saySorry 関数が呼び出されて実行されます。

null チェックに三項演算子を使用する

多くの場合、ユーザーからの値など、値が定義されている場合とない場合がある変数を扱うことがあります。検索結果を入力するとき、またはサーバーからデータを取得するとき。

三項演算子を使用すると、条件オペランドの代わりに変数名を渡すことで、変数が存在するかどうかを確認できます

null。 未定義

これは、変数がオブジェクトの場合に特に便利です。実際には

null であるオブジェクトのプロパティ 未定義にアクセスしようとすると、エラーが発生します。最初にオブジェクトが実際に設定されていることを確認すると、エラーを回避できます。

例:

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

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

ログイン後にコピー

このコードブロックの最初の部分では、

book は 2 つのプロパティ (name と ) を持つオブジェクトです。 worksbook で三項演算子を使用すると、それが null または unknown でないかどうかがチェックされます。そうでない場合、値があることを意味します - name 場合、プロパティがアクセスされ、コンソールに出力されます。それ以外の場合、空の場合、张三はコンソールを出力します。

book は null ではないため、本のタイトルがコンソールに記録されます。ただし、2 番目の部分で同じ条件が適用されると、book は null であるため、三項演算子の条件は失敗します。したがって、「Zhang San」はコンソールを出力します。

ネストされた条件

三項演算子はインラインで使用されますが、複数の条件を三項演算子式の一部として使用できます。複数の条件をネストまたは連結して、

if...else if...else ステートメントと同様の条件チェックを実行できます。

たとえば、変数の値は複数の条件に依存する場合があります。これは、

if...else if...else を使用して実行できます。

let score = '67';
let grade;
if (score  このコード ブロックでは、変数 <p>score<code> の複数の条件をテストして決定します。可変文字グレード。 </code></p> これらと同じ条件は、次のように三項演算子を使用して実行できます: <p></p><pre class="brush:php;toolbar:false">let score = '67';
let grade = score 最初の条件 (<p>score ) を評価します。 true<code> の場合、</code>grade<code> の値は </code>F<code> です。 </code>false<code> の場合、2 番目の式 (</code>score ) が評価されます。 </p>これは、すべての条件が <p>false<code> になるまで (グレードの値が </code>A<code> になることを意味します)、または条件の 1 つが </code>true# # と評価されるまで続きます。 # そしてその真の値は <code>grade</code> に割り当てられます。 <code><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>

ログイン後にコピー

JSの三項演算子の構文と一般的な使い方を解説した記事