在 JavaScript 中，運(yùn)算符根據(jù)其操作數(shù)（即參與運(yùn)算的變量或值）的數(shù)量可以分為單目運(yùn)算符、雙目運(yùn)算符和多目運(yùn)算符。這些名稱的由來(lái)與運(yùn)算符所需操作數(shù)的個(gè)數(shù)相關(guān)。

一、單目運(yùn)算符（Unary Operator）

‌定義‌：?jiǎn)文窟\(yùn)算符是指只需要一個(gè)操作數(shù)的運(yùn)算符。這類運(yùn)算符通常作用于一個(gè)變量或值。

‌命名由來(lái)‌："單目"中的"目"指的是操作數(shù)，"單"表示只有一個(gè)操作數(shù)。例如：

• ‌一元加法‌：+x，將變量 x 轉(zhuǎn)換為數(shù)字。
• ‌一元減法‌：-x，將變量 x 取反。
• ‌遞增運(yùn)算符‌：++x 或 x++，將變量 x 的值加 1。
• ‌遞減運(yùn)算符‌：--x 或 x--，將變量 x 的值減 1。
• ‌邏輯非‌：!x，對(duì)變量 x 進(jìn)行邏輯取反。
• ‌按位非‌：~x，對(duì)變量 x 進(jìn)行按位取反。

‌示例‌：

let x = 5;
console.log(-x); // 輸出 -5
console.log(++x); // 輸出 6
console.log(!true); // 輸出 false

二、雙目運(yùn)算符（Binary Operator）

‌定義‌：雙目運(yùn)算符是指需要兩個(gè)操作數(shù)的運(yùn)算符。這類運(yùn)算符通常作用于兩個(gè)變量或值。

‌命名由來(lái)‌："雙目"中的"目"同樣指的是操作數(shù)，"雙"表示有兩個(gè)操作數(shù)。例如：

• ‌加法‌：x + y，將兩個(gè)數(shù)相加。
• ‌減法‌：x - y，將兩個(gè)數(shù)相減。
• ‌乘法‌：x * y，將兩個(gè)數(shù)相乘。
• ‌除法‌：x / y，將兩個(gè)數(shù)相除。
• ‌取模‌：x % y，求兩個(gè)數(shù)相除的余數(shù)。
• ‌比較運(yùn)算符‌：x > y、x < y、x == y 等。
• ‌邏輯運(yùn)算符‌：x && y、x || y。

‌示例‌：

let a = 10;
let b = 5;
console.log(a + b); // 輸出 15
console.log(a > b); // 輸出 true
console.log(a && b); // 輸出 5（因?yàn)?a 和 b 都為真）

三、多目運(yùn)算符（Ternary Operator）

‌定義‌：多目運(yùn)算符是指需要三個(gè)或三個(gè)以上操作數(shù)的運(yùn)算符。在 JavaScript 中，最典型的多目運(yùn)算符是三元運(yùn)算符。

‌命名由來(lái)‌："多目"中的"目"指的是操作數(shù)，"多"表示有多個(gè)操作數(shù)。三元運(yùn)算符是唯一一個(gè)需要三個(gè)操作數(shù)的運(yùn)算符，其結(jié)構(gòu)為 條件 ? 表達(dá)式1 : 表達(dá)式2。

‌示例‌：

let age = 20;
let status = (age >= 18) ? "成年人" : "未成年人";
console.log(status); // 輸出 "成年人"

在這個(gè)例子中，age >= 18 是條件表達(dá)式，"成年人" 是條件為真時(shí)的返回值，"未成年人" 是條件為假時(shí)的返回值。

總結(jié)

• ‌單目運(yùn)算符‌：只需要一個(gè)操作數(shù)，如 ++x、-x。
• ‌雙目運(yùn)算符‌：需要兩個(gè)操作數(shù)，如 x + y、x > y。
• ‌多目運(yùn)算符‌：需要三個(gè)操作數(shù)，如 x ? y : z（三元運(yùn)算符）。

這些名稱的由來(lái)直觀地反映了運(yùn)算符所需操作數(shù)的個(gè)數(shù)，便于理解和記憶。

四、8個(gè)多目運(yùn)算符示例詳細(xì)解析

