JavaScript 객체에서 동일한 값을 갖는 여러 키

Question

JavaScript, jQuery, html 및 css를 사용하여 웹 사이트 날씨 애플리케이션을 구축 중입니다. 나는 API로부터 나의 날씨 데이터를 받고있다. API에는 Rain, Snow 등과 같은 현재 상태에 대한 몇 가지 다른 가능성이 있습니다. 온라인으로 찾은 오픈 소스 날씨 아이콘 팩을 사용하고 있습니다. 나의 의도는 적절한 아이콘을 API에서 내 앱으로 피드백 할 수있는 각 조건과 연관시키는 것입니다. 내가 결정한 접근 방식으로, 웹과 자바 스크립트 개발에서 완전히 새로운 브랜드라는 것을 생각해보십시오. 따라서 이것은 좋은 아이디어는 아니지만 키 값 쌍을 가진 객체를 만들기로 결정했습니다. 키는 모든 잠재적 조건으로 구성되며 값은 해당 조건에 대한 적절한 html 아이콘의 클래스 이름이됩니다. 여기 내가 말하는 것에 대한 스 니펫이 있습니다. 당신이 볼 수 있듯이 즉, 같은 값을 가진 개체에 여러 개의 키가 있도록

var condition = data.current.weather; //value coming from API 

var allConditions = { 
    Light Drizzle: 'wi wi-showers', 
    Heavy Drizzle: 'wi wi-showers', 
    Drizzle: 'wi wi-showers', 
    Light Rain: 'wi wi-rain', 
    Heavy Rain: 'wi wi-rain', 
    Rain: 'wi wi-rain', 
    Light Snow: 'wi wi-snow', 
    Heavy Snow: 'wi wi-snow', 
    Snow: 'wi wi-snow', 
    Light Snow Grains: 'wi wi-snow' 
} 

$('#icon').addClass(allConditions[currentCondition]); 

은, 나도 같은 아이콘을 사용합니다되는 몇 가지 조건이 있습니다. 여러 키에 동일한 값을 할당 할 수있는 방법이 있습니까? 예를 들면 다음과 같습니다.

var allConditions = { 
    'Light Drizzle, Heavy Drizzle, 
    Light Rain , Heavy Rain' : 'wi wi-showers', 
    'Light Snow, Heavy Snow' : 'wi wi-snow' 
} 

이 예제는 작동하지 않지만 여기서는 내가 수행하려고하는 것을 시각화하기 위해 사용합니다. 지금 당장은 각 키마다 고유의 가치를 부여 할 것입니다. 비록 그 값이 다른 여러 키와 동일하더라도, 최적화 할 수있는 방법이 있다면 그것에 대해 알고 싶습니다!

Answer 1

이 데이터를 개체 리터럴에 저장하는 대신 날씨 조건을 인수로 받아들이고 적절한 클래스를 반환하는 함수를 작성해야 할 수 있습니다. switch statement에 대한 유용한 사용 사례 일 수도 있습니다.

function conditionToClass(condition) { 
    var className = 'wi wi-'; 

    switch (condition) { 
    case 'Drizzle': 
    case 'Light Drizzle': 
    case 'Heavy Drizzle': 
     return className + 'showers'; 
    case 'Rain': 
    case 'Light Rain': 
    case 'Heavy Rain': 
     return className + 'rain'; 
    case 'Snow': 
    case 'Light Snow': 
    case 'Heavy Snow': 
    case 'Light Snow Grains': 
     return className + 'snow'; 
    default: 
     return 'some-default-class'; 
    } 
} 

var weatherClass = conditionToClass(data.current.weather); 

$('#icon').addClass(weatherClass);