Featured image of post (四)JavaScript运算符

(四)JavaScript运算符

(四)JS 运算符

运算符( operator )也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。 JavaScript常用的运算符有:

  • 算术运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

1. 算数运算符

  • +
  • -
  • *
  • /
  • %

1.1 浮点数的精度问题

浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。

1
2
var result =0.1+0.2; //结果不是0.3,而是: 0.30000000000000004 
console.log(0.07 * 100); //结果不是7, 而是: 7.000000000000001

注意:

  1. JS 中不要直接用浮点数之间进行运算,会产生精度误差。
  2. 不要直接拿两个浮点数进行比较!

1.2 表达式和返回值

表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合 简单理解:是由数字、运算符、变量等组成的式子

==表达式最终都会有一个结果,返回给我们,我们成为返回值==

2. 递增递减运算符

2.1 递增和递减运算符概述

如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(– )运算符来完成。 在JavaScript 中,递增(++)和递减(– )既可以放在变量前面,也可以放在变量后面。放在变量前面时,

我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。

注意:递增和递减运算符必须和变量配合使用。

  • 后置递增运算符 i++
  • 前置递增运算符 ++i
  • 后置递减运算符 i--
  • 前置递减运算符 --i

2.2 前置递增和后置递增小结

  • 前置递增和后置递增运算符可以简化代码的编写,让变量的值+ 1 比以前写法更简单
  • 单独使用时,运行结果相同
  • 与其他代码联用时,执行结果会不同
  • 后置:先原值运算,后自加(先人后己)
  • 前置:先自加,后运算(先已后人)
  • 开发时,大多使用后置递增/减,并且代码独占一行,例如:num++; 或者num–;

3. 比较运算符

3.1 概述

概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值 (true / false)作为比较运算的结果。

比较运算符 说明
< 小于
> 大于
<= 大于或等于
>= 小于或等于
== 判等于
!= 判不等
=== 全等于。要求值和数据类型均一致,则返回 true
!== 全不等于。要求值和数据类型至少一个不一致,则返回 true

3.2 关于 == 与 ===

3.2.1. 区别

需要注意的是 ===== 的区别。

  • == 比较的时候只判断值,因为会进行隐式转换。值相等则返回 true
  • === 比较判断的时同时需要值相等和类型相同,两者均满足则返回 true

3.2.2 规律

结合以下例子体会。

  • ''0false 之间(或 '1'1true之间)进行 == 比较的结果为 true
  • NaN 与其他任何数据类型之间 == 比较结果为 false
  • null 只有在和自身以及 undefined 之间 == 比较时结果为 true
  • undefined 只有在和自身以及 null 之间 == 比较时结果为 true
  • 数字和数字字符串的值相等,则 == 比较的结果为 true
  • 以上这些例子在全等比较 === 下的结果均为 false
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
console.log('18' == 18); // true
console.log('' == false); // truw
console.log('' == 0); // truw
console.log(0 == false); // true
console.log('1' == 1 == true); // true

console.log('NaN与其他值比较:');
console.log(NaN == 0); // false
console.log(NaN == ''); // false
console.log(NaN == NaN); // false
console.log(NaN == null); // false
console.log(NaN == false); // false
console.log(NaN == undefined); // false

console.log('null与其他值:');
console.log(null == null); // true
console.log(null == undefined); // true
console.log(null == 0); // false
console.log(null == ''); // false
console.log(null == NaN); // false
console.log(null == false); // false

console.log('undefined与其他值比较:');
console.log(undefined == null);  // true
console.log(undefined == undefined);  // true
console.log(undefined == 0);  // false
console.log(undefined == '');  // false
console.log(undefined == NaN);  // false
console.log(undefined == false);  // false

4. 逻辑运算符

4.1 概述

  • 逻辑与 &&
  • 逻辑或 ||
  • 逻辑非 !

4.2 逻辑中断(短路操作)

原理:多个表达式进行逻辑运算,当左边的表达式值可以确定最终结果时,不再继续运算右边其余的表达式。

4.2.1 逻辑与 &&

  • 语法:expr1 && expr2 && ...
  • expr1 为真,则返回 expr2
  • expr1 为假,则返回 expr1
1
2
3
4
console.log(123 && 456); // 456
console.log(false && 123); // false
console.log(1 && 2 && 3); // 3
console.log(1 && 1 && false && 2); // false

4.2.2 逻辑或 ||

  • 语法:expr1 || expr2 || ...
  • expr1 为假,则返回 expr2
  • expr1 为真,则返回 expr1
1
2
3
console.log(0 || 12); // 12
console.log(true ||  false || 2); // true
console.log(0 || false || true || -2); // true

5. 赋值运算符

  • +=
  • -=
  • *=
  • /=

6. 拓展:JS特殊运算符

6.1 数字转化:单目运算符 +

单目运算符 + 作用于数字无效,结果不变。但是可以用来转化非数字类型为数字,等效于 Number()

1
2
3
4
5
6
let x = false;
let y = "";
let z = "123.4";
console.log(+x); // 0
console.log(+y); // 0
console.log(+z); // 123.4

用于非数字型之间的数学运算,很简洁:

1
2
3
let a = "12";
let b = "24";
console.log(+a + +b); // 36

6.2 逗号运算符 ,

逗号运算符能让我们处理多个语句,使用 , 将它们分开。每个语句都运行了,但是只有最后的语句的结果会被返回

1
2
let a = (3 + 4, 5 + 6);
console.log(a); // 11

6.3 布尔值转换符 !!

两个相邻的非逻辑运算符组成的 !!,可以将一个值转换为对应的布尔值。等效于 Boolean()

1
2
3
4
console.log(!!"0"); // true
console.log(!!0); // false
console.log(!!undefined); //false
console.log(!!"aaa"); // true

6.4 空值合并运算符 ??

我们将值既不是 null 也不是 undefined 的表达式定义为已定义的值(defined)。即:??

a ?? b 结果为:

  • a 已定义,则结果为 a
  • a 不是已定义的,则结果为 b

等价于:

1
(a !== null && a !== undefined) ? a : b;
Powered by GitHub.Pages
Built with Hugo
主题 StackJimmy 设计
© Licensed Under CC BY-NC-SA 4.0