js运算符（总括）

最新推荐文章于 2024-08-18 10:54:05 发布

盛夏绽放

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量655

点赞数 19

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/x15514104477/article/details/139752921

版权

1.⼀元操作符

只能操作⼀个值 的操作符我们叫⼀元操作符。⼀元操作符是 ECMAScript 当中最简单的⼀种操作符。 ⼀元操作符的结果⼀定是⼀个 Number类型递增

递减操作符

递增操作符

var a = 3;
var b = 3;
a = a + 1; //4
b++; //4 b = b + 1

递减操作符

var a = 8;
var b = 8;
a--;
b = b - 1;
console.log(a);
console.log(b);

递减操作符操作原则：

1. ⼀元操作符的结果⼀定是⼀个 Number 类型

2. 如果是⾮数字执⾏的递增与递减操作，则先将这个值进⾏ Number() 的转换

3. NaN 不参于运算，即使参于运算，结果也⼀定是 NaN

4. 符号在后，先使⽤⾃⼰，再变化⾃⼰；符号在前，先变化⾃⼰，再使⽤⾃⼰

⼀元加减操作符

⼀元加减操作符是 JS ⾥⾯⼀种特殊的操作符，它相当于执⾏了 Number 的类型转换，它的结果也是⼀定是Number 类型

var a = "01";
var b = "1.1";
var c = "z";
var d = false;
var e = 1.1;
var f = NaN;
var g = null;
var h = undefined;

我们现在就将这8个变量执⾏⼀元加减操作符

⼀元加法操作

a = +a; //1
b = +b; //1.1
c = +c; //NaN
d = +d; //0
e = +e; //1.1
f = +f; //NaN
g = +g; //0
h = +h; //NaN

⼀元减法操作

a = -a; //-1
b = -b; //-1.1
c = -c; //NaN
d = -d; //0
e = -e; //-1.1
f = -f; //NaN
g = -g; //0
h = -h; //NaN

⼀元加减操作符操作原则：

1. 结果⼀定是 Number 类型

2. ⾮数值的直接通过 Number() 去转换

3. NaN 不能于计算

4. 如果是⼀元减法操作，则通过 Number() 转换以后，再乘以 -1

2.加法操作符

加法操作符是我们使⽤ + 来表示，加法操作符的结果不⼀定是 Number 类型

console.log("hello" + "world"); //"helloworld"
console.log(1 + 2); //3
console.log("1" + 2); //"12"
console.log(true + 1); //2
console.log(true + "1"); //"true1"
console.log(NaN + 1); //NaN
console.log(NaN + "1"); //"NaN1"
console.log(1 + undefined); //NaN
console.log("1" + undefined); //"1undefined"
console.log(1 + null); //1
console.log(true + true); //2
console.log(true + null); //1
console.log(true + undefined); //NaN

加法操作符操作原则：

1. 如果执⾏加法的时候有字符串，则结果⼀定是⼀个拼接型的字符串

2. NaN 不参于运算，只要参与计算，则结果⼀定是 NaN

3. 对于⾮数字类型进⾏加法运算，则先使⽤ Number() 进⾏转换⼀下

3.减法操作符

减法操作符也是算术运算符，它使⽤ - 来表示，减法操作符的结果⼀定是 Number 类型

console.log(2 - 1); //1
console.log("2" - 1); //1
console.log("2" - "1"); //1
console.log("2" - true); //1
console.log(2 - false); //2
console.log(1 - null); //1
console.log(2 - undefined); //NaN
console.log(2 - NaN); //NaN
console.log(null - true); //-1
console.log("a" - 1); //NaN
console.log("a" - "b"); //NaN
console.log("" - 1); //-1
console.log("" - NaN); //NaN

减法操作符操作规则：

1. 减法操作符得到的结果⼀定是⼀个 Number 类型

2. NaN 与任何值相减都是 NaN

3. 如果执⾏减法的不是数字，则通过 Number 去转换⼀次

4.乘法操作符

乘法操作符使⽤的是 * 来表示，它的结果与操作原则与减法保持了⼀致——结果⼀定是 Number 类型

