JS03-JavaScript的运算符及运用（算数//赋值//比较//逻辑//自增自减//三元运算符）

JavaScript中的运算符

所谓的运算符,就是操作变量的符号
在计算机程序中,使用特殊的定义好的符号,来对变量中的数据进行操作

运算符的分类

算术运算符 / 数学运算符
" + - * / %"

赋值运算符
= += -= *= /= %=

比较运算符
" > < >= <= == === != !== "

逻辑运算符
&& || !
| 在回车上方的按键 正常按是 \ 反斜杠 shift + 按键 是 |

逻辑运算符的作用:
多个条件 通过 逻辑运算符 来执行一个最终的判断结果

逻辑与 表达式1 && 表达式2
逻辑或 表达式1 || 表达式2
逻辑非 !(表达式)

逻辑与:
都是 true 才是 true , 见 false 就是 false

逻辑或:
都是 false 才是 false , 见 true 就是 true

逻辑非:
对结果取反

逻辑表达式,一定要根据 每个表达式的布尔值 来判断,逻辑表达式的最终结果
因此 如果 表达式 内容不是布尔值,会自动转化为布尔类型

短路求值
逻辑与 : 第一个表达式 结果是 false , 第二个表达式不会执行
逻辑或 : 第一个表达式 结果是 true , 第二个表达式不会执行

逻辑赋值 / 短路赋值
逻辑或的赋值 变量 = 变量1 || 默认值(根据项目需求而定的数值)

当 变量1 的内容, 转化为布尔值是 false
此时默认值 , 也会执行
也就是 给 变量 会进行两次赋值 第一次赋值 变量1 第二次赋值默认值
最终 变量中 存储的是 默认值

当 变量1 的内容, 转化为布尔值是 true
此时默认值 , 不会执行
变量中只会赋值 变量1 的内容

数学运算符 / 算术运算符

. + 加号 如果都是数值,执行加法运算
如果有字符串参与,结果是字符串拼接

. - 减号 加法运算

. * 乘号 乘法运算

/ 除号 除法运算
除数,也就是第二个数值,不能为 0
除数是0 , JavaScript中执行结果是 Infinity 表示无穷大
console.log( 2 / 0 );

% 求余数 / 求模 符号
% 求模运算符 / 求余数运算符
余数在计算机中,也称 模
console.log(10 % 3);
10 / 3 — 结果是 商 3 余数 1 1就是我们就余数运算的结果

求余数,也叫求模 执行结果 与被除数的符号相同
如果被除数是正数,余数也是正数
如果被除数是负数,余数也是负数
10 % 3 — 1
10 % -3 — 1
-10 % 3 — -1
-10 % -3 — -1

如果整除,余数是 0
console.log( 10 % 2)

总结:
1, +加号,有可能是字符串拼接,有可能是加法运算
2, % 求余数/求模
余数的正负 与 被除数(第一个数值)的正负相同
如果整除 余数 是 0

赋值运算符

=   +=    -=    *=    /=    %=

= 赋值运算符
将 符号 右侧的内容,赋值给左侧的内容

var int1 = 100 + 2 * 5; // 将右侧的表达式,执行结果赋值给左侧的int1变量存储
console.log(int1);

重复赋值 — 对一个变量进行多次赋值

int1 = 220; // 新赋值的数据,会覆盖变量之前存储的数据
// 一个变量中,只能存储一个数据
原理 : 瓶子里装着水,现在要装油,需要先把水倒掉,再装油
console.log(int1);

+= 加等赋值
在左侧存储数值的基础上,加上右侧内容的执行结果,再把最终的数值赋值给左侧变量

变量中原始存储的数据是100
在原始存储数据的基础上,再加上右侧的结果
原始数据100 + 右侧的结果400 最终的结果是500
最后将这个结果500 赋值给变量 int2存储
之前存储的 100 就被新的数据 500 覆盖
+= 的展开形式 就是 int2 = int2–存储的是100 + 400
原始数值 + 右侧的内容, 最终再赋值给 原始数值
var int2 = 100;
int2 += 400;
console.log(int2); → 500

