02.js-运算符

js运算符

1. 算术运算符
2. 比较(关系)运算符
3. 逻辑运算符
4. 三元运算符
5. 赋值运算符

从1到5运算符的优先级依次减弱

一、算数运算符

+ - * / % ++ –

1. +运算符

   let num1=10;
   let num2=20;
   let num3=num1 + num2;
   console.log(num3);
   //30
   

   如果 + 的两边有一个是字符串，则表示的是字符串的拼接

   原理: 如果两个不同类型的数据相加，有一个是字符串，则另一个数据会被隐式转化为字符串，然后通过+ 和另一个数据拼接在一起

   let str = '莫愁前路无知己';
   let num4 = str + num2+num2+ num2;
   console.log(num4);//莫愁前路无知己202020
   let str1 = '西出阳关无故人';
   console.log( str+str1);//莫愁前路无知己西出阳关无故人
   
   let num5=num2+ num2+ num2+ str1;
   console.log(num5);//60西出阳关无故人
   console.log(0.1+0.2);//js计算并不是非常精确  0.300000000004
   

2. -运算符

   -运算符，可以把他两边的字符串类型 隐式转化为 数字类型

   如果被转化的字符串是 一个数字，则参与减法运算

   如果 被转化的字符串是 一个普通字符，则得出的结果是 NaN

   除了 + 运算的时候，把数字转化为字符串，其他的算术运算符都是把字符串转化为数字

   let num6 = 200;
   let num7 = 100;
   let num8 = '300';
   console.log(num6-num7);//100
   console.log(str1-num7);//NaN
   
   console.log(num6+num8);//200300
   
   console.log(num6-num8);//-100
   
   
   let val1 = document.getElementById('val1');
   let val2 = document.getElementById('val2');
   let sum = document.getElementById('sum');
   
   // 给btn添加点击事件
   sum.onclick = function(){
       // js 通过 input 的value 属性获取的值，是一个字符串，通过隐式转化 变成一个数字
       let v1 = val1.value - 0;
       let v2 = val2.value - 0;
       alert( v1+v2 );
   };
   

3. *和/

   let num1 = 2 ;
   let num2 = 3 ;
   console.log(num1*num2);//6
   console.log(num1/num2);//0.6666666666
   

   parseInt(num) 把数字 num 直接转化为整数，他会去掉num的小数部分

   let num =325;
   let s= num/100;
   alert(parseInt(s));//3
   

4. %
   % 取余，又称 模运算

   运算的结果是 相除之后的余数

   被除数%除数 返回结果是 余数

   被除数和除数不一定都是整数

   let num3 = 10 ;
   let num4 = 3 ;
   console.log(num3%num4);//1
   

5. ++

   a++ ++a 都是自增写法

   c= a++;先把a的值赋值给c，然后再执行a的自增

   c = ++a;先执行a的自增，然后再把a的值赋值给c

   let num5 = 10;
   console.log(++ num5);//11
   num6=num5++;
   console.log(num6);//10
   
   let a=10;
   let c=a++; // 1.a的值赋值给c，此刻 c=10; 2.执行a的自增，此刻a=11
   console.log(c,a);//10 11
   
   let k=10;
   let m = (k++)+3;
   console.log(k ,m);//13 11
   
   let n=13;
   let s =++n+(n++)+n;
   console.log(s);//14+14+15
   

6. –

   – 自减，a-- --a 使用方式和上面的 ++一致

   c=a–: 先把a的值赋值给c，然后再执行a的自减

   c=–a: 先执行a的自减，然后再把a的值赋值给c

   ++和-- 的运算优先级高于 + - * / %

   let j=14;
   
   let num6 = (j++) + (--j) +(j--) + (++j);
   console.log(num6);14+14+14+14
   
   

二、关系运算符

1. >大于<小于>=大于等于， <= 小于等于， == 等于， != 不等于， === 全等 ，!==不全等

2. 关系表达式 的 返回值是 true 或者 false

3. == 只比较数值，不比较类型

4. === 不但比较数值，而且比较类型

console.log(3>5);//false
console.log(5>=5);//true
let num1=30;
let num2='30';
console.log('num1和num2是否相等',num1==num2);//true
if(num1===num2){
    console.log('相等');
}else{
    console.log('不相等');
}//不相等