console.log(2 * 1); //2
console.log("2" * 1); //2
console.log("2" * "1"); //2
console.log("2" * true); //2
console.log(2 * false); //0
console.log(1 * null); //0
console.log(2 * undefined); //NaN
console.log(2 * NaN); //NaN
console.log(null * true); //0
console.log("a" * 1); //NaN
console.log("a" * "b"); //NaN
console.log("" * 1); //0
console.log("" * NaN); //NaN

乘法操作符操作原则：

1. 乘法操作符得到的结果⼀定是⼀个 Number 类型

2. NaN 与任何值相乘都是 NaN

3. 如果执⾏乘法的不是数字，则通过 Number 去转换⼀次

5.除法操作符

除法操作符使⽤ / 来表示 , 除法操作符的结果⼀定是 Number 类型，它的操作规则与减法操作符保

持⼀致

console.log(2 / 1); //2
console.log("2" / 1); //2
console.log("2" / "1"); //2
console.log("2" / true); //2
console.log(2 / false); //Infinity
console.log(1 / null); //Infinity
console.log(2 / undefined); //NaN
console.log(2 / NaN); //NaN
console.log(null / true); //0
console.log("a" / 1); //NaN
console.log("a" / "b"); //NaN
console.log("" / 1); //0
console.log("" / NaN);//NaN

除法操作符操作原则：

1. 除法操作符得到的结果⼀定是 Number 类型

2. NAN 与任何数相除都是 NaN

3. 如果执⾏除法的不是数字，则通过 Number 去转换⼀次

4. 如果除数为 0 ，则最终的结果为 Infinity ⽆穷⼤

6.取余操作符

取余操作符是针对两个数相除以后取余数，使⽤ % 来表示，它的结果⼀定是 Number 类型，遵守减

法操作规则

console.log(2 % 1); //0
console.log("2" % 1); //0
console.log("2" % "1"); //0
console.log("2" % true); //0
console.log(2 % false); //NaN
console.log(1 % null); //NaN
console.log(2 % undefined); //NaN
console.log(2 % NaN); //NaN
console.log(null % true); //0
console.log("a" % 1); //NaN
console.log("a" % "b"); //NaN
console.log("" % 1); //0
console.log("" % NaN); //NaN

操作原则

1. 取余操作符得到的结果⼀定是 Number 类型

2. NaN 不参于运算，只要参于运算，结果就是 NaN

3. 如果执⾏取余运算的不是数字，则通过 Number 去转换⼀次

4. 如果取余的时候除数为 0 ，则结果就是 NaN

7.布尔操作符[逻辑操作符]

布尔操作符⼀共有 3 个：⾮（ NOT ）、与（AND ）和或（ OR ）

逻辑⾮操作符

逻辑⾮操作符使⽤的是 ! 来表示，它执⾏的是 ⾮真即假，⾮假即真 的操作，它的结果⼀定是⼀个布

尔类型——若值是真的返回false，若值是假的返回true

console.log(!true); //false
console.log(!123); //false
console.log(!undefined); //true
console.log(!0); //true
console.log(!null); //true
console.log(!NaN); //true
console.log(!""); //true
console.log(!"biaogege"); //false
console.log(!!"bgg"); //true

逻辑⾮操作符操作原则:

1. 它的结果⼀定是布尔类型

2. ⾮真即假，⾮假即真

3. 对于不是布尔类型的值的，先通过 Boolean 做隐式类型再换，再取⾮

4. ⼀定要注意 6 个明确的 false 条件

逻辑与操作符

逻辑与操作符执⾏的是 && 这个符号进⾏操作，它执⾏ ⼀假即假 的原则，它的结果不⼀定是布尔类

型——条件里只要有一个是false那就返回false

console.log(true && false); //false
console.log(true && 123); //123
console.log(false && 123); //false
console.log(true && ""); //""
console.log(true && "" && 123); //""
console.log(NaN && false); //NaN
console.log(NaN && null); //NaN
console.log(null && "abc"); //null
console.log(123 && "abc"); //"abc"
console.log(0 && 123); //0

逻辑与操作符操作原则：

1. 它的结果不⼀定是 Boolean 类型

2. " ⼀假即假 " 的操作

3. 对于不是布尔类型的要拿 Boolean 去测试⼀下

