JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
数学中的加减乘除运算符是我们最熟悉的,它们在 JavaScript 中起的作用是一样的,它能计算公式并返回结果。
2 + 3 // 加
5 - 2 // 减
2 * 4 // 乘,乘号是一个星号
4 / 2 // 除,除号是一个斜杠
除了加减乘除,JavaScript 中还有很多运算符值得我们去学习。
术语
运算元
运算元表示运算符作用的对象。如果一个运算符只有一个运算元,那么它被称为一元运算符,比如负号操作符 -
和类型检测运算符 typeof
。
$$edit$$
$$jsdemo$$
let x = -5
let result = -x // 取反
alert(result) // 5
alert(typeof result) // number,typeof 是类型检测运算符
如果一个运算符接收两个运算元,那么它被称为二元运算符,大部分运算符都是二元运算符。
数学运算符
有以下常见的数学运算符。
运算符 | 描述 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
/ | 除法 |
% | 求余(有时候也叫取模) |
** | 求幂 |
加法
加法运算符可以用于数字类型的求和。
$$edit$$
$$jsdemo$$
let sum = 3 + 5
alert(sum)
在面对字符串类型时,加法运算符起的是拼接字符串的作用,并且只要任意一边运算元为字符串,另一边运算元也会自动转成字符串类型。
$$edit$$
$$jsdemo$$
let str = '三眼鸭'
alert(str + '的编程教室')
alert(str + 123456)
减法、乘法、除法就不再赘述了。
求余
求余指用一个数除以另一个数,不够除的部分就是余数,在 JavaScript 中 %
表示。
$$edit$$
$$jsdemo$$
alert(5 % 2) // 1
alert(8 % 5) // 3
求幂
b 的 n 次幂表示 n 个 b 相乘 ( b * b * ... * b),在数学上写作 b<sup>n</sup>,而在 JavaScript 中则用 b ** n 表示 。
$$edit$$
$$jsdemo$$
// 等同于 2 * 2 * 2
alert(2 ** 3) // 8
// 等同于 3 * 3
alert(3 ** 2) // 9
当然,幂运算的指数也可以是小数(分数),相当于 b 的 m 次方再开 n 次方根。
$$edit$$
$$jsdemo$$
alert(4 ** 0.5) // 2,等同于平方根
alert(8 ** (1 / 3)) // 2,等同于立方根
当然,指数还能是 0,除 0 外所有数的零次方都是 1。
$$edit$$
$$jsdemo$$
alert(3 ** 0) // 1
alert(4 ** 0) // 1
当然,指数还能是负数。
$$edit$$
$$jsdemo$$
alert(2 ** -2) // 0.25,等同于 1 / (2 ** 2)
$$tip
更多相关知识点请咨询你的数学老师,或参考幂 - wikipedia。
$$
赋值运算符
赋值运算符用过很多次了,它会将右操作元的值分配给左操作元的变量。
$$edit$$
$$jsdemo$$
let x = 3
let y = x
alert(y)
左操作元必须是一个变量,不然会报错。
1 = 3 // Uncaught SyntaxError: Invalid left-hand side in assignment
链式赋值
在 JavaScript 中所有的运算符都会返回一个值,赋值运算符也不例外。
$$edit$$
$$jsdemo$$
let x
alert(x = 3)
运用这个特性,我们可以一次性给多个变量赋相同的值。
$$edit$$
$$jsdemo$$
let x, y, z
x = y = z = 123
alert(x) // 123
alert(y) // 123
alert(z) // 123
更多的赋值运算符
除了直接的赋值运算符还有以下的赋值运算符。
运算符 | 名称 | 作用 |
---|---|---|
+= | 加法赋值 | 左边的变量加上右边的数值并赋值 |
-= | 减法赋值 | 左边的变量减去右边的数值并赋值 |
*= | 乘法赋值 | 左边的变量乘以右边的数值并赋值 |
/= | 除法赋值 | 左边的变量除以右边的数值并赋值 |
let x = 4
x += 2
alert(x) // 6
x -= 3
alert(x) // 3
x *= 4
alert(x) // 12
x /= 3
alert(x) // 4
自增和自减
自增自减运算符可以方便地对变量进行加 1 减 1 操作。
++
(自增运算符)将变量加 1:
$$edit$$
$$jsdemo$$
let counter = 2
// 等同于 counter = counter + 1
counter++
alert(counter) // 3
--
(自减运算符) 将变量减 1:
$$edit$$
$$jsdemo$$
let counter = 2
// 等同于 counter = counter - 1
counter--
alert(counter) // 1
++
和 --
可以置于变量前或变量后。
- 当运算符置于变量后,被称为“后置形式”:
counter++
。 - 当运算符置于变量前,被称为“前置形式”:
++counter
。
不管是放置在前后,它们在对 counter
的操作上结果是一样,但是返回的结果却有不同。
放置之后:
$$edit$$
$$jsdemo$$
let counter = 1
alert(counter++) // 1,返回 counter 运算之前的值
放置之前:
$$edit$$
$$jsdemo$$
let counter = 1
alert(++counter) // 2,返回 counter 运算之后的值
练习
- 今年第一天是周五,第九十天是周几? $$answer
$$jsdemo$$
$$edit$$
// 周五减1号
let offset = 4
let ninetyDay = 90 + offset
ninetyDay = ninetyDay % 7
alert(`第九十天是周 ${ninetyDay}`)
$$
- 以下代码的输出结果是什么?
let x = 2
let result = 2 * x++ + ++x
alert(result)
$$answer
$$jsdemo$$
$$edit$$
let x = 2
let result = 2 * x++ + ++x
alert(result)
$$
- 今年第一天是周五,第 n 天是周几,n 由用户输入。(会出现周 0 的情况,先把周 0 默认为周日不作处理)
$$tip
可以使用 Number(n)
将用户输入的字符串转成数字类型。
$$
$$demo <button onclick="calc()">日期计算</button>
<script> function calc() { // 周五减1号 let offset = 4
// 第 N 天
let nDay = prompt("请输入第几天")
// 先转成数字类型
nDay = Number(nDay)
nDay = nDay + offset
// 对每周七天求余
nDay = nDay % 7
alert(`那天是周 ${nDay}`)
}
</script>
$$
$$answer
$$jsdemo$$
$$edit$$
// 周五减1号
let offset = 4
// 第 N 天
let nDay = prompt("请输入第几天")
// 先转成数字类型
nDay = Number(nDay)
nDay = nDay + offset
// 对每周七天求余
nDay = nDay % 7
alert(`那天是周 ${nDay}`)
$$