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>
自己動手試一試 »