1. 基本條件賦值

let age = 20;
let status = age >= 18 ? "成年人" : "未成年人";

‌解析‌：

• let age = 20;：定義一個(gè)變量 age，并將其值設(shè)置為 20。
• let status = age >= 18 ? "成年人" : "未成年人";：這是三目運(yùn)算符的核心部分。
  • age >= 18 是條件表達(dá)式，它會(huì)計(jì)算 age 是否大于等于 18。
  • 如果條件為真（即 age 確實(shí)大于等于 18），則整個(gè)表達(dá)式的值為 "成年人"。
  • 如果條件為假（即 age 小于 18），則整個(gè)表達(dá)式的值為 "未成年人"。
  • 最終，status 變量將被賦值為計(jì)算結(jié)果。

2. 嵌套條件判斷

let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";

‌解析‌：

• let score = 85;：定義變量 score 并賦值為 85。
• let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";：這是一個(gè)嵌套的三目運(yùn)算符。
  • 首先檢查 score >= 90，如果為真則 grade 為 "A"。
  • 如果第一個(gè)條件為假，則檢查 score >= 80，如果為真則 grade 為 "B"。
  • 如果第二個(gè)條件也為假，則檢查 score >= 70，如果為真則 grade 為 "C"。
  • 如果所有條件都為假，則 grade 為 "D"。
  • 這種方式可以實(shí)現(xiàn)多個(gè)等級(jí)的判斷，從高到低依次比較。

3. 條件函數(shù)調(diào)用

let isLoggedIn = true;
let message = isLoggedIn ? console.log("歡迎回來(lái)") : console.log("請(qǐng)先登錄");

‌解析‌：

• let isLoggedIn = true;：定義一個(gè)布爾變量 isLoggedIn 并賦值為 true。
• let message = isLoggedIn ? console.log("歡迎回來(lái)") : console.log("請(qǐng)先登錄");：這里三目運(yùn)算符的兩個(gè)結(jié)果都是函數(shù)調(diào)用。
  • 如果 isLoggedIn 為真（true），則執(zhí)行 console.log("歡迎回來(lái)")。
  • 如果 isLoggedIn 為假（false），則執(zhí)行 console.log("請(qǐng)先登錄")。
  • 由于 console.log 函數(shù)沒有返回值，message 變量最終會(huì)得到 undefined。

4. 對(duì)象屬性設(shè)置

let user = {
    name: "張三",
    isActive: true,
    status: user.isActive ? "活躍用戶" : "非活躍用戶"
};

‌解析‌：

• let user = { ... };：創(chuàng)建一個(gè)對(duì)象 user。
• name: "張三"：設(shè)置對(duì)象的 name 屬性為 "張三"。
• isActive: true：設(shè)置對(duì)象的 isActive 屬性為 true。
• status: user.isActive ? "活躍用戶" : "非活躍用戶"：這是三目運(yùn)算符在對(duì)象中的應(yīng)用。
  • 檢查 user.isActive 的值。
  • 如果為真，則 status 屬性值為 "活躍用戶"。
  • 如果為假，則 status 屬性值為 "非活躍用戶"。

5. 數(shù)組元素處理

let numbers = [1, 2, 3, 4, 5];
let result = numbers.map(n => n > 3 ? n * 2 : n);

‌解析‌：

• let numbers = [1, 2, 3, 4, 5];：創(chuàng)建一個(gè)包含數(shù)字 1 到 5 的數(shù)組。
• let result = numbers.map(n => n > 3 ? n * 2 : n);：使用 map 方法處理數(shù)組中的每個(gè)元素。
  • numbers.map() 方法會(huì)遍歷數(shù)組中的每個(gè)元素。
  • n => n > 3 ? n * 2 : n 是一個(gè)箭頭函數(shù)，對(duì)每個(gè)元素 n 進(jìn)行處理。
  • 對(duì)于每個(gè)元素 n，檢查 n > 3 是否為真。
  • 如果為真（即 n 大于 3），則返回 n * 2（元素值乘以 2）。
  • 如果為假（即 n 小于等于 3），則返回 n（保持原值）。
  • 最終 result 數(shù)組將包含 [1, 2, 3, 8, 10]。

