HTML
CSS
Javascript
VUE
tailwind
kooboo

我们在前面讲过变量，本文讲一下运算符和表达式。

运算符的定义和分类

运算符的定义

运算符：也叫操作符，是一种符号。通过运算符可以对一个或多个值进行运算，并获取运算结果。

表达式：数字、运算符、变量的组合（组成的式子）。

表达式最终都会有一个运算结果，我们将这个结果称为表达式的返回值。

比如：+、*、/、() 都是运算符，而（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》有详细介绍。

隐式类型转换——运算符：加号 +

  1. 字符串 + XX = 字符串

任何值和字符串做加法运算，都会先调用 String() 函数转换为字符串，然后再做拼串操作。最终的运算结果是字符串。

比如：

result1 = 1 + 2 + '3'; // 字符串：33

result2 = '1' + 2 + 3; // 字符串：123
  1. Boolean + 数字 = 数字

Boolean 型和数字型相加时， true 按 1 来算 ，false 按 0 来算。这里其实是先调 Number() 函数，将 Boolean 类型转为 Number 类型，然后再和 数字相加。

  1. null + 数字 = 数字

等价于：0 + 数字

  1. undefined + 数字 = NaN

计算结果：NaN

  1. 任何值和 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。

instanceof

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);

你可能注意到了null == 0 是 false，而 Number(null) == 0 是 true，这不就和上面的 内部调用 Number() 方法再比较大小 的说法相矛盾了吗？

其实，这是因为null、undefined 的相等性检测（==）与普通比较符（<、<=、>、>=）遵循的不是同一套规则，从而导致的 bug。

对于普通比较符，首先 null 会被 Number() 方法转换成 0，所以 null <= 0、null >= 0才都是 true；

而对于相等性检测（==），null、undefined 不会调用 Number() 方法，不会发生类型转换，除了 null == undefined 以外，它们和任何类型都不能 == ，所以 null == 0 是 false。

日期大小比较

如果日期的格式为字符串，则比较字符串的Unicode 编码。代码举例：

const myDate1 = new Date(2022, 8, 8);
const myDate2 = new Date(2022, 8, 9);
const myDate3 = new Date(2022, 9, 8);
const myDate4 = new Date(2023, 8, 8);
console.log(myDate1 < myDate2); // true
console.log(myDate1 < myDate3); // true
console.log(myDate3 < myDate4); // true

const date1 = '2022-08-08'; // "2022/08/08"同理
const date2 = '2022-08-09'; // "2022/08/09"同理
const date3 = '2022-09-08'; // "2022/09/08"同理
const date4 = '2023-08-08'; // "2023/08/08"同理
console.log(date1 < date2); // true
console.log(date1 < date3); // true
console.log(date3 < date4); // true

const time1 = '2022-08-08 08:00:00';
const time2 = '2022-08-08 08:00:01';
const time3 = '2022-08-08 08:01:00';
const time4 = '2022-08-08 09:00:00';
console.log(time1 < time2); // true
console.log(time1 < time3); // true
console.log(time1 < time4); // true

// 数据类型不同，此处是先将 myDate1 转为字符串类型，然后比较大小。可想而知，结果都是 false
console.log(myDate1 >= date1); // false
console.log(myDate1 <= date1); // false

// 虽然时间格式不同，但都是字符串，所以可以比较大小
console.log(date1 < time1); // true

参考链接：

逗号运算符

逗号运算符一般用于简化代码。逗号运算符的优先级是所有运算符中最低的。

逗号运算符也是一个运算符, 所以也有运算符结果。它的运算符结果是最后一个表达式的结果。

代码举例：

// 利用逗号运算符同时定义多个变量
let a, b;
// 利用逗号运算符同时给多个变量赋值
a = 10, b = 5;

const res1 = (1 + 2, 3 + 4, 5 + 6); // 打印结果：11

运算符的优先级

运算符的优先级如下：（优先级从高到低）

  • .、[]、new
  • ()
  • ++、--
  • !、~、+（单目）、-（单目）、typeof、void、delete
  • *、/、%
  • +（双目）、-（双目）
  • <<、>>、>>>
  • 比较运算符：<、<=、>、>=
  • 比较运算符：==、!==、===、!==
  • &
  • ^
  • |
  • 逻辑运算符：&& （注意：逻辑与 && 比逻辑或 || 的优先级更高）
  • 逻辑运算符：||
  • ?:
  • =、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=
  • ,

备注：在实际写代码的时候，如果你不清楚哪个优先级更高，可以先尝试把括号用上。

Unicode 编码

这一段中，我们来讲引申的内容：Unicode 编码的使用。

各位同学可以先在网上查一下“Unicode 编码表”。

1、在字符串中可以使用转义字符输入 Unicode 编码。格式如下：

\u四位编码

举例如下：

console.log('\u2600'); // 这里的 2600 采用的是16进制
console.log('\u2602'); // 这里的 2602 采用的是16进制。

打印结果：

2、我们还可以在 HTML 网页中使用 Unicode 编码。格式如下：

&#四位编码;

PS：我们知道，Unicode 编码采用的是 16 进制，但是，这里的编码需要使用 10 进制。

举例如下：

<h1 style="font-size: 100px;">⚄</h1>

打印结果：