【JavaScript】三元运算要点整理

发布时间:2024年01月16日

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

条件?操作1:操作2
  • 如果条件成立,则执行操作1,否则执行操作2。

需要注意的是,在编写过程中,不能出现breakcontinuereturn等关键词,否则编写时会有报错提示

本博文以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 0nullundefined作为条件不成立的占位符。

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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。