【JavaScript】三元运算要点整理

傻傻虎虎

已于 2024-01-16 10:22:41 修改

阅读量756

点赞数 10

分类专栏：工具 # JavaScript 文章标签： javascript 三元运算

于 2024-01-16 09:56:40 首次发布

本文链接：https://blog.csdn.net/weixin_48618536/article/details/135616820

版权

工具同时被 2 个专栏收录

31 篇文章 3 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

【JavaScript】三元运算示例整理

if else 的写法替换
if 的写法替换
if else多操作的写法替换
if else多条件的写法替换
所有示例源码

三元运算，又称为三目运算符，可根据不同的条件来执行不同的操作，相当于简单的if else 语句。基本结构是：

条件？操作1：操作2；

如果条件成立，则执行操作1，否则执行操作2。

需要注意的是，在编写过程中，不能出现break、continue、return等关键词，否则编写时会有报错提示。

本博文以3个示例对三元运算使用进行介绍，demo代码已经上传，可直接下载使用。

if else 的写法替换

                var test1 = 10;
                if (test1 > 7 && test1 < 11) {
                    test1++;
                } else {
                    test1--;
                }

按照三元运算写法，替换如下：

var test1 = 10;
test1 > 7 && test1 < 11 ? test1++ : test1--;

if 的写法替换

                var test1 = 6;
                if (test1 > 7 && test1 < 11) {
                    test1++;
                }

按照三元运算写法，替换如下：

var test1 = 6;
test1 > 7 && test1 < 11 ? test1++ : void 0;//void 0 \ null \undefined 条件不成立的占位符

这里需要注意：冒号后面必须要写内容，可以用void 0、null、undefined作为条件不成立的占位符。

if else多操作的写法替换

                var test1 = 10;
                var test2 = 0;
                if (test1 > 7 && test1 < 11) {
                    test1++;
                    test2++;
                } else {
                    test1--;
                }

按照三元运算写法，替换如下：

var test1 = 6;
var test2 = 0;
test1 > 7 && test1 < 11 ? (test1++, test2++) : test1--;

多语句用括号括起来，中间语句用逗号隔开。

if else多条件的写法替换

如果是多条件，基本的编写结构如下：

条件1？操作1：条件2？操作2：操作3；

如果条件1成立，则执行操作2，否则判断条件2，成立则执行操作2，不成立执行操作3。

if else 示例如下：

                var test1 = 5;
                if (test1 > 11) {
                    test1 = 1;
                } else if (test1 > 7) {
                    test1 = 2;
                } else {
                    test1 = 3;
                }

按照三元运算写法，替换如下：

var test1 = 5;
test1 > 11 ? test1 = 1 : test1 > 7 ? test1 = 2 : test1 = 3;

注意，自左向右执行。

所有示例源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>demo</title>
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                //demo1
                var test1 = 10;
                if (test1 > 7 && test1 < 11) {
                    test1++;
                } else {
                    test1--;
                }
                //
                test1 > 7 && test1 < 11 ? test1++ : test1--;

                //demo2
                var test1 = 6;
                if (test1 > 7 && test1 < 11) {
                    test1++;
                }
                //
                test1 > 7 && test1 < 11 ? test1++ : void 0;//void 0 \ null \undefined 条件不成立的占位符


                //demo3
                var test1 = 10;
                var test2 = 0;
                if (test1 > 7 && test1 < 11) {
                    test1++;
                    test2++;
                } else {
                    test1--;
                }
                //
                test1 > 7 && test1 < 11 ? (test1++, test2++) : test1--;


                //demo4
                var test1 = 5;
                if (test1 > 11) {
                    test1 = 1;
                } else if (test1 > 7) {
                    test1 = 2;
                } else {
                    test1 = 3;
                }
                //
                test1 > 11 ? test1 = 1 : test1 > 7 ? test1 = 2 : test1 = 3;
                $("#div1").html(test1);
            });
        });
    </script>
</head>

<body>
    <div id="div1">jQuery AJAX</div>
    <button id="btn">jQuery</button>
</body>

</html>

傻傻虎虎

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】三元运算要点整理

三元运算，又称为三目运算符，可根据不同的条件来执行不同的操作，相当于简单的if else 语句。需要注意的是，在编写过程中，不能出现等关键词，否则。本博文以3个示例对三元运算使用进行介绍，demo代码已经上传，可直接下载使用。
复制链接

扫一扫