,,

還在用switch？JavaScript 這些替代方案值得擁有

admin

2025年4月30日 17:59 本文熱度 88

在 JavaScript 開發中，傳統switch語句存在冗長、易出錯、難維護等弊端。現代 JavaScript 提供了對象映射、Map 數據結構等替代方案，能大幅簡化條件邏輯。同時，結合變量聲明優化、箭頭函數、異步編程改進等技巧，可讓代碼更簡潔高效，顯著提升開發效率與代碼質量。

傳統 switch 語句的問題

傳統 switch 語句存在冗長、易出錯、難維護和可讀性差等問題，下面是一個傳統 switch 語句的示例：

function getDayName(day) {    switch (day) {        case 1:            return 'Monday';        case 2:            return 'Tuesday';        case 3:            return 'Wednesday';        case 4:            return 'Thursday';        case 5:            return 'Friday';        case 6:            return 'Saturday';        case 7:            return 'Sunday';        default:            return 'Invalid day';    }}console.log(getDayName(2));

使用對象替代 switch

對象映射是替代簡單 switch 語句的有效方式，它更簡潔：

function getDayName(day) {    const dayMap = {        1: 'Monday',        2: 'Tuesday',        3: 'Wednesday',        4: 'Thursday',        5: 'Friday',        6: 'Saturday',        7: 'Sunday'    };    return dayMap[day] || 'Invalid day';}console.log(getDayName(2));

處理復雜邏輯

當每個分支包含復雜邏輯時，可把函數作為對象的值：

function performAction(action) {    const actions = {        add: (a, b) => a + b,        subtract: (a, b) => a - b,        multiply: (a, b) => a * b,        divide: (a, b) => a / b    };    const actionFn = actions[action];    if (!actionFn) {        return 'Invalid action';    }    return actionFn(10, 5);}console.log(performAction('add'));

使用 Map 數據結構

ES6 的 Map 數據結構比對象字面量功能更強大，適合鍵不限于字符串等場景：

function getDayName(day) {    const dayMap = new Map([        [1, 'Monday'],        [2, 'Tuesday'],        [3, 'Wednesday'],        [4, 'Thursday'],        [5, 'Friday'],        [6, 'Saturday'],        [7, 'Sunday']    ]);    return dayMap.get(day) || 'Invalid day';}console.log(getDayName(2));

函數映射和鏈式操作

Map 適合實現命令模式或策略模式，示例如下：

class Calculator {    constructor() {        this.operations = new Map([            ['+', (a, b) => a + b],            ['-', (a, b) => a - b],            ['*', (a, b) => a * b],            ['/', (a, b) => a / b],            ['%', (a, b) => a % b]        ]);    }    calculate(a, operator, b) {        const operation = this.operations.get(operator);        if (!operation) {            throw new Error(`Unsupported operator: ${operator}`);        }        return operation(a, b);    }    addOperation(operator, fn) {        this.operations.set(operator, fn);        return this;     }}const calc = new Calculator()   .addOperation('log', (a, b) => Math.log(a) / Math.log(b));console.log(calc.calculate(10, '+', 5)); console.log(calc.calculate(10, 'log', 10));

通過運用對象映射和 Map 數據結構，能讓 JavaScript 代碼更簡潔、優雅且易于維護。

還有哪些代碼優化技巧？

變量聲明與作用域

使用 const 和 let 替代 var：const 和 let 具有塊級作用域，能避免變量提升帶來的問題，增強代碼的可預測性。

// 使用 varfunction testVar() {    if (true) {        var x = 10;    }    console.log(x); // 輸出 10}// 使用 letfunction testLet() {    if (true) {        let y = 10;    }    // console.log(y);  // 報錯，y 不在此作用域}

減少全局變量的使用：全局變量易引發命名沖突和代碼難以維護，盡量將變量的作用域限制在函數或模塊內部。

函數優化

箭頭函數：它是一種更簡潔的函數定義方式，特別適合簡單的回調函數，并且它沒有自己的 this、arguments、super 或 new.target，this 值繼承自外層函數。

// 傳統函數const numbers = [1, 2, 3];const squared = numbers.map(function(num) {    return num * num;});// 箭頭函數const squaredWithArrow = numbers.map(num => num * num);

函數柯里化：把多參數函數轉換為一系列單參數函數，可提高函數的復用性。

function add(a, b) {    return a + b;}// 柯里化版本function curriedAdd(a) {    return function(b) {        return a + b;    };}const add5 = curriedAdd(5);console.log(add5(3)); // 輸出 8

循環優化

避免在循環中重復計算：如果循環條件或循環體中有重復計算的部分，應提前計算好。

const arr = [1, 2, 3, 4, 5];// 不好的寫法for (let i = 0; i < arr.length; i++) {    // 每次循環都計算 arr.length}// 好的寫法const len = arr.length;for (let i = 0; i < len; i++) {    // 只計算一次長度}

使用 for...of 或數組方法替代傳統 for 循環：for...of 語法更簡潔，數組方法（如 map、filter、reduce 等）能讓代碼更具聲明性。

const numbers = [1, 2, 3];// 使用 for...offor (const num of numbers) {    console.log(num);}// 使用數組方法numbers.forEach(num => console.log(num));

條件判斷優化

三元運算符：對于簡單的條件判斷，使用三元運算符可以讓代碼更簡潔。

// 傳統 if-elselet result;if (x > 10) {    result = 'Greater than 10';} else {    result = 'Less than or equal to 10';}// 三元運算符const resultWithTernary = x > 10 ? 'Greater than 10' : 'Less than or equal to 10';

邏輯與（&&）和邏輯或（||）短路求值：可以簡化條件判斷和賦值操作。

// 使用 || 進行默認值賦值const name = user.name || 'Guest';// 使用 && 執行條件操作const isAdmin = true;isAdmin && showAdminPanel();

異步編程優化

使用 async/await 替代回調地獄：async/await 讓異步代碼看起來更像同步代碼，提高了代碼的可讀性和可維護性。

// 回調地獄示例function getData(callback) {    setTimeout(() => {        const data = { message: 'Hello' };        callback(data);    }, 1000);}getData(data => {    console.log(data.message);});// async/await 示例function getData() {    return new Promise(resolve => {        setTimeout(() => {            const data = { message: 'Hello' };            resolve(data);        }, 1000);    });}async function main() {    const data = await getData();    console.log(data.message);}main();

性能優化

防抖和節流：在處理高頻事件（如 resize、scroll、input 等）時，使用防抖和節流可以減少不必要的函數調用，提高性能。

// 防抖函數function debounce(func, delay) {    let timer;    return function() {        const context = this;        const args = arguments;        clearTimeout(timer);        timer = setTimeout(() => {            func.apply(context, args);        }, delay);    };}// 節流函數function throttle(func, limit) {    let inThrottle;    return function() {        const context = this;        const args = arguments;        if (!inThrottle) {            func.apply(context, args);            inThrottle = true;            setTimeout(() => inThrottle = false, limit);        }    };}

——The End——

該文章在 2025/4/30 17:59:07 編輯過

關鍵字查詢

方案

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

還在用switch？JavaScript 這些替代方案值得擁有