广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >JS中三元运算符的语法是什么
  • 624
分享到

JS中三元运算符的语法是什么

2024-04-02 19:04:59 624人浏览 独家记忆
摘要

本篇内容主要讲解“js中三元运算符的语法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS中三元运算符的语法是什么”吧!三元运算符(也称为条件运算符)可用

本篇内容主要讲解“js中三元运算符的语法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS中三元运算符的语法是什么”吧!

三元运算符(也称为条件运算符)可用于执行内联条件检查,而不是使用if...else语句。它使代码更短,更易读。它可用于根据条件为变量赋值,或根据条件执行表达式。

语法

三元运算符接受三个操作数;它是javascript中唯一能做到这一点的运算符。您提供一个要测试的条件,后跟一个问号,然后是两个用冒号分隔的表达式。如果条件被认为为真,则执行第一个表达式;如果它被认为是假的,则执行最终的表达式。

它以以下格式使用:

condition ? expr1 : expr2

这里,condition是要测试的条件。如果其值被认为是trueexpr1则执行。否则,如果其值被认为是falseexpr2则执行。

expr1并且expr2是任何一种表达方式。它们可以是变量、函数调用,甚至是其他条件。

例如:

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

使用三元运算符进行赋值

三元运算符最常见的用例之一是决定将哪个值分配给变量。通常,一个变量的值可能取决于另一个变量或条件的值。

虽然这可以使用if...else语句来完成,但它会使代码更长且可读性更低。例如:

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

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

在此代码示例中,您首先定义变量message。然后,您使用该if...else语句来确定变量的值。

这可以使用三元运算符在一行中简单地完成:

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

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

使用三元运算符执行表达式

三元运算符可用于执行任何类型的表达式。

例如,如果您想根据变量的值决定运行哪个函数,您可以使用以下if...else语句执行此操作:

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

这可以使用三元运算符在一行中完成:

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

如果feedback具有 value yes,则将sayThankYou调用并执行该函数。否则,该saySorry函数将被调用并执行。

使用三元运算符进行空检查

在许多情况下,您可能正在处理可能有也可能没有定义值的变量——例如,从用户输入检索结果时,或从服务器检索数据时。

使用三元运算符,您可以通过在条件操作数的位置传递变量名称来检查变量是否存在nullundefined

这在变量是对象时特别有用。如果您尝试访问实际上是nullor的对象上的属性undefined,则会发生错误。首先检查对象是否实际设置可以帮助您避免错误。

例如:

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

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

在此代码块的第一部分,book是一个具有两个属性的对象 -nameworks在上使用三元运算符时book,它会检查它是否不是nullor undefined。如果不是——意味着它有一个值——name则访问该属性并将输出控制台。否则,如果它为空,张三输出控制台。

因为bookis not null,所以书名会记录在控制台中。但是,在第二部分中,当应用相同的条件时,三元运算符中的条件将失败,因为bookis null。因此,“张三”输出控制台。

嵌套条件

尽管三元运算符是内联使用的,但可以将多个条件用作三元运算符表达式的一部分。您可以嵌套或链接多个条件来执行类似于if...else if...else语句的条件检查。

例如,一个变量的值可能取决于多个条件。它可以使用if...else if...else

let score = '67';
let grade;
if (score < 50) {
  grade = 'F';
} else if (score < 70) {
  grade = 'D'
} else if (score < 80) {
  grade = 'C'
} else if (score < 90) {
  grade = 'B'
} else {
  grade = 'A'
}

console.log(grade); // "D"

在此代码块中,您测试变量的多个条件score以确定变量的字母等级。

可以使用三元运算符执行这些相同的条件,如下所示:

let score = '67';
let grade = score < 50 ? 'F'
  : score < 70 ? 'D'
  : score < 80 ? 'C'
  : score < 90 ? 'B'
  : 'A';

console.log(grade); // "D"

评估第一个条件,即score < 50。如果是true,那么 的grade值为F。如果是false,则计算第二个表达式,即score < 70

这一直持续到所有条件都为false,这意味着等级的值将为A,或者直到其中一个条件被评估为true并且其真实值被分配给grade

示例

在这个实时示例中,您可以测试三元运算符如何在更多条件下工作。 如果您输入的值小于 100,则会显示“太低”消息。如果您输入的值大于 100,则会显示消息“太高”。如果输入 100,将显示“完美”消息。

<!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('button');
		const numberElm = document.querySelector('#number');
		const resultElm = document.querySelector('#result');
	
		button.addEventListener('click', function() {
			resultElm.textContent = numberElm.value > 100 ? '太高' : (numberElm.value < 100 ? '太低' : '完美');
		});
	</script>
</html>

JS中三元运算符的语法是什么

到此,相信大家对“JS中三元运算符的语法是什么”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: JS中三元运算符的语法是什么

