js的关系运算符,js的逻辑运算符,js的赋值运算符,js的运算符的优先级问题,js的自增和自减,js的选择结构
目录：
一、关系运算符
二、逻辑运算符
三、赋值运算符
四、a++和++a
五、运算符的优先级问题
六、选择结构（if/else if/else）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
一、关系运算符
首先，关系运算符得到的结果一定是一个布尔值的结果，也就是true或者false.
关系运算符有哪些？
<、>、<=、>=、==、===、!=、!==
注意：单个等号(=)，表示的是赋值，而不是比较。
<、>、<=、>=是小学数学内容，类似于5>3，3<5这样的，就不细谈了。
两个等号(==) 判断两个值是否相等，只比较数值 不比较类型
!= 判断两个值是否不相等，只比较数值 不比较类型
三个等号(==) 判断两个值是否全等，既比较数值 又比较类型
!== 判断两个值是否不全等 (既比较数值 又比较类型)
数字的比较十分简单，我们需要记住一些特殊的比较。
// 特殊的
// undefined == null //undefined 等于 null
// 0 != null; //0 不等于 null
// NaN != NaN // NaN 不等于 NaN
// "NaN" != NaN // 字符串类型的NaN 不等于 number类型的NaN
// "NaN" == "NaN" // 字符串类型的NaN 等于 字符串类型的NaN
// 1 == true // number类型的1 等于 布尔类型的true
// 0 == false // number类型的0 等于 布尔类型的false
// 2 != true // number类型的2 不等于 布尔类型的true
// null != false // null 不等于 布尔类型的false
// undefined != false //undefined 不等于 布尔类型的false
// NaN != false //NaN不等于 布尔类型的false
null != false // null 不等于 布尔类型的false
undefined != false // undefined 不等于 布尔类型的false
NaN != false // NaN 不等于 布尔类型的false
这三个会有很多程序员有疑问。
因为我们肯定有用过
if(!null / undefined / NaN){
alert(1);
}
这个1肯定会弹出，那么( !null / undefined / NaN) 一定是 true，那么(null / undefined / NaN)，一定是false
所以得到：
null == false
undefined == false
NaN == false
但是！这个是错误的！！！
写在if的表达式里，相当于：
if(Boolean(null / undefined / NaN)){}
所以(null / undefined / NaN)会被转换为布尔值类型的false来进行比较。
所以！！！
(null / undefined / NaN)直接进行比较是不等于false的
js中的 关系表达式不能连写（是可以写，但是结果不好理解，所以我们为什么要为难自己）
var c = 3 < 5 < 2; //true 首先3<5 => true ，然后 true<2 ，true会被转成1，1<2 => true；
二、逻辑运算符
与(&&) 或(||) 非(!)
与/且 (&&) 同真为真 遇假为假 (找假的)
var result = 5 > 3 && 5 < 10; // true && true => true
var result = 5 > 3 && 5 < 10 && 1 == false; // true && true && false =>false
或 (||) 同假为假 遇真为真 (找真的)
var result = 5 > 3 || 5 < 10; // true || true => true
var result = 5 > 3 || 5 > 10; // true || false => true
var result = 5 < 3 || 5 > 10; // false || false => false
非(!) 颠倒是非,真变成假，假变成真
var result = !(5 > 3); // false
var result = !false; // true
var result = !1; // false
var result = !null; // true
拓展：
我们需要明白一点，逻辑运算符不会去改变变量的类型，我们之前的例子出现的结果都是false和true是因为关系运算符的结果。
所以
会有这样的操作
var a = 1 && 2; //2
var a = 0 && 5; //0
var a = 1 || 2; //1
var a = 0 || 5; //5
var b = 1 && 2 || 3; //2
思路是这样的
遇到&&的时候
会将 &&两边的值看做是一个布尔类型的值（只是判断的时候隐式转换了，但是没有改变原值）
当&&遇到true的时候，会继续往后找，直到找到 某个值 转换为布尔值为false，他就会停下来，那个值就是最终的结果。
如果没有值为false的，就会一直找到最后，输出最后一个值。
口诀：假前真后
遇到||的时候
会将 ||两边的值看做是一个布尔类型的值（只是判断的时候隐式转换了，但是没有改变原值）
当&&遇到false的时候，会继续往后找，直到找到 某个值 转换为布尔值为true，他就会停下来，那个值就是最终的结果。
如果没有值为true的，就会一直找到最后，输出最后一个值。
口诀：真前假后
逻辑运算符的优先级：
！> && > ||
三、赋值运算符
= 等号 赋值运算符
将一个值 +，-，*，/，%后再赋值给原值的就可以使用赋值运算符
var a = 10;
a = a + 5;
可以写成
a += 5;
// a += 5; // a = a + 5;
// console.log(a);
// a -= 5; // a = a-5; //95
// a *= 5; // a = a*5; //500
// a /= 5; // a = a/5; //20
// a %= 5; // a = a/5; //20
如果 加减赋值运算 的具体 数值 为1的话 还可以进一步的简写
a++;
a--;
四、 a++ 和 ++a
！！！！！！！！！！！！！！！
// 如果在自增过程中存在其他操作
// a++ 先赋值 在自增
// ++a 先自增 在赋值
// a-- 先赋值 在自减
// --a 先自减 在赋值
// 总结
// ++/-- 在后 先赋值 再自操作 (a++,a--);
// ++/-- 在前 先自操作 再赋值 (++a,--a);
自增过程中存在其他操作
var a = 10;
var b = a++; //10 先赋值 在自增
console.log("a", a); //11
console.log("b", b); //10
自增过程中不存在其他操作
无论是前自增还是后自增，变量本身都不会被影响，都会变成自增后的结果
var a = 10;
var b = a++; //自增过程中 ++ 在后 先赋值,在运算
console.log(b); //10
console.log(a); // 11 无论你是先自增还是后自增 => 11
复杂一点的：
// a 11 12 13 12 11 =>11
var sum = a++ + ++a + a++ * 2 + a-- + --a;
// sum = 10 + 12 + 12*2 + 13 + 11;
五、运算符的优先级问题
运算符的优先级很重要，它将决定表达式的执行属性，如果不清楚运算符的优先级，可能会得到意想不到的结果
注意：
算术运算符 */% 高于 +-
5 + 10 * 2
关系运算符 > , >= < <= 高于 == === != !==
举例
5>3==1 => true == 1 => true
逻辑运算符 && || ! ! 大于 && 大于 ||
举例
5<3 || 5<10 && 5<2 => 5<3 || false => false
! > 算术运算符 ( */% > +- ) > 关系运算符 > 逻辑运算符 (有一个比较特殊 ！)
var result = 5 > !3; // ! 优先级高于 关系运算符 5>false
var result = 5 + !3; // ! 优先级高于 算术运算符 5+false => 5
运算符的优先级，越往上越高
六、选择结构（if/else if/else && switch case）
程序的三大结构
1. 顺序结构 (从上朝下执行的代码就是顺序) 代码一天接一条执行
2. 选择结构 (根据不同的情况，执行对应代码 作出不同的选择)；
3. 循环结构 (重复的做一件事)
if循环---单分支
if(表达式){
表达式的结果为真的时候，所执行的语句
}
if循环---双分支
if(表达式){
表达式的结果为真的时候，所执行的语句
}else{
表达式的结果为假的时候，所执行的语句
}
if循环---多分支
if(表达式1){
表达式1 的结果为真的时候，所执行的语句
}else if(表达式2){
表达式2 的结果为真的时候，所执行的语句
}else if(表达式3){
表达式3 的结果为真的时候，所执行的语句
}else{
前面表达式都为假的时候，所执行的语句
}
注意：
1.if后面的()不能省略。
2.无论执行语句是一条还是 多条，一对{ }都不能省略。
那么，什么是JS表达式呢?
JS表达式 由 运算符 和 操作数(变量和常量) 组成
（可以是单独的操作数，但是不能是单独的运算符）
// 1+5 a+1
// 5>3 5>a
// 5>3 && 5<a
// 数字 字符串 boolean
// var a = 1;
// var a = 10;
// a++; // a<10
// a--; // a>=10
// console.log(a);
单分支
写一个0-20的随机数，如果这个数小于10，那么就加1
var a = Math.round(Math.random() * 20); // 0 - 20
console.log(a); //13
// 当括号内的表达式结果成立(为true时)，则执行大括号内的语句，否则执行 else 中的语句。
if (a < 10) {
a++; //执行语句
}
console.log(a);
双分支
写一个0-20的随机数，如果这个数小于10，那么这个数就加1，否则这个数就减一
var a = Math.round(Math.random() * 20); // 0 - 20
console.log(a); //13
// 当括号内的表达式结果成立(为true时)，则执行大括号内的语句，否则不执行。
if (a < 10) {
a++; //执行语句
} else {
a--;
}
console.log(a);
多分支
判断学生分数的区间[0-100]
成绩判定
大于等于90 优秀
大于等于80小于90 优秀
大于等于70小于80 良好
大于等于60小于70 及格
小于60 不及格
var score = Math.round(Math.random() * 100); //0-100
console.log(score)
// 从上往下，满足哪个条件就执行其相对应的语句，都不满足时，执行最后的else的语句，只能进入其中之一。
if (score >= 90) {
document.write(score + "优秀");
} else if (score >= 80 && score < 90) { //[80-90)
document.write(score + "良好");
} else if (score >= 70) { // [70,80)
document.write(score + "一般");
} else if (score >= 60) {
document.write(score + "及格");
} else {
document.write(score + "不及格");
}
选择结构的嵌套
// 选择结构是可以嵌套的
var score = Math.round(Math.random() * 100); //0-100
console.log(score)
if (score >= 90) { //90 - 100
// document.write(score + "优秀");
// 90-99
// 100
if (score == 100) {
document.write(score + " 666666");
} else {
document.write(score + "优秀");
}
} else if (score >= 80 && score < 90) { //80-90
document.write(score + "良好");
} else if (score >= 70) { // [70,80)
document.write(score + "一般");
} else if (score >= 60) {
document.write(score + "及格");
} else {
document.write(score + "不及格");
}
拓展：在input框中输入一个成绩，并判断成绩的等级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小五的技术blog</title>
</head>
<body>
<input id="content" type="text"><button id="btn">判断</button><input id="result" type="text">
</body>
<script>
// 需求：在input框中输入一个成绩，并判断成绩的等级
// input#content 取值(点击的时候取值)
// button#btn 点击取值
// input#result 把结果输出到result框中
// ! 能改变元素的只有元素本身
// 1. 获取需要用到的元素 (通过id名来获取元素)
var conInp = document.getElementById("content"); // 在文档中 通过id名来获取元素
// console.log(conInp, document.getElementById("content"));
var btn = document.getElementById("btn");
// console.log(btn);
var resultInp = document.getElementById("result");
// console.log(resultInp);
//2. 给 btn绑定一个点击事件 当你点击按钮时 执行function 后面{}中语句 (!!!!!!!! 不要用document.write() )
// 页面加载时 点击事件不会主动执行 (当你手动点击按钮的时候 会执行 function 后面{}中语句 )
btn.onclick = function () { // 事件执行的内容
// console.log(11111111);
// console.log(conInp.value); // 点击时获取
// conInp.value = "haha"; // 赋值 把haha放到 conInp的value中;
// 3. 点击时取值
var score = conInp.value; // 取的是输入框中的值（值！！！！！！！！！！！！！！！！ 不能代表 conInp => 都是string类型）
if (score >= 0 && score <= 100) { // 如果分数在 0-100 以内 在判断分数的级别
// 4. 把结果 放到 resultInp(元素)的value中
if (score >= 90) {
resultInp.value = "优秀"; // 把优秀 放到 resultInp(元素)的value中
} else if (score >= 80) {
resultInp.value = "良好";
} else if (score >= 70) {
resultInp.value = "一般";
} else if (score >= 60) {
resultInp.value = "刚及格";
} else {
resultInp.value = "送你一场造化！";
}
} else { // 如果分数不在 0-100 以内 弹出请输入正确的分数
alert("请输入正确的分数");
}
}
// console.log(22222222);
</script>
</html>
这种练习还有很多，各种语言除了语法不同，但是大体的逻辑都是相同的。
比如：
输入一个0-100的数 判断是奇数还是偶数
随意输入一个年份，判断这个年份是否为闰年。
1.能被4整除而不能被100整除.（如2004年就是闰年,1800年不是.）
2.能被400整除.（如2000年是闰年）