要特别注意 , 是将右侧的整体执行结果 , 加上原始数值 , 赋值给左侧内容
var int3 = 100;
int3 += 100 + 2*3;
console.log(int3); → 206

+= 本质上是执行加法操作,
如果是有字符串参与,执行的字符串拼接操作
var str1 = ‘北京’;
str1 += ‘今天天气不错’;
console.log(str1); → 北京今天天气不错

可以利用 += 操作,在字符串中,来拼接变量
我今天考试得了100分; ‘我今天考试得了’ + 变量 + ‘分’
复杂内容是有时候会用到这种+=拼接语法
var res = 100;
var str2 = ‘我今天考试得了’;
str2 += res;
str2 += ‘分’;
console.log(str2); → 我今天考试得了100分

-= 减等运算符
在变量存储的原始数据基础上,减去右侧的执行结果,再将最终结果赋值给左侧变量存储
先把右侧的表达式,计算出一个结果,再与左侧变量进行运算

变量 -= 表达式
展开形式 变量 = 变量 - 表达式

int2 本身存储的数值是100 先计算右侧的内容 100+100 结果是200
使用200的结果来参与运算
int2 = int2–存储的是100 - 200
最终结果是 -100
var int2 = 100;
int2 -= 100 + 100; // int2 = int2 - (100 + 100)
console.log(int2); → -100

*= 乘等赋值运算符
在变量存储的原始数据基础上,乘以右侧的执行结果,再将最终结果赋值给左侧变量存储

    var int3 = 100;
    int3 *= 2+3;  // int3 = int3 * (2+3)

console.log(int3); → 500

/= 除等赋值运算符
在变量存储的原始数据基础上,除以右侧的执行结果,再将最终结果赋值给左侧变量存储
var int4 = 100;
int4 /= 2+3; // int4 = int4 / (2+3) → 20

%= 模等赋值运算符 / 求余等赋值运算符
将左侧变量存储的原始数值,作为被除数
将右侧的执行结果,作为除数
执行求模 / 求余数运算符
再将最终执行结果赋值给左侧变量存储
var int5 =100;
int5 %= 2+3; // int5 = int5 % (2+3) 整除结果是0

特别注意:
如果执行 += -= *= /= %= 赋值运算符
左侧变量必须被正确定义
如果变量没有被正确定义

没有定义int6,执行执行 += 这样的操作,会报错
在当前行声明也会报错
一定要提前声明好

如果只声明不赋值,int6中,存储的是undefined
+= 操作 就是 int6 = int6–undefined + 100 有NaN参与运算,结果是NaN
var int6;
int6 += 100;
console.log(int6); → NaN

总结:
1, JavaScript语法规定
var int += 100 这样的定义变量,是错误语法
+= -= *= /= %= 之前不能有关键词 var

2, 变量必须要提前定义好
如果没有定义,执行结果是 报错
如果只定义没有赋值,执行结果是 NaN

3, 一定是先计算出右侧的执行结果,再与变量的原始数据进行运算

比较运算符

大于 < 小于 >= 大于等于 <= 小于等于
== 等于判断 === 全等判断
!= 不等判断 !== 不全等判断

1, 比较运算符的结果一定是 布尔类型 true / false
2, 必须严格遵守 书写规范 >= <= 不能有空格
3, 符号不能连续写 3 <= int <= 5 这是错误的语法形式
怎么实现 在 3和5之前,下午讲

==  ===   !=  !== 
为了严谨起见 
如果 两个 数据的数据类型不同 一般使用  ===     !==
如果数据类型相同 一般使用  ==    !=

== 等于判断 / 宽松比较 是判断 符号两侧的内容,是否相等
== 等于判断的执行过程
先判断两侧内容的数据类型
如果数据类型不同,会自动转化为相同的数据类型
再判断,转化之后的数值,是否相同
如果转化之后的数值相同,执行结果是true
如果转化之后的数值不同,执行结果是false