6. 條件返回值

function getMax(a, b) {
    return a > b ? a : b;
}

‌解析‌：

• function getMax(a, b) {：定義一個(gè)名為 getMax 的函數(shù)，接受兩個(gè)參數(shù) a 和 b。
• return a > b ? a : b;：這是函數(shù)的返回語(yǔ)句。
  • 比較參數(shù) a 和 b 的大小。
  • 如果 a 大于 b，則返回 a。
  • 如果 a 不大于 b（即 a 小于等于 b），則返回 b。
  • 這個(gè)函數(shù)的作用是返回兩個(gè)數(shù)中的較大值。

7. 復(fù)雜條件表達(dá)式

let price = 150;
let discount = price >= 200 ? 0.2 : price >= 100 ? 0.1 : 0;
let finalPrice = price * (1 - discount);

‌解析‌：

• let price = 150;：定義變量 price 并賦值為 150。
• let discount = price >= 200 ? 0.2 : price >= 100 ? 0.1 : 0;：這是復(fù)雜的嵌套三目運(yùn)算符。
  • 首先檢查 price >= 200，如果為真則 discount 為 0.2（20% 折扣）。
  • 如果第一個(gè)條件為假，則檢查 price >= 100，如果為真則 discount 為 0.1（10% 折扣）。
  • 如果兩個(gè)條件都為假，則 discount 為 0（無(wú)折扣）。
  • 在這個(gè)例子中，price 為 150，所以 discount 為 0.1。
• let finalPrice = price * (1 - discount);：計(jì)算最終價(jià)格。
  • 1 - discount 計(jì)算折扣后的比例（1 - 0.1 = 0.9）。
  • price * 0.9 計(jì)算最終價(jià)格（150 * 0.9 = 135）。

8. 條件賦值與默認(rèn)值

let userName = null;
let displayName = userName || "訪客";
let greeting = displayName ? `你好, ${displayName}!` : "歡迎訪問(wèn)";

‌解析‌：

• let userName = null;：定義變量 userName 并賦值為 null。
• let displayName = userName || "訪客";：這里使用了邏輯或運(yùn)算符（||）。
  • 如果 userName 為真值（非 null、非 undefined、非空字符串等），則 displayName 為 userName 的值。
  • 如果 userName 為假值（null、undefined、空字符串等），則 displayName 為 "訪客"。
  • 在這個(gè)例子中，userName 為 null，所以 displayName 為 "訪客"。
• let greeting = displayName ? 你好, ${displayName}! : "歡迎訪問(wèn)";：這是三目運(yùn)算符的應(yīng)用。
  • 檢查 displayName 是否為真值。
  • 如果為真，則返回模板字符串 你好, ${displayName}!，其中 ${displayName} 會(huì)被替換為 "訪客"。
  • 如果為假，則返回 "歡迎訪問(wèn)"。

        三目運(yùn)算符的優(yōu)勢(shì)在于其簡(jiǎn)潔性，能夠用一行代碼實(shí)現(xiàn)簡(jiǎn)單的條件邏輯。它特別適合用于賦值、返回值和簡(jiǎn)單的條件判斷場(chǎng)景。然而，過(guò)度嵌套會(huì)使代碼難以閱讀，因此在使用時(shí)應(yīng)保持適度。

五、陷阱規(guī)避

        JavaScript 中的單目、雙目和多目運(yùn)算符在使用時(shí)存在多種陷阱，主要包括以下幾類：

1、單目運(yùn)算符陷阱

‌        自增自減運(yùn)算符的前置與后置區(qū)別‌：++a 和 a++ 的執(zhí)行順序不同，前置運(yùn)算符先增加再使用變量值，后置運(yùn)算符先使用再增加。例如在表達(dá)式中 let a = 1; let b = ++a; 會(huì)使 b 的值為 2，而 let c = a++; 會(huì)使 c 的值為 1。

‌        一元運(yùn)算符的類型轉(zhuǎn)換‌：一元加法運(yùn)算符 + 會(huì)嘗試將操作數(shù)轉(zhuǎn)換為數(shù)字，如果轉(zhuǎn)換失敗則返回 NaN。例如 +'abc' 的結(jié)果是 NaN。

2、雙目運(yùn)算符陷阱

 ‌       加法運(yùn)算符的類型混淆‌：加法運(yùn)算符 + 既可以進(jìn)行數(shù)學(xué)加法，也可以進(jìn)行字符串拼接。當(dāng)操作數(shù)中至少有一個(gè)是字符串時(shí)，JavaScript 會(huì)將另一個(gè)操作數(shù)也轉(zhuǎn)換為字符串。例如 1 + "2" 的結(jié)果是 "12" 而不是 3。

‌        運(yùn)算符優(yōu)先級(jí)問(wèn)題‌：不同運(yùn)算符有不同的優(yōu)先級(jí)，可能導(dǎo)致意外的結(jié)果。例如 2 ** 3 * 2 會(huì)先計(jì)算冪運(yùn)算再計(jì)算乘法，結(jié)果為 16。在邏輯運(yùn)算符中，&& 的優(yōu)先級(jí)高于 ||。

 ‌       浮點(diǎn)數(shù)精度問(wèn)題‌：由于 JavaScript 使用 IEEE 754 標(biāo)準(zhǔn)，浮點(diǎn)數(shù)運(yùn)算可能出現(xiàn)精度誤差。例如 0.1 + 0.2 的結(jié)果不是 0.3，而是 0.30000000000000004。

 ‌       比較運(yùn)算符的隱式類型轉(zhuǎn)換‌：使用寬松相等 == 時(shí)，JavaScript 會(huì)進(jìn)行類型轉(zhuǎn)換，可能導(dǎo)致意外結(jié)果。例如 0 == false 為 true，"" == false 為 true。

3、多目運(yùn)算符陷阱

‌        三目運(yùn)算符的可讀性問(wèn)題‌：三目運(yùn)算符嵌套使用時(shí)容易導(dǎo)致代碼難以理解。例如 condition ? (a > b ? a : b) : c 過(guò)于復(fù)雜時(shí)應(yīng)簡(jiǎn)化。

 ‌       邏輯運(yùn)算符的返回值特性‌：邏輯運(yùn)算符 && 和 || 不總是返回布爾值，而是返回實(shí)際參與運(yùn)算的值。例如 0 || "hello" 會(huì)返回字符串 "hello"。

 ‌       條件判斷邏輯錯(cuò)誤‌：在使用邏輯或運(yùn)算符 || 連接多個(gè)"不等于"條件時(shí)，可能導(dǎo)致判斷始終為真。例如 if (a != 1 || a != 2) 會(huì)始終為真。

4、通用陷阱與規(guī)避方法

‌        類型轉(zhuǎn)換陷阱‌：JavaScript 的隱式類型轉(zhuǎn)換機(jī)制可能導(dǎo)致意外結(jié)果。建議使用嚴(yán)格相等 === 而非寬松相等 ==。

 ‌       空值處理陷阱‌：在處理 null 和 undefined 時(shí)，它們的比較行為特殊。null == undefined 為 true，但 null === undefined 為 false。

 ‌       數(shù)組與對(duì)象的轉(zhuǎn)換陷阱‌：數(shù)組參與運(yùn)算時(shí)會(huì)先轉(zhuǎn)換為字符串，例如 [1,2] + [3,4] 會(huì)得到 "1,23,4"。

 ‌       字符串拼接與數(shù)學(xué)運(yùn)算混淆‌：加法運(yùn)算符在涉及字符串時(shí)會(huì)進(jìn)行拼接而非數(shù)學(xué)運(yùn)算，需要注意操作數(shù)類型。

        避免這些陷阱的關(guān)鍵在于理解運(yùn)算符的特性和優(yōu)先級(jí)，使用顯式類型轉(zhuǎn)換，以及在復(fù)雜邏輯中使用清晰的代碼結(jié)構(gòu)。

到此這篇關(guān)于Javascript中的單目運(yùn)算符、雙目運(yùn)算符和多目運(yùn)算符操作大全的文章就介紹到這了,更多相關(guān)js單目運(yùn)算符、雙目運(yùn)算符和多目運(yùn)算符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論