JS运算符

目录

一、算术运算符

1. + ：两个功能：相加  ，拼接

2.  -  *  /  % ：先对操作数进行隐式转换，转换为number，再进行运行 

3. ++  -- :表示自增、自减

二、关系运算符（比较运算符）

1.  == 与 ===  ，!=  与 !==的区别

1）==

2） === 

3）!= 和!==

2. null 与 undefined 的区别

三、逻辑运算符

1. &&（逻辑与）

2. ||（逻辑或）

3.  !（逻辑非）

四、赋值运算符

五、三目运算符：？： 

---

什么是运算符？

运算符是用于执行程序代码运算，会针对一个以上操作数项目来进行运算。

一、算术运算符

算数运算符用于对数字执行算数运算，包括：+  -  *  /  **  %  ++  --

1. + ：两个功能：相加  ，拼接

1）如果 + 有一端是字符串，那么一定是字符串的拼接；
2)如果两端都没有字符串，那么将两端内容转为数字进行相加； 

console.log(1+2); //  相加
console.log('2'+2); // '22' 拼接
console.log('1' + '2'); //'12' 拼接
console.log(null + true); // 相加  number(null) = 0  number(true) = 1  0+1 
console.log(false + undefined);
              // NaN 相加 number(false) =0  number(undefined) = NaN   0+NaN

2.  -  *  /  % ：先对操作数进行隐式转换，转换为number，再进行运行 

console.log(null - true);  // 0-1 = -1
console.log(true - 2);     // 1- 2 = -1
console.log('23' - 2);     //number('23') = 23-2 =21
console.log( "2"  * 2);    //2 *3 =6
console.log(3/ 2);         //1.5
console.log(3 % 2);        //1
console.log(2 % 3);        //2 小数 % 大数 = 小数  大数 % 小数 = 余数

3. ++  -- :表示自增、自减

let x=5 
let y=x++  //x++整体赋值给y,用的是原有的x的值
let z=++x  //++x整体赋值给z,用的是x+1后的值
console.log(x)  // 7
console.log(y)  // 5
console.log(z)  // 7

二、关系运算符（比较运算符）

 关系运算符包括： >   <  >=  <=   ==   ===  !=   !==

console.log(3 > 2)        // true
console.log(10 <= 10)     // true
// == 不严格等于，只要内容相同即可
console.log(5 == 5)       // true
console.log(5 == '5')     // true
// === 严格等于，内容与类型都需要一样
console.log(5 === 5)      // true
console.log(5 === '5')    // false
console.log(null == null) // true
console.log(NaN == NaN)   // false
console.log(undefined == undefined) // true
console.log(null === null)          // true
console.log(NaN === NaN)            // false
console.log(undefined === undefined)
console.log(null == undefined)      // true
console.log(null === undefined)     // false

1.  == 与 ===  ，!=  与 !==的区别

1）==

仅当左右操作数相等时返回true，如果两个操作数不是同一类型时，js会尝试将其转化为合适的类型，然后进行比较

2） === 

当且仅当左右操作数类型相等，且值相等时，才会返回true，当左右两个操作数不是同一类型时，js不会转换其类型

3）!= 和!==

!= 与== 同理

2. null 与 undefined 的区别

在使用 let 声明变量但未对其加以初始化时，这个变量的值就是undefined。 null值则是表示空对象指针。 

undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。因此，可以把undefined看作是空的变量，而null看作是空的对象。 

三、逻辑运算符

逻辑运算符包括：&&（逻辑与） ，||（逻辑或），！（逻辑非）

1. &&（逻辑与）

表达式1 && 表达式2

判断表达式1的值，转布尔类型假如为true，直接返回表达式2的值

表达式1的值转布尔类型假如为false,直接返回表达式1的值

console.log(5 > 3 && 10 < 5)   //  true&&false  false
console.log(5 > 3 && 10 > 5)   //  true&&true true
console.log(5 == 3 && 10 < 5)  //  false&& false false
console.log(5 && 6)         // 6
console.log(10 > 8 && 0)    // 0
console.log('' && 100)      // ''

 表达式1的值转布尔类型假如为false,直接返回表达式1的值,此时不会执行表达式2的值

let i = 3
console.log(null && ++i)
console.log(i)   // 3

2. ||（逻辑或）

表达式1 || 表达式2

判断表达式1的值，转布尔类型假如为true，直接返回表达式1的值

表达式1的值转布尔类型假如为false,直接返回表达式2的值

console.log(5 > 3 || 10 < 5)     // true
console.log(5 > 3 || 10 > 5)     // true
console.log(5 == 3 || 10 < 5)    // false
console.log(5 || 6)              // 5
console.log(10 > 8 || 0)         // true
console.log('' || 100)           // 100

表达式1的值转布尔类型假如为 true ,直接返回表达式1的值,此时不会执行表达式2的值 

let j = 3
console.log(1 || ++j)
console.log(j)        //3

3.  !（逻辑非）

运算符规则：先将值隐式转为布尔类型，再取反；

返回值：返回值一定是布尔类型

console.log(!true)    //false
console.log(!3)       //false Boolean(3) ==>true
console.log(!null)    //true Boolean(null) ==>false
console.log(!!3);     //true  表示取反在取反 先对3转成true，取反为false在取反为true

 

四、赋值运算符

将赋值运算符=和算术运算符+、-、*、/、%结合到一起，可以形成复合的赋值运算符

//原来的写法
a = a+20;
console.log(a); //30

//将上面的写法进行简化
a += 20        //50
console.log(a);

// -=
a -= 20;      //相当于 a = a -20;
console.log(a);

五、三目运算符：？： 

console.log(5 > 20 ? '真' : '假')   // 假
//  求两个数最大值
let num1 = 10,
num2 = 20
num3 = 32
console.log(num1 > num2 ? num1 : num2)
//  求三个数最大值
let max = num1 > num2 ? num1 : num2
max = max > num3 ? max : num3
console.log(`max=${max}`)