4. 对于 6 个明确的 false 的条件要条件

5. 短路原则：当⼀个表达式已经能够得到结果，就不会再向后⾯运算

逻辑或操作符

逻辑或操作符使⽤ || 来表示，它执⾏ ⼀真即真 的操作，它的结果不⼀定是布尔类型还是⼀样的，

先通过⼏个简单的案例来看⼀下

console.log(true || 123 || false); //true
console.log(false || 123 || false); //123
console.log(666 || true || "hello"); //666
console.log(NaN || false || null); //null
console.log(null || "鑫哥"); //"鑫哥"
console.log(false || NaN); //NaN

逻辑或操作符操作原则：

1. 它的结果不⼀定是 Boolean 类型

2. " ⼀真即真 " 的操作

3. 对于不是布尔类型的要拿 Boolean 去测试⼀下

4. 对于 6 个明确的 false 的条件要条件

5. 短路原则：当⼀个表达式已经能够得到结果，就不会再向后⾯运算

总的操作原则：

1. 或：⼀真即真；与：⼀假即假，⾮：⾮真即假，⾮假即真

2. 先⾮，再与，最后或

3. ⾮布尔类的型的要⽤ Boolean 去测试或转换

4. 弄清楚 6 个明确的 false 条件

5. 短路原则

8.相等操作符

在 JavaScript ⾥⾯，我们如果想判断两个内容是否相等，我们需要使⽤ == 来表示

console.log(1 == 2); //false
console.log(1 == 1); //true
console.log(1 == true); //true 第4条原则
console.log(0 == false); //true 第4条原则
console.log("0" == false); //true 先适⽤于第4条原则，再适⽤于第3条
console.log("10" == 10); //true 第3条原则
console.log("" == 0); //true 第3条原则
console.log(NaN == 0); //false 第2条原则
console.log(NaN == NaN); //false 第2条原则
console.log(null == undefined); //true 第1条原则
console.log("" == null); //false 第1条原则或第5条原则
console.log(0 == undefined); //false 第1条原则或第5条原则

操作原则

1. null 与 undefiend 相等，也可以与⾃身相等，除此之外，不与任何值相等

2. NaN 不参于⽐较，只要⽐较就是 false

3. 如果⼀个是字符串，另⼀个操作数是数值，则将字符串转成数值

4. 如果是布尔类型，则通过 Number 去转换成数字

5. 在⽐较之前， null 与 undefined 不参于类型转换

6. 相等操作符的结果⼀定是布尔类型

9.全等操作符

全等操作符也叫严格相等操作符，它使⽤ === 来表示，它是弱类型语⾔⾥⾯独有的，因为在上⾯的相等操作符⾥⾯，我们如果直接判断相等，它会做隐匿类型转换，这样做并不严格，有些时候我，们希望要判断它的数据类型和值都要相等，这个时候我们就使⽤严格相等—— 判断的两方数据类型也要一样

console.log(1 === 2); //false
console.log(1 === 1); //true
console.log(1 === true); //false
console.log(0 === false); //false
console.log("0" === false); //false
console.log("10" === 10); //false
console.log("" === 0); //false
console.log(NaN === 0); //false
console.log(NaN === NaN); //false
console.log(null === undefined); //false
console.log("" === null); //false
console.log(0 === undefined); //false

操作原则

1. 符号两边数据类型要相同

2. 符号两边数据的值相同

3. NaN 不参于⽐较，只要⽐较就是 false

4. 结果⼀定是布尔类型

10.不相等操作符

不相等操作主要就是 != 与 !== ，它其实就是把相等操作符或全等操作的结果取反就可以了

console.log(1 != 1); //false
console.log(1 !== "1"); //true
console.log(1 != "1"); //false
console.log(null != undefined); //false;
console.log(NaN != NaN); //true

11.关系操作符

⼩于（ < ）、⼤于（ > ）、⼩于等于（ <= ）和⼤于等于（ >= ）这⼏个关系操作符⽤于对两个值进⾏⽐较，⽐较的规则与我们在数学课上所学的⼀样。这⼏个操作符都返回⼀个布尔值.