let str1 = '陈胜';
let str2 = '吴广';
console.log(str1!=str2);//true

console.log('高堂明镜悲白发'=='朝如青丝暮成雪');//false

三、逻辑运算符

1. 或 ||
2. 与 &&99
3. 非 !

判断规则：

1. 或 || ：两边的判断条件，只要有一个为真(true),则返回结果为真(true)
2. 与 && ：两边的判断条件，都为真(true),则返回结果为真(true)
3. 非 ! ： 取当前结果返回布尔值的反向值，就是取反的意思

console.log(3>4 || 2>3);//
console.log(3>4 || 2<3);

console.log('===========');
// 只有一个为true，返回结果是false
console.log(3>4 && 2<3);
// 两个同时为true，返回结果是true
console.log(3>4 && 2<3);

if(!(3<4)){
    console.log('今天晚上做作业');
}else{
    console.log('今天晚上做练习');
}//做练习
// 0 为false，非0数字为true
if (0){
    console.log('今天晚上吃米饭');
}else{
    console.log('今天晚上不吃米饭');
}//不吃米饭

逻辑运算的短路算法

1. 表达式1 || 表达式2 表达式1为真的时候，表达式2不会被解析
2. 表达式1 && 表达式2 表达式1为真的时候，表达式2才会被解析

   let num = 10;
   num>2||num++;
   console.log(num);//10
   num>2&&num++;
   console.log(num);//11
   
   let n = 10;
   console.log(n>2||n++);//true
   console.log(n<2||n++);//10
   

四、三元运算符 ?:

判断条件 ? 判断条件为真，则执行当前代码 : 判断条件为假，则执行当前代码

   6>4 ? console.log('固始鹅块'): console.log('糍粑');//固始鹅块

   let abc = 1<0 ? '秦琼':'尉迟恭';//尉迟恭
   console.log(abc);

   console.log(5>6 ? '单熊信':'罗成');//罗成

   //三元运算符嵌套
   let username= 5>6 ? 6>7? '李元霸':'宇文成都':'杨广';
   console.log(username);//杨广
   let username1= 5<6 ? 6>7? '李元霸':'宇文成都':'杨广';
   console.log(username);//宇文成都

五、赋值运算符

赋值的简写:
= += -= *= /=

简写形式	含义
n+=	n=n+1
n-=	n=n-1
n*=	n=n*1
n/=	n=n/1

let n = 10 ;
n+=5;//n = n + 5
console.log(n);
n = n + 5;

//字符串拼接
let str2 = '日啖荔枝三百颗';
str2+='每天一碗胡辣汤';
str2+='每天一碗胡辣汤';
console.log(str2);

六、运算符的优先级

优先级：

1. 小括号()
2. !
3. 算术运算符
4. 比较运算符
5. 逻辑运算符
6. 赋值运算符

• !的优先级比 算术运算符的优先级高
• boolean数据和number类型的数据运算的时候，布尔类型会隐式转化为number类型，其中 false=>0 true=>1

console.log(10>5+6|| '中午吃啥');//中午吃啥
console.log(10<5+6|| '中午吃啥');//true
let str =10>5+6 || '中午吃啥';
console.log( str);//中午吃啥
let str1 =10>(5+6 || '中午吃啥');
console.log( str);//中午吃啥

七、显式转化

1. 把数据转化为字符串，使用 String()

2. 把数据转化为number，使用 Number()

3. 把数据转化为boolean，使用 Boolean()

4. 另外，非0即为真

   0,‘’,null,undefined都会转化为 false

   //字符串转数字
   let num =Number ('唐伯虎');
   console.log(typeof num);//number
   //数字转字符串
   let str =String (10000);
   console.log(typeof str);//string
   //把数据转为 bool值
   let bol1 = Boolean('唐伯虎')
   console.log(typeof bol1,bol1);//boolean true
   
   let bol2 = Boolean('');
   console.log(typeof bol2,bol2);//boolean false
   
   let bol3 = Boolean('-1');
   console.log(typeof bol3,bol3);//boolean true
   let bol4 = Boolean(0);
   console.log(typeof bol4,bol4);//boolean false