03-运算符

js运算符思维导图

算术运算

+ - * / %

相加的时候, 有一个数为字符串, 则+表示字符串拼接

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

关系运算符(比较运算符)

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

逻辑运算符

逻辑非 ! , 取反即可

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

// 如果str为空, 则打印111,否则打印222
var str = '';
if(str === '') {
	console.log(111);
} else {
	console.log(222);
}
// 以上写法,可以换成下面的写法
if (!str) {
	console.log(111);
} else {
	console.log(222);
} 

var num = 100;
if (num) {
	console.log(111);
} else {
	console.log(222);
}
// 以上写法, 一般会写成
if(!!num) {
    console.log(111);
} else {
    console.log(222);
}

逻辑与&&: 中文里并且的意思

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

当都是布尔的时候, 只有当两者都为true时结果为true, 否则为false

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

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

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

一元运算符

• i++ 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>

复合赋值运算符

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

运算符优先级

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

js中= == ===相同点和不同点

1. = 是赋值运算符，用于把右边的值赋值给左边的变量。

2. ==是相等运算符，用于判断两个值是否相等。

3. === 是严格相等运算符，用于判断两个值是否完全相等。

   这三个运算符都有相同点：就是都可以用来比较两个值。

   但是，它们的不同点在于：

   1. ==会在比较前尝试转换两个值的数据类型，然后再进行比较。

   2. ===则不会尝试转换两个值的数据类型，它会检查两个值是否完全相等（包括数据类型）。

   3. 这意味着，使用 ===时，如果两个值的数据类型不同，就不会判断为相等，但是使用 ==可能会尝试转换两个值的数据类型，然后判断它们是否相等。