console.log("1" < 2); //true 第2条原则
console.log("1" < "2"); //true 第4条原则
console.log("11" < 2); //false 第2条原则
console.log("11" < "2"); //true 第4条原则
console.log(true < 2); //true 第3条原则
console.log(true < "2"); //true 先适⽤第3条，再适⽤第2条
console.log("aa" < "b"); //true 第4条原则
console.log("aa" < "ab"); //true 第4条原则
console.log("A" < "a"); //true 第4条原则
console.log(null < 1); //true 第6条原则
console.log(NaN <= 0); //false 第7条原则
console.log(undefined < 1); //false 先适⽤第6条，再适⽤于7条
console.log("我" > "你"); //true 第5条原则

操作原则：

1. 如果 2 个数是数值，则直接⽐较⼤⼩

2. 如果有 1 个是数值，另⼀个不是数值，则将另⼀个数通过 Number 转换⼀下

3. 如果有⼀个操作数是布尔值，则先通过 Number 去转换

4. 如果 2 个操作数都是⾮中⽂的字符串，则⽐较 ascii 码

5. 如果有中⽂字符串，则⽐较 unicode 编码【⽬前这⼀块，你们没有学，要到后⾯讲⾯向对象才

会讲到】

6. 对于⾮数字类型的，则通过 Number 隐式类型转换⼀下

7. NaN 不参于⽐较，只要⽐较就是 false

12.条件操作符

条件操作符也叫三⽬运算符，它是根据⼀个条件来进⾏赋，在有些编程语⾔⾥⾯也叫三元表达式。

条件操作符的基本语法格式如下

var a = 条件是否成⽴?条件成⽴的值:条件不成⽴的值;

计算a，b，c中最大的值：

//第⼀步：先计算a,b当中⽐较⼤的⼀个值
var temp = a > b ? a : b;
//这个时候的temp就是a和b当中⼤的那个值
//第⼆步：再将temp与c相⽐较
var max = temp > c ? temp : c;

上面的代码可简化为：

// var max = a > b ? (成⽴以后a,c⽐较) : (不成⽴b,c⽐较);
var max = a > b ? (a>c?a:c) : (b>c?b:c);

13.赋值运算符

赋值运算符使⽤的是 = 来表示，这个在之前讲变量的时候已经讲过了。赋值运算符是 将符号右边的 值赋值给符号左边

var a = 10;
a = a + 20;
//上⾯的写法还可以简写成下⾯的形式
a += 20;
var b = 5;
b -= 3; //b = b-3;
var c = 10;
c += c;

上⾯的这种操作叫 复合赋值运算符 ，根据上⾯的情况，我们可以依次类推

乘 / 赋值 (*=)

除 / 赋值 (/=)

加 / 赋值 (+=)

减 / 赋值 (-=)

模 / 赋值 (%=)

14.逗号操作

逗号运算符是⼀个最最最基础的运算符，它代表⼀条语句没有完，或⼀个关键字的作⽤没有完，逗

号代表⼀个操作没有结束

// var a ;
// var b;
// var c;
// 运用逗号运算符：
var a, b, c;

// var a = 10;
// var b = 20;
// var c = 30;
var a = 10, b = 20, c = 30;

15.操作符的优先级

现在我们已经学习了很多运算符，如果运算符结合在⼀起了，就会有优先级的问题，具体的

优先级请看下⾯

1. .()[]

2. ⼀元操作符 ++,--

3. 算术运算符 [ 先乘除，后加减 ]

4. 关系操作符 >,<,>=,<=,==,!=

5. 逻辑操作符 [ 先⾮，再与，最后或 ]

6. 三⽬运算符

7. 赋值运算符

代码演示：

var num = 10;
var x = 5 == num/2 && (2+2*num).toString()=="22";
console.log(x);

对上面代码进行逐步分解计算演示：

//var x = 5 == num/2&&(2+2*10).toString()=="22";
//var x = 5 == num/2&&(2+20).toString()=="22";
//var x = 5 == num/2&&(22).toString()=="22";
//var x = 5 == num/2&&"22"=="22";
//var x = 5 == 10/2&&true;
//var x = 5 == 5&&true;
//var x = true&&true;
var x = true;