TypeScript 运算符

1. 运算符概述

运算符也称为操作符，用来实现赋值（=）、算术运算、比较等功能的符号。

常用的运算符：

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

2. 算术运算符

2.1 概述

算术运算符包含：加（+）、减（-）、乘（*）、除（/）。

算术运算符：进行算术运算时使用的符号，用于两个数值之间的计算。

// 加
console.log(1 + 2) // 3
// 减
console.log(2 - 1) // 1
// 乘
console.log(2 * 3) // 6
// 除
console.log(4 / 2) // 2

2.2 加号的其他作用
 

• 注意：+ 号，不仅可以用于加法计算，还能实现字符串拼接。

// 字符串拼接（拼串）
console.log('周杰' + '伦') // 结果为：'周杰伦'

思考以下代码的结果：

console.log(1 + 2) // 结果为：3
console.log(1 + '2') // 结果为：'12'
console.log('1' + 2) // 结果为：'12'

规律：加号两边 只要有一边是字符串 ，就执行字符串拼接。
 

2.3 加号引发的思考
 

思考：加号可以跟字符串一起使用，那其他算术运算符（- * /）可以吗？
 

console.log(2 - '1') // 报错：算术运算符的右侧必须是数字类型。

其他方式：将字符串类型 转换 为数字类型。
 

console.log(2 - +'1')
// +'1' 表示将 '1'（string） => 1（number）
// 所以，2 - +'1' ==> 2 - 1 ==> 结果为：1

记住：在字符串前面添加 + 号，可以 将 string 转化为 number （字符串内容为数字时才有意义）。

3. 赋值运算符

赋值运算符：将等号右边的值赋值给它左边的变量，比如：等号（=）。

// 等号：将 18 赋值给左侧的变量 age
let age: number = 18

需求：明年老师 19 岁，让变量 age 变成 19 。

老师 19 岁，让变量 age 变成 19 。
 

age = age + 1

顺序： 1 先执行等号右边的代码 2 将计算结果赋值给等号左边的变量。

 

除了等号（ = ）之外，还包括：加等（ += ）、减等（ -= ）、乘等（ *= ）、除等（ /= ）。

age += 1

说明：其他几个（减等、乘等、除等）同理。

4. 自增和自减运算符

自增（ ++ ）运算符是 += 1 的简化形式；自减（ -- ）运算符是 -= 1 的简化形式。

比如：让 age 的值变为 19 ，该如何处理？

let age: number = 18

age += 1 // 加等

解释： age ++ 会让变量 age 的值加 1 。

作用 ： 自增（ ++）运算符用来实现变量的 值加 1； 自减（ --）运算符实现变量的 值减 1。

注意： ++ 或 -- ，只能让变量的值增加或减少 1 。

 

5. 比较运算符

比如：考完试，拿到成绩后，比较分数。

你的 100 分 大于 同桌的 99 分

比较运算符：用于 比较两个数据的值 ，并返回其比较的结果，结果为 布尔类型 。
 

比较运算符包含 6 个：

•  大于（>）
•  大于等于（>=）
•  小于（<）
•  小于等于（<=）
•  等于（===）
•  不等于（!==）

给出以下示例的结果：

// 大于
console.log(1 > 2)    // 结果为：false
// 大于等于
console.log(3 >= 2)   // 结果为：true
// 小于
console.log(1 < 2)    // 结果为：true
// 小于等于
console.log(3 <= 2)    // 结果为：false
// 相等
console.log(3 === 4)    // 结果为：false
// 不相等
console.log(3 !== 4)    // 结果为：true

问题1：比较运算符有什么用？ 比较两个数据的值

问题2：比较结果是什么类型？ 布尔类型

注意：比较运算符常用于数字类型的比较。
 

6. 逻辑运算符

生活中，我们常用：并且、或者、不是 这样的词语，来描述一些事情。

• 情况一：有钱 并且 漂亮（两个条件同时满足 ）。
• 情况二：有钱 或者 漂亮（只要某一个条件满足 ）。
• 情况三：不是 男的（ 取反 ）。

与逻辑运算符一一对应：与（并且）、或（或者）、非（不是）。

逻辑运算符通常用于布尔类型的计算，并且结果也是布尔类型。

•  与（逻辑与），用 && 符号来表示。当 && 两边的值同时为true，结果才为true；否则，为false。

true && false // 结果为：false

示例：
 

// 与
console.log(2 > 1 && 2 >= 2)     // 结果为：true

• 或（逻辑或），用 || 符号来表示。当 || 两边的值只要有一个为true，结果就为true；否则，为false。

true || false // 结果为：true

示例：
 

// 或
console.log(3 < 2 || 1 <= 2)    // 结果为：true

•  非（逻辑非），符号为 !（叹号），表示取反，即：truefalse 而 falsetrue。

!true // 结果为：false

示例：

 

// 非
console.log(!false || false)    // 结果为：true

总结：

•  两个条件同时满足时，再执行操作，用什么？         逻辑与 &&
•  只要有一个条件满足时，就执行操作，用什么？     逻辑或 ||
•  逻辑非，表示什么作用？                                             取反 !

 往期文章发布内容：

•  TypeScript 初体验
•  TypeScript变量
•  TypeScript 数据类型

---

黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~