【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>