Рефакторинг оператора switch-case в коде JavaScript

Как я могу реагировать на этот код, чтобы избежать повторения dailogObj.image? Я бы написал оператор return, если бы не случай 5, где у меня есть два назначения.

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;
}

javascript typescript switch-statement

11.06.2018 08:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

541

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете извлечь это назначение в собственное условие и просто использовать массив для установки свойства 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;
}

11.06.2018 08:24

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

Или вы можете создать другой объект для хранения имен кнопок, как пути к изображениям.

11.06.2018 08:26

Другие вопросы по теме

Автоматический импорт VS Code не показывает предложения для всех компонентов

Обнаружение присвоения псевдонима типа строки TS другому псевдониму типа строки

Angular 6 дочерние компоненты маршрута не загружаются?

Общие компоненты с компонентами более высокого порядка

Объявление Typescript для обещанного строкового массива

Какова цель объявления var System: any?

Трансляция события в Angular 6 / Typescript

Angular-firebase получить сообщения текущего пользователя

Angular 4: добавить динамическую строку и получить данные в контроллере

Как реализовать наследование в этом случае в Typescript

Рефакторинг оператора switch-case в коде JavaScript

Ответы 2

Другие вопросы по теме

Похожие вопросы