本文链接: https://www.lsjlt.com/news/99126.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS中三元运算符的语法是什么
    本篇内容主要讲解“JS中三元运算符的语法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS中三元运算符的语法是什么”吧!三元运算符(也称为条件运算符)可用...
    99+
    2022-10-19
  • C++中唯一的三元运算符是什么
    这篇文章给大家分享的是有关C++中唯一的三元运算符是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。C++三元运算符是?:C++有3种运算符:算数运算符、关系运算符和逻辑运算符。运算符在计算机中的执行顺序 运算...
    99+
    2023-06-14
  • C语言三元运算符怎么用
    今天小编给大家分享一下C语言三元运算符怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。三元运算符:#include&nb...
    99+
    2023-06-17
  • C#的sizeof运算符和三元运算符怎么用
    本文小编为大家详细介绍“C#的sizeof运算符和三元运算符怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“C#的sizeof运算符和三元运算符怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。实例usi...
    99+
    2023-06-17
  • java三目运算符的用法是什么
    Java中的三目运算符(也称为条件运算符)是一种简洁的条件表达式,用于根据条件的结果选择不同的值。三目运算符的语法如下:```条件 ...
    99+
    2023-10-10
    java
  • php中三元运算符怎么用
    本教程操作环境:windows7系统、PHP7.1版,DELL G3电脑在 PHP 中,三元运算符可以实现简单的条件判断功能,即根据第一个表达式的结果在另外两个表达式中选择一个并执行,三元运算符也被称为三目运算符或者条件运算符。三元运算符的...
    99+
    2020-12-30
    php 三元运算符
  • java中三目元算符的运算原理
    格式:数据类型 变量名 = 布尔类型表达式?结果1:结果2运算原理:布尔类型表达式结果是true,三元运算符整体结果为结果1,赋值给变量。布尔类型表达式结果是false,三元运算符整体结果为结果2,赋值给变量。相关视频教程推荐:java学习...
    99+
    2021-03-10
    java 三目运算符 运算原理
  • Python中的三目运算符(三元表达式)
    一般支持三目运算符的语言(如C语言)的语法格式一般是这样的: 判断条件(返回布尔值)?为真时的结果:为假时的结果 比如: x = x%2==1 x+1:x; python并不支持 :这种符号所表达的先判断再选择的含义,但仍然有相应的...
    99+
    2023-01-31
    表达式 运算符 Python
  • Python中的三目(元)运算符详解
    目录Python 三元运算符一、示例 1:使用三元运算符找出两个数字中的最大值。二、示例 2:根据条件的返回值,Python 执行打印语句之一三、示例 3:使用嵌套的三元运算符,找到...
    99+
    2022-11-12
  • Python中的三元运算语句怎么写
    这篇文章主要介绍“Python中的三元运算语句怎么写”,在日常操作中,相信很多人在Python中的三元运算语句怎么写问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Python中的三元运算语句怎么写”的疑惑有所...
    99+
    2023-07-06
  • 怎么在JavaScript中使用三元运算符
    本篇文章给大家分享的是有关怎么在JavaScript中使用三元运算符,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。JavaScript可以做什么1.可以使网页具有交互性,例如响...
    99+
    2023-06-14
  • Java三目运算符判断非空的方法是什么
    Java中判断非空的方法有多种,以下是其中的一种方法:使用三目运算符对对象进行判空操作,语法如下:```object != null...
    99+
    2023-10-11
    Java
  • Python 中的lambda匿名函数和三元运算符
    目录匿名函数什么是匿名函数分类三元运算符匿名函数 什么是匿名函数 用一句话表达只有返回值的函数就是匿名函数。匿名函数只用来实现一些简单的函数功能,所以追求代码的简洁和高效。使用关键字...
    99+
    2022-11-10
  • MySQL中的运算符是什么?
    以下是运算符在MySQL中的用法。 案例1 该运算符类似于 = 运算符,即当值相等时结果将为 true(1),否则为 false(0)。 在第一种情况下, = 和 运算符的工作原理相同。 案例2 每当我们将任何值与 NULL 进行比较时,...
    99+
    2023-10-22
  • go语言运算符%是什么意思
    在Go语言中,%运算符表示取模运算(求余运算)。它用于计算两个数相除之后的余数部分。例如:remainder := 10 % 3 // remainder的值为1,因为10除以3的余数是1。本教程操作系统:windows10系统、go1.2...
    99+
    2023-12-21
    go语言 运算符
  • Python中的lambda匿名函数和三元运算符怎么用
    这篇文章主要讲解了“Python中的lambda匿名函数和三元运算符怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python中的lambda匿名函数和三元运算符怎么用”吧!匿名函数什...
    99+
    2023-06-30
  • php中字符串运算符是什么
    php中的字符串运算符有两个:1、字符串连接运算符“.”,语法“$string1.$string2”,会返回其左右参数连接后的字符串,即把两个或两个以上的字符串拼接成一个新的字符串;2、连接赋值运算符“.=”,语法“$string1 .= ...
    99+
    2022-06-29
    php php字符串
  • R语言运算符怎么使用/是什么
    这篇文章主要讲解了“R语言运算符怎么使用/是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“R语言运算符怎么使用/是什么”吧!运算符运算符:包含一个或者两个参数的无括号的参数符号说明+-*...
    99+
    2023-06-14
  • c++运算符重载的方法是什么
    C++中的运算符重载方法是通过定义特殊的成员函数来实现的。重载运算符的函数被称为运算符函数,它们具有特殊的命名规则和语法。一般情况下...
    99+
    2023-09-14
    c++
  • JavaScript中的运算符是什么样的
    这期内容当中小编将会给大家带来有关JavaScript中的运算符是什么样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。1.运算符运算符(operator)也称操作符,是用于实现赋值、比较和执行算术运算等...
    99+
    2023-06-25
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作