【JavaScript】三元运算要点整理

发布时间：2024年01月16日

【JavaScript】三元运算示例整理

三元运算，又称为三目运算符，可根据不同的条件来执行不同的操作，相当于简单的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>
文章来源:https://blog.csdn.net/weixin_48618536/article/details/135616820
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章