Javascript-3.运算符和数据类型的转换

一.if else 语句

if else用来表示中文里的 如果..., 就...., 否则.....

// 条件为true, 执行if后面的括号代码, 否则执行 else 后面括号代码
if(条件) {
	// todo
}else{
	// todo
}

// 多重判断
if(){

} else if() {

} else {

}

具体例子

<script>
   var a = 100;
   var b = 20;
   debugger;
   if (a > b) {
      console.log('a 大于 b');
   } else {
      console.log('a 小于 b');
   } 
</script>

<!-- 多重判断 -->
<script>
   var gender = prompt('请输入性别');
   if (gender === '男') {
      alert('你是个男的');
   } else if(gender === '女') {
      alert('你是个妹子');
   } else {
      alert('性别未知');
   }
</script>

二.类型转换

【腾讯文档】05-类型转换-备课​​​​​​

问题: 以下代码会打印什么

<script>
   var a = 'aa';
   var b = 'bb';
   if (a+b) {
      console.log('xxxxxxx');
   } else {
      console.log('yyyyyyyy');
   } 
</script>

1.显式转换

1.Number（变量名）将其他类型转为数字//快捷方式  变量名*1

2.String（变量名）；转字符串// 变量名+ ‘’

3.Boolean（变量名）；//!!变量名

<script>
    var str = '123';
    // 转换为数字
    var num = Number(str);
    console.log(num);
    console.log(typeof num);
 
    // 结果为NaN
    var str2 = 'abcd';
    var num2 = Number(str2);
    console.log(num2);
 
    //结果为0
    var str3 = '';
    var num3 = Number(str3);
    console.log(num3); 
 </script>

2.隐式转换

<script>
   var a = 'aa';
   var b = 'bb';
    // a+b => aabb aabb会自动转换为true, 所以执行结果为 xxxxxx
   if (a+b) {
      console.log('xxxxxxx');
   } else {
      console.log('yyyyyyyy');
   } 
</script>

3.数据类型转换规则

【腾讯文档】类型转换规则 腾讯文档

三.运算符

【腾讯文档】js运算符思维导图 腾讯文档

1.算术运算

1.+-*/

2.相加的生活，有一个数为字符串，则+表示字符串拼接

<script>
    var a = 20;
    var b = 7;
    var num1 = a+b;
    var num2 = a-b;
    var num3 = a*b;
    var num4 = a/b;
    // 计算余数
    var num5 = a % b; 
    console.log(num1);
    console.log(num2);
    console.log(num3);
    console.log(num4);
    console.log(num5); 
</script> 

<script>
  // 有一个数为字符串, 则+表示字符串拼接  
  var a = 100;
  var b = prompt('请输入数字');
  console.log(typeof b);
  console.log(a+Number(b));
</script>  

2.关系运算符（比较运算符）

var a = 10;
var b = '10';
console.log(a == b); // true,类型不同, 先转换成相同类型
console.log(a === b); // false, 类型不同为false, 类型相同再判断值是否相同

3.逻辑运算符

1.逻辑非！，取反即可

var boo1 = false;  // !boo1 => true  !!bool 
var num = 100;	//  !num => false
var str = ''; // 	!str => true
var obj = null; // !obj => true
var username; // !username => true

2.逻辑与&&：中文里并且的意思

        规律：前者为true取后者，否则取前者

        当都是布尔的时候，只有当俩者为true时结果为true，否则为false。

// 计算以下式子的值(参与运算的都是布尔类型)
true && true => true
true && false => false
false && true => false
false && false =>   false

// 计算以下式子的值(参与运算的是其他类型)
var num1 = 100;
var num2 = 0;
num1 && num2 => 0
num2 && num1 => 0

var a = 'web';
var b; 
a && c =>  // 报错,计算的结果为c, 而c没有声明
b && c =>   undefined

3.逻辑或||:中文里的或者意思

        规律:前者为true取前者，否则取后者

        当都是布尔的生活，只要有一个为true，结果皆为true，否则为false。

<script>
console.log(true || true );  // true
console.log(true || false );  // true
console.log(false || true ); // true
console.log(false || false ); // false


 var num1 = 100;
var num2 = 0;
console.log(num1 || num2 );  // 100
console.log(num2 || num1 );  // 100

var a = 'web';
var b; 
console.log(a || c );  // web
console.log(b || c ); // 报错,计算的结果为c, 而c没有声明
</script>

4.一元计算符

• i++，i先用原值运算，再自加1，后面要是有i它值为i+1；
• ++i，i先是给自己加1，再进行运算。

<!-- ++ 自加 -->
<script>
var i = 10;
var j = 20;

var i2 = 10 + i++;   // i先运算再自加1
console.log('i2',i2); // 20
console.log('i',i); // 11

var j2 = 10 + ++j; // j先自加1再运算
console.log('j2',j2); // 31
console.log('j',j);  // 21 
</script>

自减运算, 道理类似自加运算

<script>
var i = 10;
var j = 20;

var i2 = 10 + i--;   // i先运算在自减1
console.log('i2',i2); //  20
console.log('i',i); //  9

var j2 = 10 + --j; // j先自减1再运算
console.log('j2',j2); //  29
console.log('j',j);  //  19
</script>

练习:

<!-- 练习1 -->
<script>
var i = 10; 
var i2 = 10 + i++; // i=10 i2=20
var i3 = 10+ ++i; // i=12 i3=22
var i4 = 10 + i--; // i=11 i4=22   
var i5 = 10 + --i;  // i =10 i5=20   
// 求i,i2,i3,i4,i5的值
console.log(i,i2,i3,i4,i5);


var count = 60; // 说出控制台打印的值
console.log(--count);  // 59
console.log(--count);  // 58
console.log(--count);//57
console.log(--count);//56
console.log(--count); //55
</script>

<!-- 练习2 -->    
<script>
var i = 1;
var j = 1;
var a = 10;
// 11   10+ 1
var b = a + i++;
//     11+  3   + 3   + 2
var c = b + ++i + i++ + ++j;
var d = a + b + c;
// i=4 j=2 a=10,b=11, c=19 d=40
console.log(i,j,a,b,c,d); 
</script>   

5.复合赋值运算符

<script>
var a = 10;
a += 10;  
console.log(a); // 20
a -= 10;
console.log(a); // 10
a *= 10;
console.log(a); // 100
a /= 10;
console.log(a); // 10
a %= 10;
console.log(a); // 0 
</script>

6.运算符优先级

() > 自加(自减) > 算术 > 关系 > 逻辑 > 赋值