在程序中运算符的作用是非常强大的而且也是必须的,对运算符的合理使用可以让我们的程序变得更加灵动,精准。 运算符如下:
| 类型 | 运算符 |
|---|---|
| 赋值运算符 | = |
| 算术运算符 | + , - , * , / , % |
| 比较(关系)运算符 | > , < , >= , <= , == , === , != , !== |
| 逻辑运算符 | && , ll , ! |
| 三元(条件)运算符 | 条件 ? 表达式1 : 表达式2 |
| 自增自减运算符 | num++ , ++num , num-- , --num |
赋值运算符
赋值运算符语法为:= 。
执行的是赋值操作,一般情况下JS代码的执行顺序都是从上往下,从左往右的。但是如果语句中出现了赋值运算符那么该条语句就是赋值表达式,而赋值表达式的运行顺序是从右往左执行的。
// 将数字10赋值给变量num
var num = 10;
// 将数字20赋值给变量num3
// 再将变量num3的值赋值给num2
// ...
var num1 = num2 = num3 = 20;
算术运算符
算术运算符执行的就是普通的算术运算,这里我们需要注意的是当我们使用算术运算符的时候一定小心参数运算的项目是否都是number类型。 下面演示的是正常状态下的算术运算:
var num1 = 10;
var num2 = 5;
var num3 = 3;
num1+num2+num3;// 18
num1+num2-num3;// 12
num1+num2*num3;// 25
(num1+num2)*num3;// 45
(num1+num2)/num3;// 5
num1%num2;// 0
num1%num3;// 1
上面的代码都是一些常规的算术运算,但是如果参与运算的项目不仅仅都是number类型就会发生一些不可预知的后果。
10+'10';// '1010'
10+'hello';// '10hello'
10-'5';// 5
10-'a';// NaN
10-undefined;// NaN
10*'hello';// NaN
10/'hello';// NaN
当我们在使用一些非常规的项目参与算术运算的时候JS是允许的,但是结果却是让我们摸不着头脑;其中最不明白的就是:NaN。
NaN
含义:Not a Number(非数字) 在JS语言中NaN表示的是数字的一种不正常状态,一般会在计算出错时出现。然而有意思的是NaN表示的虽然是非数字,它的数据类型却是number类型。 特点:NaN与任何值都不相等,包括自身。
检测NaN
因为NaN这种情况非常特殊而且与自身都是不相等的,所以我们需要通过JS给我们提供的函数用于检测我们的算术运算结果是否正常。该函数为:isNaN()。 如果该函数的返回值为true表示被检测的参数为NaN。 如果该函数的返回值为false表示被检测的参数为正常数字。
var arg1 = 10-'hello';
isNaN(arg1);// true
var arg2 = 10-5;
isNaN(arg2);// false
算术运算符简写
当我们需要拿一个变量先执行一些计算操作再重新赋值给自身的时候,我们可以采取简写格式。 他们分别是:+=,-=,*=,/=,%=。
var num = 10;
num = num+5;
// 简写
num += 5;
num = num-3;
// 简写
num -= 3;
num = num-3;
// 简写
num -= 3;
比较运算符
由比较运算符组成的表达式为:比较表达式。比较表达式返回的结果为boolean,也就是说程序只要执行了比较操作得到结果只能是true/false。
10>5;// true
10<5;// false
10>=5// true
10>=10// true
10<=5// false
10<=10// true
10==10;// true
10=='10';// true 等值判断,只判断值,不判断数据类型
10==='10';// false 全等判断,值和数据类型都会判断
10!='10';// false 不等值判断
10!=='10';// true 不全等判断
上面的代码关于等值判断和全等判断稍微有点迷惑人,他们之间的区别就在于对于数据类型的判断,而因为等值判断其实是不够严谨的,所以我们一般都会在程序中使用更加严谨的全等判断。其实在没有特殊环境或者需要的情况下我们都应该使用全等判断。
逻辑运算符
逻辑运算符有三个:&&:与(并且),||:或(或者),!:非(取反)。 逻辑运算符组成的表达式叫做逻辑表达式,和上面的比较表达式相同的是逻辑表达式的结果也是boolean。
// 同时判断多个表达式,必须是所有的表达式结果都是true才会得到true
10>5 && 10<20;// true
10>5 && 10<5;// false
// 同时判断多个表达式,必须是所有的表达式结果都是false才会得到false
10<5 && 10>20;// false
10>5 && 10<5;// true
// 逻辑非表示对结果的否定
!(10>5);// false
!(10<5);// true
三个运算符的执行优先级
在三个逻辑运算符中他们的执行优先级是不一样的: !>&&>||。我们可以通过**()**来改变。
逻辑中断(短路)
逻辑与和逻辑或在程序中有一个叫做逻辑中断的特点,我们可以利用这个特点写出灵活的程序代码。
- ||:如果第一个为真就返回第一个表达式,否则返回第二个表达式
- &&:如果第一个为假就返回第一个表达式,否则返回第二个表达式
function fn(num){
// 利用逻辑中断设置变量的默认值
var n = 10||num;
console.log(n);
}
fn(15);// 15
fn();// 10
三元运算符
也叫条件/三目运算符,该运算符其实就是一个简写的选择解构。 语法如下: 判断条件 ? 当条件为真返回 : 当条件为假返回
var flag = 10>5 ? 'ok':'no';
flag;// true
三元运算符的结果是写在“:”两边的,我们需要注意的是: 三元的结果不能是一条语句,只能是一个基础值或一个表达式
自增自减运算符
程序在运行过程中我们需要执行一些记录次数的操作,这时候我们就可以使用自增/自减运算符。
var num = 10;
num += 1;
// 等价于
num++;
num -= 1;
// 等价于
num--;
num++/++num的区别?
关于自增/自减运算符我们可以把他们放在变量的前开你或者后面,但是他们之间是有明显的区别的。
- num++:先执行,再计算
- ++num:先计算,再执行
var num 10;
console.log(num++);// 10
console.log(num++);// 11
console.log(num);// 12
console.log(++num);// 13
console.log(++num);// 14