运算符用于赋值、比较值、执行算术运算等。
JavaScript 运算符有不同类型:
算术运算符用于在变量和/或值之间执行算术运算。
鉴于y = 5,下表解释了算术运算符:
Oper | Name | Example | Results | 尝试一下 |
---|---|---|---|---|
+ | Addition | x = y + 2 | y=5, x=7 | 尝试一下 » |
- | Subtraction | x=y-2 | y=5, x=3 | 尝试一下 » |
* | Multiplication | x=y*2 | y=5, x=10 | 尝试一下 » |
** | Exponentiation ES2016 |
x=y**2 | y=5, x=25 | 尝试一下 » |
/ | Division | x = y / 2 | y=5, x=2.5 | 尝试一下 » |
% | Remainder | x = y % 2 | y=5, x=1 | 尝试一下 » |
++ | Pre increment | x = ++y | y=6, x=6 | 尝试一下 » |
++ | Post increment | x = y++ | y=6, x=5 | 尝试一下 » |
-- | Pre decrement | x = --y | y=4, x=4 | 尝试一下 » |
-- | Post decrement | x = y-- | y=4, x=5 | 尝试一下 » |
有关算术运算符的教程,请阅读我们的JavaScript 算术教程。
赋值运算符用于为 JavaScript 变量赋值。
鉴于x = 10和y = 5,下表解释了赋值运算符:
Oper | Example | Same As | Result | 尝试一下 |
---|---|---|---|---|
= | 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 赋值教程。
+ 运算符和 += 运算符也可用于连接(添加)字符串。
鉴于t1 = "Good ",t2 = "Morning",和 t3 = "",下表解释了运算符:
Oper | Example | t1 | t2 | t3 | 尝试一下 |
---|---|---|---|---|---|
+ | t3 = t1 + t2 | "Good " | "Morning" | "Good Morning" | 尝试一下 » |
+= | t1 += t2 | "Good Morning" | "Morning" | 尝试一下 » |
比较运算符在逻辑语句中使用,以确定变量或值之间的相等或差异。
鉴于x = 5,下表解释了比较运算符:
Oper | Name | Comparing | Returns | 尝试一下 |
---|---|---|---|---|
== | equal to | x == 8 | false | 尝试一下 » |
== | equal to | x == 5 | true | 尝试一下 » |
=== | equal value and type | x === "5" | false | 尝试一下 » |
=== | equal value and type | x === 5 | true | 尝试一下 » |
!= | not equal | x != 8 | true | 尝试一下 » |
!== | not equal value or type | x !== "5" | true | 尝试一下 » |
!== | not equal value or type | x !== 5 | false | 尝试一下 » |
> | greater than | x > 8 | false | 尝试一下 » |
< | less than | x < 8 | true | 尝试一下 » |
>= | greater or equal to | x >= 8 | false | 尝试一下 » |
<= | less or equal to | x <= 8 | true | 尝试一下 » |
有关比较运算符的教程,请阅读我们的JavaScript 比较教程。
条件运算符根据条件为变量赋值。
Syntax | Example | 尝试一下 |
---|---|---|
(condition) ? x : y | (z < 18) ? x : y | 尝试一下 » |
逻辑运算符用于确定变量或值之间的逻辑。
鉴于x = 6 且 y = 3,下表解释了逻辑运算符:
Oper | Name | Example | 尝试一下 |
---|---|---|---|
&& | AND | (x < 10 && y > 1) is true | 尝试一下 » |
|| | OR | (x === 5 || y === 5) is false | 尝试一下 » |
! | NOT | !(x === y) is true | 尝试一下 » |
这个??
如果不是,则运算符返回第一个参数无效的(null
或者undefined
)。
否则它返回第二个参数。
自 2020 年 3 月起,所有浏览器都支持 nullish 运算符:
Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |
这个?.
运算符返回undefined
如果一个物体是undefined
或者null
(而不是抛出错误)。
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Ask for car name:
document.getElementById("demo").innerHTML = car?.name;
亲自试一试 »
自 2020 年 3 月起,所有浏览器都支持可选链运算符:
Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |
位运算符适用于 32 位数字。运算中的任何数字操作数都会转换为 32 位数字。结果被转换回 JavaScript 数字。
Oper | Name | Example | Same as | Result | Decimal | 尝试一下 |
---|---|---|---|---|---|---|
& | AND | x = 5 & 1 | 0101 & 0001 | 0001 | 1 | 尝试一下 » |
| | OR | x = 5 | 1 | 0101 | 0001 | 0101 | 5 | 尝试一下 » |
~ | NOT | x = ~ 5 | ~0101 | 1010 | 10 | 尝试一下 » |
^ | XOR | x = 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 | 尝试一下 » |
<< | Left shift | x = 5 << 1 | 0101 << 1 | 1010 | 10 | 尝试一下 » |
>> | Right shift | x = 5 >> 1 | 0101 >> 1 | 0010 | 2 | 尝试一下 » |
>>> | Unsigned right | x = 5 >>> 1 | 0101 >>> 1 | 0010 | 2 | 尝试一下 » |
上表使用 4 位无符号数。由于 JavaScript 使用 32 位有符号数字,因此 ~ 5 不会返回 10。它将返回 -6。
〜00000000000000000000000000000101(〜5)
将返回
11111111111111111111111111111010 (-6)
这个类型运算符返回变量、对象、函数或表达式的类型:
请注意:
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
亲自试一试 »
你不能使用类型定义 JavaScript 对象是数组还是日期。
数组和日期都返回对象作为类型。
这个删除运算符从对象中删除属性:
const person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
delete person.age;
亲自试一试 »
删除运算符会删除属性的值和属性本身。
删除后,该属性在重新添加回来之前无法使用。
删除运算符设计用于对象属性。它对变量或函数没有影响。
不应在任何预定义 JavaScript 对象(数组、布尔值、日期、函数、数学、数字、正则表达式和字符串)的属性上使用删除运算符。
这可能会使您的应用程序崩溃。
... 运算符将可迭代扩展为更多元素:
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];
亲自试一试 »
... 运算符可用于将可迭代扩展为函数调用的更多参数:
这个在如果属性在对象中,则运算符返回 true,否则返回 false:
const person = {firstName:"John", lastName:"Doe", age:50};
("firstName" in person);
("age" in person);
亲自试一试 »
你不能使用在检查数组内容,例如("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);
亲自试一试 »
这个实例化如果对象是指定对象的实例,则运算符返回 true:
const cars = ["Saab", "Volvo", "BMW"];
(cars instanceof Array) // Returns true
(cars instanceof Object) // Returns true
(cars instanceof String) // Returns false
(cars instanceof Number) // Returns false
亲自试一试 »
这个空白运算符计算表达式并返回不明确的。此运算符通常用于获取未定义的原始值,使用"void(0)"(在不使用返回值计算表达式时很有用)。
<a href="javascript:void(0);">
Useless link
</a>
<a href="javascript:void(document.body.style.backgroundColor='red');">
Click me to change the background color of body to red
</a>
亲自试一试 »
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!