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) 为真 | 尝试 » |
| || | OR | (x === 5 || y === 5) 为假 | 尝试 » |
| ! | NOT | !(x === y) 为真 | 尝试 » |
空值合并运算符 (??)
如果第一个参数不是**空值**（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...) 和 length。
请参见以下示例。
示例
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。此运算符通常用于获取未定义的原始值，使用 "void(0)"（在不使用返回值的情况下计算表达式时很有用）。
示例
<a href="javascript:void(0);">
无用链接
</a>
<a href="javascript:void(document.body.style.backgroundColor='red');">
点击我将正文的背景颜色更改为红色
</a>
亲自尝试 »