字符串’2’ 和 数值 2 的数据类型不同
将 字符串’2’ 转化为 数值类型 ,转化结果是 数值 2
再判断 转化之后的数值, 都是 2 , 判断那结果是true
console.log( ‘2’ == 2 ); → true

转化原则 一般是 字符串 —> 数值 —> 布尔值

‘2abc’ 和 2 进行比较
会先自动执行数据类型转化 ‘2abc’ —> 数值 NaN
比较结果是 false
console.log( ‘2abc’ == 2 ); → false

=== 全等判断 / 严格比较
判断两侧内容的数据类型
如果数据类型不同,不会执行 数据类型转化 直接返回false
如果数据类型相同,再比较数值内容
如果数值相同,返回 true
如果数值不同,返回 false

    console.log( '2' === 2 );  →  false

总结 :
== 等于判断 / 宽松比较
只要数值相同就可以是true
会自动进行数据类型转化

=== 全等判断 / 严格比较
必须数据类型 和 数值都相同,才是true
不会进行数据类型转化

!= 不等判断
// 与 == 等于判断执行原理相同,但是执行结果完全相反
== 等于判断是 数值相同,返回true
!= 不等判断是 数值相同,返回false
实际项目中往往就使用一种就可以了

!== 不全等判断
执行原理与 === 全等判断 相同
执行结果完全相反
=== 全等判断 是 数据类型数值都相同,是 true
!== 不全等判断 与 === 全等判断的执行结果 相反
=== 是 true !== 就一定是false

== 逻辑运算符的种类 和 逻辑赋值==

逻辑与 表达式1 && 表达式2
逻辑与 是 当两个表达式的结果都是 true 时, 整个逻辑与的结果是true
只要有一个表达式的结果是false , 整个逻辑与的结果是false
总结 : 都是 true 才是 true 有一个是 false ,就是false

逻辑或 表达式1 || 表达式2
逻辑或 是 当两个表达式的结果都是 false 时, 整个逻辑或的结果是false
只要有一个表达式的结果是true ,整个逻辑或的结果就是true
总结 : 都是 false 才是 false 有一个是 true ,就是 true

逻辑非 !表达式
逻辑非 是对表达式的结果 取反

逻辑运算符 必须要根据 表达式1和表达式2的布尔值 来确定逻辑运算符的最终结果
因此 表达式1 和 表达式2 如果执行结果不是 布尔值 都会自动转化为 布尔值

举例说明
逻辑与 : 你想找个啥样的女朋友~~~
回答 : 年轻 并且 漂亮
也就是 年龄和漂亮 两个条件 都要满足,才可以

逻辑或 : 你想找个啥样的女朋友~~~
回答 : 年轻 或者 漂亮
也就是 年龄和漂亮 两个条件 满足一个就可以

逻辑非 : 你想找个啥样的女朋友~~~
回答 : 不是男的就行
也就是 对 男 这个结果 取反

具体怎么应用
demo1
有一个数值 如果这个数值 大于 20 就输出 大于20
小于等于 20 就输出 小于或等于20

总结: 如果是 NaN 参与的 任何与数值的比较判断,结果都是false

    var int = 50;
    if( int > 20 ){
        console.log( int + '大于20' );
    }else{
        console.log( int + '小于或等于20' );
    }

demo2
判断一个数值,如果是 20-50 之间,就输出 在20-50之间
如果不是20-50之间,就输出 不再20-50之间
所谓的 在 20-50 之间 是要同时满足两个条件
数值 >= 20 并且 数值 <= 50
转化为 表达式 : 变量 >=20 && 变量 <=50
逻辑运算符,且

    var int2 = 60;
    if( int2 >= 20 && int2 <= 50 ){
        console.log( `${int2}在20-50之间` );
    }else{
        console.log( `${int2}不在20-50之间` );
    }

