目录

JavaScript 运算符 参考

JavaScript 运算符

运算符用于赋值、比较值、执行算术运算等。

JavaScript 运算符有不同类型:

  • 算术运算符
  • 赋值运算符
  • 比较运算符
  • 逻辑运算符
  • 条件运算符
  • 类型运算符

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 赋值运算符

赋值运算符用于为 JavaScript 变量赋值。

鉴于x = 10y = 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 赋值教程



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)。

否则它返回第二个参数。

示例

let name = null;
let text = "missing";
let result = name ?? text;
亲自试一试 »

自 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

JavaScript 位运算符

位运算符适用于 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"   // Returns string
typeof 3.14     // Returns number
亲自试一试 »

请注意:

  • NaN 的数据类型是数字
  • 数组的数据类型是对象
  • 日期的数据类型是对象
  • null的数据类型是object
  • 未定义变量的数据类型未定义

示例

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];
亲自试一试 »

... 运算符可用于将可迭代扩展为函数调用的更多参数:

示例

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);
亲自试一试 »

in 运算符

这个如果属性在对象中,则运算符返回 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);
亲自试一试 »

预定义对象

("PI" in Math);
("NaN" in Number);
("length" in String);
亲自试一试 »

运算符的实例

这个实例化如果对象是指定对象的实例,则运算符返回 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>
亲自试一试 »

也可以看看:

JavaScript 运算符优先级