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

一、單目運算符（Unary Operator）

‌定義‌：單目運算符是指只需要一個操作數(shù)的運算符。這類運算符通常作用于一個變量或值。

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

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

‌示例‌：

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

二、雙目運算符（Binary Operator）

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

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

• ‌加法‌：x + y，將兩個數(shù)相加。
• ‌減法‌：x - y，將兩個數(shù)相減。
• ‌乘法‌：x * y，將兩個數(shù)相乘。
• ‌除法‌：x / y，將兩個數(shù)相除。
• ‌取模‌：x % y，求兩個數(shù)相除的余數(shù)。
• ‌比較運算符‌：x > y、x < y、x == y 等。
• ‌邏輯運算符‌：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（因為 a 和 b 都為真）

三、多目運算符（Ternary Operator）

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

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

‌示例‌：

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

在這個例子中，age >= 18 是條件表達式，"成年人" 是條件為真時的返回值，"未成年人" 是條件為假時的返回值。

總結(jié)

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

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

四、8個多目運算符示例詳細解析

1. 基本條件賦值

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

‌解析‌：

• let age = 20;：定義一個變量 age，并將其值設(shè)置為 20。
• let status = age >= 18 ? "成年人" : "未成年人";：這是三目運算符的核心部分。
  • age >= 18 是條件表達式，它會計算 age 是否大于等于 18。
  • 如果條件為真（即 age 確實大于等于 18），則整個表達式的值為 "成年人"。
  • 如果條件為假（即 age 小于 18），則整個表達式的值為 "未成年人"。
  • 最終，status 變量將被賦值為計算結(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";：這是一個嵌套的三目運算符。
  • 首先檢查 score >= 90，如果為真則 grade 為 "A"。
  • 如果第一個條件為假，則檢查 score >= 80，如果為真則 grade 為 "B"。
  • 如果第二個條件也為假，則檢查 score >= 70，如果為真則 grade 為 "C"。
  • 如果所有條件都為假，則 grade 為 "D"。
  • 這種方式可以實現(xiàn)多個等級的判斷，從高到低依次比較。

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

let isLoggedIn = true;
let message = isLoggedIn ? console.log("歡迎回來") : console.log("請先登錄");

‌解析‌：

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

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

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

‌解析‌：

• let user = { ... };：創(chuàng)建一個對象 user。
• name: "張三"：設(shè)置對象的 name 屬性為 "張三"。
• isActive: true：設(shè)置對象的 isActive 屬性為 true。
• status: user.isActive ? "活躍用戶" : "非活躍用戶"：這是三目運算符在對象中的應(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)建一個包含數(shù)字 1 到 5 的數(shù)組。
• let result = numbers.map(n => n > 3 ? n * 2 : n);：使用 map 方法處理數(shù)組中的每個元素。
  • numbers.map() 方法會遍歷數(shù)組中的每個元素。
  • n => n > 3 ? n * 2 : n 是一個箭頭函數(shù)，對每個元素 n 進行處理。
  • 對于每個元素 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) {：定義一個名為 getMax 的函數(shù)，接受兩個參數(shù) a 和 b。
• return a > b ? a : b;：這是函數(shù)的返回語句。
  • 比較參數(shù) a 和 b 的大小。
  • 如果 a 大于 b，則返回 a。
  • 如果 a 不大于 b（即 a 小于等于 b），則返回 b。
  • 這個函數(shù)的作用是返回兩個數(shù)中的較大值。

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

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ù)雜的嵌套三目運算符。
  • 首先檢查 price >= 200，如果為真則 discount 為 0.2（20% 折扣）。
  • 如果第一個條件為假，則檢查 price >= 100，如果為真則 discount 為 0.1（10% 折扣）。
  • 如果兩個條件都為假，則 discount 為 0（無折扣）。
  • 在這個例子中，price 為 150，所以 discount 為 0.1。
• let finalPrice = price * (1 - discount);：計算最終價格。
  • 1 - discount 計算折扣后的比例（1 - 0.1 = 0.9）。
  • price * 0.9 計算最終價格（150 * 0.9 = 135）。

8. 條件賦值與默認值

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

‌解析‌：

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

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

五、陷阱規(guī)避

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

1、單目運算符陷阱

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

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

2、雙目運算符陷阱

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

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

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

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

3、多目運算符陷阱

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

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

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

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

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

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

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

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

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

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

最新評論