运算符的定义和分类
运算符的定义
运算符:也叫操作符,是一种符号。通过运算符可以对一个或多个值进行运算,并获取运算结果。
表达式:数字、运算符、变量的组合(组成的式子)。
表达式最终都会有一个运算结果,我们将这个结果称为表达式的返回值。
比如:+
、*
、/
、()
都是运算符,而(3+5)/2
则是表达式。
比如:typeof 就是运算符,可以获得一个值的类型。它会将该值的类型以字符串的形式返回,返回值可以是 number、string、boolean、undefined、object。
运算符的分类
JS 中的运算符,分类如下:
- 算数运算符
- 自增/自减运算符
- 一元运算符
- 三元运算符(条件运算符)
- 逻辑运算符
- 赋值运算符
- 比较运算符
下面来逐一讲解。
算数运算符
算术运算符:用于执行两个变量或值的算术运算。
常见的算数运算符有以下几种:
运算符 | 描述 |
---|---|
+ | 加、字符串连接 |
- | 减 |
* | 乘 |
/ | 除 |
% | 获取余数(取余、取模) |
求余的举例:
假设用户输入 345,怎么分别得到 3、4、5 这三个数呢?
答案:
得到3的方法:345 除以100,得到3.45然后取整,得到3。即:parseInt(345/100)
得到4的方法:345 除以100,余数是45,除以10,得到4.5,取整。即:parseInt(345 % 100 / 10)
得到5的方法:345 除以10,余数就是5。即:345 % 10
算数运算符的运算规则
(1)* / %
的优先级高于 + -
(2)无论是+ - * / %
都是左结合性(从左至右计算)
(2)小括号( )
:能够影响计算顺序,且可以嵌套。没有中括号、没有大括号,只有小括号。
举例 1:(取余)
console.log(3 % 5);
输出结果为 3。
举例 2:(注意运算符的优先级)
var a = 1 + ((2 * 3) % 4) / 3;
结果分析:
原式 = 1 + 6 % 4 / 3 = 1 + 2 / 3 = 1.66666666666666
取模(取余)运算
格式:
余数 = m % n;
计算结果注意:
-
取余运算结果的正负性,取决于 m,而不是 n。比如:
10 % -3
的运算结果是 1。-10 % 3
的运算结果是-1。 -
如果 n < 0,那就先把 n 取绝对值后,再计算。等价于 m % (-n)。
-
如果 n 是 0,那么结果是 NaN。
-
在 n > 0 的情况下:
- 如果 m>=n,那就正常取余。
- 如果 m<n,那结果就是 m。
浮点数运算的精度问题
浮点数值的最高精度是 17 位小数,但在进行算术计算时,会丢失精度,导致计算不够准确。比如:
console.log(0.1 + 0.2); // 运算结果不是 0.3,而是 0.30000000000000004
console.log(0.07 * 100); // 运算结果不是 7,而是 7.000000000000001
因此,不要直接判断两个浮点数是否相等。前面的文章《JavaScript 基础:基本数据类型:Number》有详细介绍。
隐式类型转换——运算符:加号 +
- 字符串 + XX = 字符串
任何值和字符串做加法运算,都会先调用 String() 函数转换为字符串,然后再做拼串操作。最终的运算结果是字符串。
比如:
result1 = 1 + 2 + '3'; // 字符串:33
result2 = '1' + 2 + 3; // 字符串:123
- Boolean + 数字 = 数字
Boolean 型和数字型相加时, true 按 1 来算 ,false 按 0 来算。这里其实是先调 Number() 函数,将 Boolean 类型转为 Number 类型,然后再和 数字相加。
- null + 数字 = 数字
等价于:0 + 数字
- undefined + 数字 = NaN
计算结果:NaN
- 任何值和 NaN 运算的结果都是 NaN。
隐式类型转换——运算符:-
、*
、/
、%
任何非 Number 类型的值做-
、*
、/
、%
运算时,会将这些值转换为 Number 然后再运算(内部调用的是 Number() 函数),运算结果是 Number 类型。
任何数据和 NaN进行运算,结果都是NaN。
比如:
var result1 = 100 - '1'; // 99
var result2 = true + NaN; // NaN
自增和自减运算符
自增运算符 ++
作用:可以快速对一个变量进行加1操作。只能操作变量,不能操作常量或者表达式。
例如:
let a1 = 1;
let a2 = 2;
a1++;
const result = a1++ + a2; // result的结果为4
// (a1+a2)++; // 报错,没有这种写法
const a3 = 3;
a3++; // 报错,因为常量无法再自加
自增分成两种:a++
和++a
。共同点:
(1)无论是 a++
还是++a
,自增都会使原变量的值加 1。
(2)我们要注意的是:a
是变量,而a++
和++a
是表达式。
那这两种自增,有啥区别呢?区别是:a++
和 ++a
的值不同:(也就是说,表达式的值不同)
-
a++
这个表达式的值等于原变量的值(a 自增前的值)。可以这样理解:先把 a 的值赋值给表达式,然后 a 再自增。 -
++a
这个表达式的值等于新值 (a 自增后的值)。 可以这样理解:a 先自增,然后把自增后的值赋值给表达式。
自减运算符 --
作用:可以快速对一个变量进行减1操作。原理同自增运算符。
开发时,大多使用后置的自增/自减,并且代码独占一行,例如:num++
,或者 num--
。
代码举例
var n1 = 10;
var n2 = 20;
var result1 = n1++;
console.log(n1); // 11
console.log(result1); // 10
result = ++n1;
console.log(n1); //12
console.log(result); //12
var result2 = n2--;
console.log(n2); // 19
console.log(result2); // 20
result2 = --n2;
console.log(n2); // 18
console.log(result2); // 18
隐式类型转换
自增和自减时,a的执行过程:
(1)先调用Number(a)
函数;
(2)然后将Number(a)
的返回结果进行 加 1 操作,得到的结果赋值给 a。
举例 1:
let a = '666'; // 这里不能用 const 定义,否则报错。
a++;
console.log(a); // 打印结果:667
console.log(typeof a); // 打印结果: number
举例2:
let a = 'abc';
a++;
console.log(a); // 打印结果:NaN。因为 Number('abc')的结果为 NaN,再自增后,结果依然是 NaN
console.log(typeof a); // 打印结果:number
一元运算符
一元运算符,只需要一个操作数。常见的一元运算符如下。
typeof
typeof 就是典型的一元运算符,因为后面只跟一个操作数。
typeof()
表示“获取变量的数据类型”,它是 JS 提供的一个操作符。返回的是小写,语法为:(两种写法都可以)
// 写法1
typeof 变量;
// 写法2
typeof(变量);
typeof 这个运算符的返回结果就是变量的类型。那返回结果的类型是什么呢?是字符串。
返回结果:
typeof 的语法 | 返回结果 |
---|---|
typeof 数字(含 typeof NaN) | number |
typeof 字符串 | string |
typeof 布尔型 | boolean |
typeof 对象 | object |
typeof 方法 | function |
typeof null | object |
typeof undefined | undefined |
备注 1:为啥 typeof null
的返回值也是 object 呢?因为 null 代表的是空对象。
备注 2:typeof NaN
的返回值是 number,上一篇文章中讲过,NaN 是一个特殊的数字。
返回结果举例:
var a = '123';
console.log(typeof a); // 打印结果:string
console.log(typeof []); // 空数组的打印结果:object
console.log(typeof {}); // 空对象的打印结果:object
代码解释:这里的空数组[]
、空对象{}
,为啥他们在使用 typeof 时,返回值也是 object
呢?因为空数组、空对象都是引用数据类型 Object。
typeof 无法区分数组,但 instanceof 可以。比如:
console.log([] instanceof Array); // 打印结果:true
console.log({} instanceof Array); // 打印结果:false
关于 instanceof 的详细内容,以后讲对象的时候,会详细介绍。
正号/负号:+a
、-a
注意,这里说的是正号/负号,不是加号/减号。
(1)不会改变原数值。
(1)正号不会对数字产生任何影响。比如说,2
和+2
是一样的。
(2)我们可以对其他的数据类型使用+
,来将其转换为 number【重要的小技巧】。比如:
var a = true;
a = +a; // 注意这行代码的一元运算符操作
console.log('a:' + a);
console.log(typeof a);
console.log('-----------------');
var b = '18';
b = +b; // 注意这行代码的一元运算符操作
console.log('b:' + b);
console.log(typeof b);
打印结果:
a:1
number
-----------------
b:18
number
(3)负号可以对数字进行取反。
隐式类型转换——正号/负号
任何值做+a
、-a
运算时, 内部调用的是 Number() 函数。
举例:
const a = '666';
const b = +a; // 对 a 进行一元运算,b是运算结果
console.log(typeof a); // 打印结果:string。说明 a 的数据类型保持不变。
console.log(a); // 打印结果:"666"。不会改变原数值。
console.log(typeof b); // 打印结果:number。说明 b 的数据类型发生了变化。
console.log(b); // 打印结果:666
三目运算符
三目运算符也叫三元运算符、条件运算符。
语法:
条件表达式 ? 语句1 : 语句2;
执行流程——条件运算符在执行时,首先对条件表达式进行求值:
-
如果该值为 true,则执行语句 1,并返回执行结果
-
如果该值为 false,则执行语句 2,并返回执行结果
如果条件表达式的求值结果是一个非布尔值,会将其转换为布尔值然后再运算。
逻辑运算符
逻辑运算符有三个:
-
&&
: 与(且)。两个都为真,结果才为真。特点:一假则假。 -
||
:或。只要有一个是真,结果就是真。特点:特点: 一真则真。 -
!
:非。对一个布尔值进行取反。特点: 真变假, 假变真。
注意:能参与逻辑运算的,都是布尔值。
连比的写法:
来看看逻辑运算符连比的写法。
举例 1:
console.log(3 < 2 && 2 < 4);
输出结果为 false。
举例 2:(判断一个人的年龄是否在 18~65 岁之间)
const a = prompt('请输入您的年龄');
if (a >= 18 && a < 65) {
alert('可以上班');
} else {
alert('准备退休');
}
PS:上面的a>=18 && a<= 65
千万别想当然地写成 18<= a <= 65
,没有这种语法。
非布尔值的与或运算【重要】
之所以重要,是因为在实际开发中,我们经常用这种代码做容错处理或者兜底处理。
非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,但返回结果是原值。比如说:
var result = 5 && 6; // 运算过程:true && true;
console.log('result:' + result); // 打印结果:6(也就是最后面的那个值)
上方代码可以看到,虽然运算过程为布尔值的运算,但返回结果是原值。
那么,返回结果是哪个原值呢?我们来看一下。
1、两个非布尔值,做逻辑运算:
与运算的返回结果:
-
如果第一个值为 false,则只执行第一条语句,并直接返回第一个值;不会再往后执行。
-
如果第一个值为 true,则继续执行第二条语句,并返回第二个值(无论第二个值的结果如何)。
或运算的返回结果:
-
如果第一个值为 true,则只执行第一条语句,并直接返回第一个值;不会再往后执行。
-
如果第一个值为 false,则继续执行第二条语句,并返回第二个值(无论第二个值的结果如何)。
2、三个及以上的非布尔值,做逻辑运算:
与运算的返回结果:(value1 && value2 && value3)
- 从左到右依次计算操作数,找到第一个为 false 的值为止。
- 如果所有的值都为 true,则返回最后一个值。
或运算的返回结果:(value1 || value2 || value3)
- 从左到右依次计算操作数,找到第一个为 true 的值为止。
- 如果所有的值都为 false,则返回最后一个值。
非布尔值的 !
运算
非布尔值进行非运算时,会先将其转换为布尔值,然后再运算,返回结果是布尔值。
举例:
let a = 10;
a = !a;
console.log(a); // false
console.log(typeof a); // boolean
短路运算的妙用【重要】
下方举例中的写法技巧,在实际开发中,经常用到。这种写法,是一种很好的「容错、容灾、降级」方案,需要多看几遍。
1、JS 中的&&
属于短路的与:
-
如果第一个值为 false,则不会执行后面的内容。
-
如果第一个值为 true,则继续执行第二条语句,并返回第二个值。
举例:
const a1 = 'qianguyihao';
// 第一个值为true,会继续执行后面的内容
a1 && alert('看 a1 出不出来'); // 可以弹出 alert 框
const a2 = undefined;
// 第一个值为false,不会继续执行后面的内容
a2 && alert('看 a2 出不出来'); // 不会弹出 alert 框
2、JS 中的||
属于短路的或:
-
如果第一个值为 true,则不会执行后面的内容。
-
如果第一个值为 false,则继续执行第二条语句,并返回第二个值。
实际开发中,我们经常是这样来做「容错处理」的,如下。
举例1:
const result; // 请求接口时,后台返回的内容
let errorMsg = ''; // 前端的文案提示
if (result & result.retCode == 0) {
errorMsg = '恭喜你中奖啦~'
}
if (result && result.retCode != 0) {
// 接口返回异常码时
errorMsg = result.msg || '活动太火爆,请稍后再试'; // 文案提示信息,优先用 接口返回的msg字段,其次用 '活动太火爆,请稍后再试' 这个文案兜底。
}
if (!result) {
// 接口挂掉时
errorMsg = '网络异常,请稍后再试';
}
举例2,当前端成功调用一个接口后,返回的数据为 result 对象。这个时候,我们用变量 a 来接收 result 里的图片资源:
if (result.retCode == 0) {
var a = result && result.data && result.data.imgUrl || 'http://img.smyhvae.com/20160401_01.jpg';
}
上方代码的意思是,获取返回结果中的result.data.imgUrl
这个图片资源;如果返回结果中没有 result.data.imgUrl
这个字段,就用 http://img.smyhvae.com/20160401_01.jpg
作为兜底图片。这种写法,在实际开发中经常用到。
赋值运算符
赋值:将等号右侧的值赋给符号左侧的变量。
赋值运算符包括哪些
-
=
直接赋值。比如var a = 5
。意思是,把 5 这个值,往 a 里面存一份。简称:把 5 赋值给 a。 -
+=
:比如 a += 5 等价于 a = a + 5。 -
-=
:比如 a -= 5 等价于 a = a - 5。 -
*=
:比如 a _ = 5 等价于 a = a -5。 -
/=
:比如 a /= 5 等价于 a = a / 5。 -
%=
:比如 a %= 5 等价于 a = a % 5。
注意事项
(1)算数运算符的优先级高于赋值运算符。举例:
const result = 1 + 2; // 先计算 1 + 2,再把计算结果赋值给 result。因为算数运算符的优先级高于赋值运算符。
(2)赋值运算符的结合性是右结合性(从右至左的顺序计算)。举例:
const a1, a2;
a1 = a2 = 3; // 先将 3 复制给 a2,再将 a2 的值赋值给 a1
比较运算符
比较运算符可以比较两个值之间的大小关系,如果关系成立它会返回 true,如果关系不成立则返回 false。
比较运算符有很多种,比如:
> 大于号
< 小于号
>= 大于或等于
<= 小于或等于
== 等于
=== 全等于
!= 不等于
!== 不全等于
比较运算符,得到的结果都是布尔值:要么是 true,要么是 false。如果关系成立,就返回true;如果关系不成立,就返回false。
举例如下:
const result = 5 > 10; // false
非数值的比较
(1)对于非数值进行比较时,会将其转换为数值类型(内部是调用Number()方法
),再进行比较。
举例如下:
console.log(1 > true); //false
console.log(1 >= true); //true
console.log(1 > '0'); //true
//console.log(10 > null); //true
//任何值和NaN做任何比较都是false
console.log(10 <= 'hello'); //false
console.log(true > false); //true
(2)特殊情况:如果参与比较的都是字符串,则不会将其转换为数字进行比较,比较的是字符串的Unicode 编码。【非常重要,这里是个大坑,很容易踩到】
比较字符编码时,是一位一位进行比较,顺序从左到右。如果大一样,则继续比较下一位。
比如说,当你尝试去比较"123"
和"56"
这两个字符串时,你会发现,字符串"56"竟然比字符串"123"要大(因为 5 比 1 大)。也就是说,下面这样代码的打印结果,其实是 true:(这个我们一定要注意,在日常开发中,很容易忽视)
// 比较两个字符串时,比较的是字符串的字符编码,所以可能会得到不可预期的结果
console.log('56' > '123'); // true
因此:当我们想比较两个字符串型的数字时,一定一定要先转型再比较大小,比如 parseInt()
。
(3)任何值和 NaN 做任何比较都是 false。
==
符号的强调
==
这个符号,它是判断是否等于,而不是赋值。注意事项如下:
(1)==
这个符号,还可以验证字符串是否相同。例如:
console.log('我爱你中国' == '我爱你中国'); // 输出结果为true
(2)==
这个符号并不严谨,会做隐式转换,将不同的数据类型,转为相同类型进行比较。例如:
console.log('6' == 6); // 打印结果:true。这里的字符串"6"会先转换为数字6,然后再进行比较
console.log(true == '1'); // 打印结果:true
console.log(0 == -0); // 打印结果:true
console.log(null == 0); // 打印结果:false
(3)undefined 衍生自 null,所以这两个值做相等判断时,会返回 true。
console.log(undefined == null); //打印结果:true。
(4)NaN 不和任何值相等,包括它本身。
console.log(NaN == NaN); //false
console.log(NaN === NaN); //false
问题:那如果我想判断 b 的值是否为 NaN,该怎么办呢?
答案:可以通过 isNaN()函数来判断一个值是否是 NaN。举例:
console.log(isNaN(b));
如上方代码所示,如果 b 为 NaN,则返回 true;否则返回 false。
===
全等符号的强调
全等在比较时,不会做类型转换。如果要保证完全等于(即:不仅要判断取值相等,还要判断数据类型相同),我们就要用三个等号===
。例如:
console.log('6' === 6); //false
console.log(6 === 6); //true
上述内容分析出:
-
==
两个等号,不严谨,"6"和 6 是 true。 -
===
三个等号,严谨,"6"和 6 是 false。
另外还有:==
的反面是!=
,===
的反面是!==
。例如:
console.log(3 != 8); // true
console.log(3 != '3'); // false,因为3=="3"是true,所以反过来就是false。
console.log(3 !== '3'); // true,应为3==="3"是false,所以反过来是true。
不同数据类型之间的大小比较
这一段是比较运算符的延伸,内容繁琐,新手可以不用记,等以后用到的时候再查阅。
数值类型和其他类型比较
先将其他类型隐式转换为数值类型(内部是调用Number()
方法),然后比较大小。代码举例:
//字符串与数字比较
console.log('200' > 100); // true
console.log('a' > 100); // false。 'a' 被转换成 NaN 进行比较
console.log('110a' > 100); // false。 '110a' 被转换成 NaN 进行比较。说明`110a`在做隐式转换的时候,是调用了 Number('110a')方法,而不是调用 parseInt('110a')方法
// 布尔值与数字比较
console.log(true == 1); // true
console.log(false == 0); // true
// null 与数字进行比较
console.log(null < 0); // false
console.log(null == 0); // false
console.log(null > 0); // false
console.log(null <= 0); // true。这是一个很严重的bug
console.log(null >= 0); // true。同上
// undefined 与数字进行比较:结果都是 false
console.log(undefined > 0);
console.log(undefined == 0);
console.log(undefined < 0);
console.log(undefined >= 0);
参考链接:
逗号运算符
逗号运算符一般用于简化代码。逗号运算符的优先级是所有运算符中最低的。
逗号运算符也是一个运算符, 所以也有运算符结果。它的运算符结果是最后一个表达式的结果。
代码举例:
// 利用逗号运算符同时定义多个变量
let a, b;
// 利用逗号运算符同时给多个变量赋值
a = 10, b = 5;
const res1 = (1 + 2, 3 + 4, 5 + 6); // 打印结果:11
运算符的优先级
运算符的优先级如下:(优先级从高到低)
-
.
、[]
、new
-
()
-
++
、--
-
!
、~
、+
(单目)、-
(单目)、typeof
、void
、delete
-
*
、/
、%
-
+
(双目)、-
(双目) -
<<
、>>
、>>>
-
比较运算符:
<
、<=
、>
、>=
-
比较运算符:
==
、!==
、===
、!==
-
&
-
^
-
|
-
逻辑运算符:
&&
(注意:逻辑与&&
比逻辑或||
的优先级更高) -
逻辑运算符:
||
-
?:
-
=
、+=
、-=
、*=
、/=
、%=
、<<=
、>>=
、>>>=
、&=
、^=
、|=
-
,
备注:在实际写代码的时候,如果你不清楚哪个优先级更高,可以先尝试把括号用上。
标签:false,log,运算符,typeof,console,true From: https://www.cnblogs.com/qianfanqf/p/16969901.html