demo3
如果数值 小于20 或者 大于50 就输出 在 20-50范围之外
否则 就输出 在 20-50范围值内

    var int3 = 60;
    if( int3 < 20 || int3 > 50 ){
        console.log(int3 + '不在20-50范围内')
    }else{
        console.log(int3 + '在20-50范围内')
    }

判断 一个数值 在 20-50 范围之内可以写成 变量 >= 20 && 变量 <= 50
判断 一个数值不在 20-50 范围之内,可以写成 !(变量 >= 20 && 变量 <= 50)
或者是变量 < 20 || 变量 > 50
是要能实现,哪个理解哪个会写,用那个

逻辑运算符的短路求值和短路赋值

一.逻辑运算符的短路求值

什么是短路求值?
为了提高程序的执行效果,如果最终的结果已经确定,多余的程序就不会执行

逻辑与 表达式1 && 表达式2
两个表达式的结果,都是true,逻辑与的结果才是true
如果有一个表达式的结果是false,整个逻辑与的结果,就会是false

当 第一个表达式 的结果是 false 时, 不管第二个表达式的结果是什么
整个逻辑与 的结果已经可以确定是 false
此时第二个表达式的执行 已经是 多余的了,就不会再执行了
即：逻辑与 第一个表达式结果是 false 第二个表达式的内容 不执行

逻辑与： 表达式1 是true，需要看表达式2 ，从而确定最终结果
var int1 = 100;
var int2 = 200;
int1 > 10 结果是 true
需要第二个表达式来确定整个逻辑与的结果
此时第二个表达式会执行, int2 会赋值 为 100
int1 > 10 && ( int2 = 100 ) ;
console.log(int2); → 100

逻辑与：表达式1 是false ，不需要看表达式2，也不受表达式2影响，最终结果为false
表达式1,结果是false,已经可以确定,逻辑与的结果是false
表达式2,的执行结果,不会影响整个逻辑与的结果
表达式2不会执行 int2 = ‘我是北京’ 这个赋值操作
不会执行, int2仍然是100
int1 < 10 && ( int2 = ‘我是北京’ ) ;
console.log(int2);

逻辑或 表达式1 || 表达式2
当 两个表达式都是false , 逻辑或的结果是false
如果是一个是true , 逻辑或的结果就是 true

当 第一个表达式的结果是 true , 以及可以决定整个逻辑或的结果是 true
第二个表达式的执行结果,没有意义,表达式2,不会执行
即：逻辑或 第一个表达式结果是 true 第二个表达式的内容 不执行

var int3 = 300;
var int4 = 400;
逻辑或,第一个表达式是false,无法确定整个逻辑或的结果
需要执行第二个表达式
int3 > 1000 || ( int4 = ‘我执行了’ )

逻辑或,第一个表达式是true,已经可以确定整个逻辑或的结果是true
不需要执行第二个表达式 , int4 还是 存储 我执行了
int3 < 1000 || ( int4 = ‘我其实没有执行,就这么着吧’ )
console.log( int4 );

二.短路赋值

在实际项目中,往往经常使用逻辑运算符,给 变量 进行 赋值 , 赋值默认值

var int = 100 ;
var str = int || 500 ;
console.log(str);
定义变量但是没有赋值,int中存储的是undefined
int本身没有赋值,str,也没有赋值

执行逻辑运算符 int 是 undefined 转化为布尔类型 是 false
逻辑或的一个表达式是 fasle , 就会执行第二个表达式
也就是先给str 赋值 undefined 在给str 赋值 500
那么 str 最终存储的数值 是 500

变量 || 默认值
即：当 int 没有 数值存储时, 给变量赋值的是默认值

如果 int 中有数值 是100 , 转化为 布尔值 是true
逻辑或第一个表达式是 true, 不会执行第二个表达式
只会给 str 赋值100

自增自减运算符

++ 自增 每次执行,都会在变量存储的原始数值基础上 +1
++ 符号展开的意思就是 int = int + 1

– 自减 每次执行,都会在变量存储的原始数值基础上 -1
– 符号展开的意思就是 int = int - 1

