在JavaScript代碼中重構switch-case語句

Question

我該如何對這段代碼進行反應，以便避免dailogObj.image重復？ 如果不是我有兩個作業的情況5，我會寫一個return語句。

getDialogData(imageNum): any {

    const dailogObj = {
      image: '',
      buttonName: 'Learn More'
    };

    switch (imageNum) {
      case 1:
        dailogObj.image = '../../../assets/images/Red-Image.png';
        break;
      case 2:
        dailogObj.image = '../../../assets/images/blue-image-orgl.png';
        break;
      case 3:
        dailogObj.image = '../../../assets/images/Green-Image-2.png';
        break;
      case 4:
        dailogObj.image = '../../../assets/images/Gold-Image.png';
        break;
      case 5:
        dailogObj.image = '../../../assets/images/green-img-orgl.png';
        dailogObj.buttonName = 'Read Her Story';
        break;
      case  6:
        dailogObj.image = '../../../assets/images/Red-Image-2.png';
        break;
      case  7:
        dailogObj.image = '../../../assets/images/Blue-Image-2.png';
        break;
      case 8:
        dailogObj.image = '../../../assets/images/Gold-Image-2.png';
        break;
    }

    return dailogObj;
}

Answer 1

您可以提取該分配到其自身的條件，並僅使用一個數組來設置image屬性：

getDialogData(imageNum): any {
    const dailogObj = {
      image: '',
      buttonName: 'Learn More'
    };

    // Handle the default case if imageNum is not in range [1..9]
    if (imageNum >=1 && imageNum <=9) {
        // Special treatment of image number 5
        if (imageNum == 5) {
            dailogObj.buttonName = 'Read Her Story';
        }

        // If it is in range, pick the right image:
        var images = 
            ['../../../assets/imfages/Red-Image.png',
             '../../../assets/images/blue-image-orgl.png',
             '../../../assets/images/Green-Image-2.png',
             '../../../assets/images/Gold-Image.png',
             '../../../assets/images/green-img-orgl.png',
             '../../../assets/images/Red-Image-2.png',
             '../../../assets/images/Blue-Image-2.png',
             '../../../assets/images/Gold-Image-2.png']; 

        dailogObj.image = images[imageNum - 1];
    }
    return dailogObj;
}

Answer 2

images = {
    1: '../../../assets/images/Red-Image.png',
    2: '../../../assets/images/blue-image-orgl.png',
    ...
    8: '../../../assets/images/Gold-Image-2.png'
};

dailogObj.image = images[imageNum];
dailogObj.buttonName = imageNum == 5 ? 'Read Her Story' : 'Learn More';

或者，您可以創建另一個對象來存儲按鈕名稱，就像圖像路徑一樣。