在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';

或者，您可以创建另一个对象来存储按钮名称，就像图像路径一样。