JavaScript 运算符参考
JavaScript 运算符
运算符用于赋值、比较值、执行算术运算等等。
JavaScript 运算符有不同的类型
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 条件运算符
- 类型运算符
JavaScript 算术运算符
算术运算符用于变量和/或值之间的算术运算。
给定 y = 5，下表解释了算术运算符
| 运算符 | 名称 | 示例 | 结果 | 试一试 |
|---|---|---|---|---|
| + | 加法 | x = y + 2 | y=5, x=7 | 试一试 » |
| - | 减法 | x=y-2 | y=5, x=3 | 试一试 » |
| * | 乘法 | x=y*2 | y=5, x=10 | 试一试 » |
| ** | 幂运算 ES2016 |
x=y**2 | y=5, x=25 | 试一试 » |
| / | 除法 | x = y / 2 | y=5, x=2.5 | 试一试 » |
| % | 取余 | x = y % 2 | y=5, x=1 | 试一试 » |
| ++ | 前增量 | x = ++y | y=6, x=6 | 试一试 » |
| ++ | 后增量 | x = y++ | y=6, x=5 | 试一试 » |
| -- | 前减量 | x = --y | y=4, x=4 | 试一试 » |
| -- | 后减量 | x = y-- | y=4, x=5 | 试一试 » |
有关算术运算符的教程，请阅读我们的JavaScript 算术教程。
JavaScript 赋值运算符
赋值运算符用于为 JavaScript 变量赋值。
给定 x = 10 和 y = 5，下表解释了赋值运算符
| 运算符 | 示例 | 等同于 | 结果 | 试一试 |
|---|---|---|---|---|
| = | x = y | x = y | x = 5 | 试一试 » |
| += | x += y | x = x + y | x = 15 | 试一试 » |
| -= | x -= y | x = x - y | x = 5 | 试一试 » |
| *= | x *= y | x = x * y | x = 50 | 试一试 » |
| /= | x /= y | x = x / y | x = 2 | 试一试 » |
| %= | x %= y | x = x % y | x = 0 | 试一试 » |
| : | x: 45 | size.x = 45 | x = 45 | 试一试 » |
有关赋值运算符的教程，请阅读我们的JavaScript 赋值教程。
JavaScript 字符串运算符
+ 运算符和 += 运算符也可用于连接（添加）字符串。
给定 t1 = "Good "、t2 = "Morning" 和 t3 = ""，下表解释了运算符
| 运算符 | 示例 | t1 | t2 | t3 | 试一试 |
|---|---|---|---|---|---|
| + | t3 = t1 + t2 | "Good " | "Morning" | "Good Morning" | 试一试 » |
| += | t1 += t2 | "Good Morning" | "Morning" | 试一试 » |
比较运算符
比较运算符用于逻辑语句，以确定变量或值之间的相等性或差异。
给定 x = 5，下表解释了比较运算符
| 运算符 | 名称 | 比较 | 返回 | 试一试 |
|---|---|---|---|---|
| == | 等于 | x == 8 | false | 试一试 » |
| == | 等于 | x == 5 | true | 试一试 » |
| === | 值和类型都相等 | x === "5" | false | 试一试 » |
| === | 值和类型都相等 | x === 5 | true | 试一试 » |
| != | 不等于 | x != 8 | true | 试一试 » |
| !== | 值或类型不相等 | x !== "5" | true | 试一试 » |
| !== | 值或类型不相等 | x !== 5 | false | 试一试 » |
| > | 大于 | x > 8 | false | 试一试 » |
| < | 小于 | x < 8 | true | 试一试 » |
| >= | 大于或等于 | x >= 8 | false | 试一试 » |
| <= | 小于或等于 | x <= 8 | true | 试一试 » |
有关比较运算符的教程，请阅读我们的JavaScript 比较教程。
条件（三元）运算符
条件运算符根据条件为变量赋值。
| 语法 | 示例 | 试一试 |
|---|---|---|
| (condition) ? x : y | (z < 18) ? x : y | 试一试 » |
逻辑运算符
逻辑运算符用于确定变量或值之间的逻辑关系。
给定 x = 6 和 y = 3，下表解释了逻辑运算符
| 运算符 | 名称 | 示例 | 试一试 |
|---|---|---|---|
| && | AND（与） | (x < 10 && y > 1) 为 true | 试一试 » |
| || | OR（或） | (x === 5 || y === 5) 为 false | 试一试 » |
| ! | NOT（非） | !(x === y) 为 true | 试一试 » |
空值合并运算符 (??)
?? 运算符如果第一个参数不是空值（null 或 undefined），则返回第一个参数。
否则，它返回第二个参数。
自 2020 年 3 月起，所有浏览器都支持空值合并运算符
| Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
| 2020 年 2 月 | 2020 年 2 月 | 2020 年 1 月 | 2020 年 3 月 | 2020 年 3 月 |
可选链运算符 (?.)
?. 运算符如果对象是 undefined 或 null，则返回 undefined（而不是抛出错误）。
示例
// 创建一个对象
const car = {type:"Fiat", model:"500", color:"white"};
// 请求汽车名称
document.getElementById("demo").innerHTML = car?.name;
自己动手试一试 »
自 2020 年 3 月起，所有浏览器都支持可选链运算符
| Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
| 2020 年 2 月 | 2020 年 2 月 | 2020 年 1 月 | 2020 年 3 月 | 2020 年 3 月 |
JavaScript 位运算符
位运算符作用于 32 位数字。操作中的任何数字操作数都将转换为 32 位数字。结果将转换回 JavaScript 数字。
| 运算符 | 名称 | 示例 | 等同于 | 结果 | 十进制 | 试一试 |
|---|---|---|---|---|---|---|
| & | AND（与） | x = 5 & 1 | 0101 & 0001 | 0001 | 1 | 试一试 » |
| | | OR（或） | x = 5 | 1 | 0101 | 0001 | 0101 | 5 | 试一试 » |
| ~ | NOT（非） | x = ~ 5 | ~0101 | 1010 | 10 | 试一试 » |
| ^ | 异或 | x = 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 | 试一试 » |
| << | 左移 | x = 5 << 1 | 0101 << 1 | 1010 | 10 | 试一试 » |
| >> | 右移 | x = 5 >> 1 | 0101 >> 1 | 0010 | 2 | 试一试 » |
| >>> | 无符号右移 | x = 5 >>> 1 | 0101 >>> 1 | 0010 | 2 | 试一试 » |
注意
上表使用 4 位无符号数字。由于 JavaScript 使用 32 位有符号数字，~ 5 不会返回 10。它将返回 -6。
~00000000000000000000000000000101 (~5)
将返回
11111111111111111111111111111010 (-6)
typeof 运算符
typeof 运算符返回变量、对象、函数或表达式的类型
请注意
- NaN 的数据类型是 number
- 数组的数据类型是 object
- 日期的数据类型是 object
- null 的数据类型是 object
- 未定义变量的数据类型是 undefined
示例
typeof "John"
typeof 3.14
typeof NaN
typeof false
typeof [1, 2, 3, 4]
typeof {name:'John', age:34}
typeof new Date()
typeof function () {}
typeof myCar
typeof null
自己动手试一试 »
注意
您不能使用 typeof 来确定 JavaScript 对象是数组还是日期。
数组和日期都返回 object 类型。
delete 运算符
delete 运算符从对象中删除属性
示例
const person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
delete person.age;
自己动手试一试 »
delete 运算符会删除属性的值和属性本身。
删除后，在重新添加属性之前无法使用该属性。
delete 运算符设计用于对象属性。它对变量或函数没有影响。
注意
delete 运算符不应在任何预定义的 JavaScript 对象（Array、Boolean、Date、Function、Math、Number、RegExp 和 String）的属性上使用。
这可能会使您的应用程序崩溃。
扩展运算符 (...)
... 运算符将可迭代对象扩展为更多元素
示例
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
自己动手试一试 »
... 运算符可用于将可迭代对象扩展为函数调用的更多参数
in 运算符
in 运算符如果属性存在于对象中，则返回 true，否则返回 false
对象示例
const person = {firstName:"John", lastName:"Doe", age:50};
("firstName" in person);
("age" in person);
自己动手试一试 »
注意
您不能使用 in 来检查数组内容，例如 ("Volvo" in cars)。
数组属性只能是索引 (0,1,2,3...) 和长度。
请参阅下面的示例。
示例
const cars = ["Saab", "Volvo", "BMW"];
("Saab" in cars);
自己动手试一试 »
const cars = ["Saab", "Volvo", "BMW"];
(0 in cars);
(1 in cars);
(4 in cars);
("length" in cars);
自己动手试一试 »
instanceof 运算符
instanceof 运算符如果对象是指定对象的实例，则返回 true
示例
const cars = ["Saab", "Volvo", "BMW"];
(cars instanceof Array) // 返回 true
(cars instanceof Object) // 返回 true
(cars instanceof String) // 返回 false
(cars instanceof Number) // 返回 false
自己动手试一试 »
void 运算符
void 运算符评估表达式并返回 undefined。此运算符通常用于获取 undefined 原始值，使用 "void(0)"（在不使用返回值的情况下评估表达式时很有用）。
示例
<a href="javascript:void(0);">
无用链接
</a>
<a href="javascript:void(document.body.style.backgroundColor='red');">
点击我将 body 的背景颜色更改为红色
</a>
自己动手试一试 »