前缀/前置语法 ++变量
先改变 变量中 存储的数值 使用新的数值 来参与程序的执行

先改变n1存储的数值 此时 n1 存储的数值是6
将6这个数值赋值给int1
int1中存储的数值是 6
var n1 = 5;
var int1 = ++n1;
执行之后,int1的6, n1 也是6
console.log(int1); → 6
console.log(n1); → 6

后缀/后置语法 变量++
当前位置上 不执行++操作,也就是不改变参与运算的初始值 但是要改变变量中存储的原始数值
当前位置上 仍然是原始数值参与程序的执行
从下一个位置,也就是下一次使用变量时,显示++ 操作的结果

var n2 = 5;
在当前位置上,先执行其他操作,也就是n2的数值不变,参与程序的执行
将 原始数值 5 赋值给int2
var int2 = n2++;
任意的下一次使用n2 , n2的值,都是执行过++之后的值
此时 n2 就是执行完++的数值 是6
int3中存储的数值是6
var int3 = n2;
console.log(int2); → 5
console.log(int3); → 6
console.log(n2); → 6

面试题

    var a = 0;
    var b = 0;

第一个 a++ 此时 a的原始数值是 0 执行的是 后置语法, 参与运算的是原始数值 也就是 0
下一个位置开始,体现a++的操作结果,a会变为 1
第二个 ++a 此时 a的原始数值 变为 1 , 执行的是 前缀语法, 参与运算的是数值 2
0 + 2 — b 的结果是 0 + 2 是 2
b = a++ + ++a ; → 0+2 → 2

判断a 也就是 判断执行++操作的变量,执行几次++ ,结果就是 +几
console.log(a);
判断b 要具体分析每一个位置上,通过前缀后缀来查看验算，a的原始数值,和a参与程序的数值
console.log(b);

demo1
var c = 0;
var d = 0;
第一次 : ++c c的原始数值是 0 ,执行前缀,参与运算的数值是 1
第二次 : c++ c的原始数值是 1 ,执行后缀,参与运算的数值是 1
1 + 1
d = ++c + c++; → 1+1 → 2
c 执行了 2次 ++ 最终结果就是 0+1+1 结果是2
console.log©; → 2
console.log(d);

demo2
var e = 0;
var f = 0;
f = ++e + e++ + ++e + e++;
原始数值 0 1 2 3
前置 后置 前置 后置
参与运算 1 1 3 3
一个位置 1 2 3 4
console.log(e); → 4
console.log(f); → 8

demo3
var g = 0
var h = 0
h = ++g - g++ + --g - g–;
原始数值 0 1 2 1
前置/后置 前 后 前 后
参与运算 1 1 1 1
下一个位置 1 2 1 0
console.log(g); → 0
console.log(h); → 0

总结：
前缀 : 参与运算的是 +1 的数值
后缀 : 参与运算的是 原始数值 ,下一个位置上,是+1数值

三元运算符

所谓的 三元 / 三目 运算符
只得是有 三个表达式来参与程序的执行

有一个表达式参与程序的执行,称为 一元 / 一目运算符
++ – !
有二个表达式参与程序的执行,称为 二元 / 二目运算符
大部分运算符都是 二元运算符
有三个表达式参与程序的执行,称为 三元 / 三目运算符
表达式1 ? 表达式2 : 表达式3

通过 表达式1 的 执行结果的布尔值来进行判断
如果 表达式1 执行结果是 true 执行 表达式2
如果 表达式1 执行结果是 false 执行 表达式3

三元运算符,就是简单的if判断

如果 数值 大于 20, 输出 数值大于20
小于等于20, 输出 数值小于等于20

方法一：
var int = 2;
if(int > 20){
console.log( int + ‘大于20’ );
}else{
console.log( int + ‘小于或等于20’ );
}
方法二：
int > 20 ? console.log( int + ‘大于20’ ) : console.log( int + ‘小于或等于20’ );