Javascript로 동적 변수를 만드는 쉬운 방법이 있습니까?

StackOverflow https://stackoverflow.com/questions/2413414

  •  18-09-2019
  •  | 
  •  

문제

저는 찾은 항목의 유형에 따라 지도에 할당되는 다양한 아이콘을 사용하여 데이터 기반 Google 지도를 만들었습니다.따라서 5가지 유형의 랜드마크가 있고 각각 다른 아이콘(상점, 도서관, 병원 등)이 있는 경우, 제가 하고 싶은 것은 Google 아이콘 개체를 동적으로 생성하는 것입니다.나는 다음과 같은 것을 생각하고 있었다 :

types = array('hospital','church','library','store',etc);
var i=0;
while (i<=types.length) {

    var landmark + i = new google.maps.Icon();
    landmark.image = "icon" + i + ".png";
    i++;
    }

그러나 아마도 짐작하셨겠지만, 이것은 작동하지 않습니다.또한 다음과 같이 eval을 사용해 보았습니다.

while (i<=types.length) {
        doIcon(i);
        i++;
    }   

    function doIcon(i){ 
        eval("var landmark" + i + " = new.google.maps.Icon();");
        return eval("landmark" + i);
    }

하지만 그것도 작동하지 않았습니다. 자바스크립트 변수를 동적으로 생성하는 방법에 대한 조언을 주시면 감사하겠습니다.순수한 js여야 하며 PHP로 할 수 있지만 여기서는 그럴 수 없습니다.

감사해요!

도움이 되었습니까?

해결책

정말 쉽습니다 : object["variablename"] = whatever;

예를 들어, 당신은 물체를 가질 수 있습니다. var Landmarks = {} 그리고 당신은 그렇게 추가 할 수 있습니다. Landmarks["landmark" + i] = new google.maps.Icon(); 그런 식으로 통과하십시오.

이러한 변수가 필요한 경우 글로벌 (왜?) 직접 사용하는 글로벌 객체에 액세스 할 수 있습니다. window.

다른 팁

다음과 같이 선언된 개체를 사용하여 해당 작업을 수행하려는 경우 Landmark["landmark" + i], 연관보다는 인덱스 배열을 사용하는 것이 더 나을 수도 있습니다. 반복이 훨씬 쉽습니다.배열이 훨씬 더 나은 작업을 수행하기 때문에 객체는 실제로 인덱스 속성과 함께 사용되지 않습니다.

var myObj =           // object version
{
   "item0": "blah",
   "item1": "blah"
   // etc
}
var myArr =           // array version
[
   "blah",
   "blah"
   // etc
]

배열을 사용하는 것이 훨씬 더 합리적입니다.

landmarks = []; // new array
types = array('hospital','church','library','store',etc);  
var i=0;  
while (i<=types.length) {  
    landmarks.push(new google.maps.Icon());
    landmarks[i].image = "icon" + i + ".png";
    i++;  
}

그렇게 하는 것이 더 합리적이고 for...in 객체에 대한 루프는 프로토타입 속성이 열거 가능하므로 약간 지저분해질 수 있습니다.

변수를 전역 변수로 만들려면 해당 변수를 창 개체에 추가하세요.

var myCustomVar = "landmark" + i;
window[myCustomVar] = new google.maps.Icon();

alert(landmark0);

그러나 이는 불필요한 많은 변수로 전역 네임스페이스를 오염시키는 것입니다.따라서 배열을 사용하는 것이 더 나을 것입니다.

window.landmarks = [];
landmarks.push(new google.maps.Icon());
// etc...

귀하의 질문에 직접 대답하기 위해 ( 이것은 당신이 원하는 솔루션이 아닙니다. 다른 답변을 확인하십시오. 이것은 단지 문서화를위한 것입니다!), 여기 JavaScript 콘솔의 사본-붙여 넣기가 있습니다.

> window["myNamedVar"] = "Hello, World!";
> console.log(myNamedVar);
  "Hello, World!"

PHP에서 사용할 수있는 것처럼 다소 사용할 수있는 JavaScript 객체를 만드는 것이 좋습니다.

var types = ['hospital','church','library','store'];
var landmarks= {};
for (var i in types) {
    landmarks[types[i]]= new google.maps.Icon();
    landmarks[types[i]].image = "icon" + i + ".png";
} 
alert(landmarks['hospital'].image);  // displays "icon0.png"

그 변수가 정말로 필요합니까? 당신은 이것으로 할 수 없습니다 :

var types = ['hospital','church','library','store'];    
for(var i =0; i < types.length; i += 1) (new google.maps.Icon()).image = "icon" + i + ".png";

의견을 기반으로 수행 된 수정 :

아이콘 이름 패턴은 아이콘 + index + .png에서 아이콘 + type + .png로 변경되고 루프 결과를 저장했습니다.

types = ['hospital','church','library','store'];
var landmarks = {};


// images names are of the form icon + type + .png
function createIcon(type) 
{ 
    var icon = new google.maps.Icon();
    icon.image = "icon" + type + ".png";
    return icon;
}

// mapping of landamarks by type and icon
for (var i = 0, len = types.length; i < len; i++)
{
    landmarks[types[i]] = createIcon(types[i]);
}

결과는 다음과 같습니다. {병원 : 아이콘, 교회 : 아이콘, ...}

여기서 아이콘은 "icon {type} .png"형식의 문자열 인 이미지 속성이있는 Google지도 아이콘입니다.

쓰기 아이콘을 사용합니다 landmarks.type 여기서 유형은 유형 배열의 이름 중 하나입니다. landmarks.hospital.

이미지 이름이 양식 Icon + Number + .png이고 각 유형의 숫자는 배열의 인덱스와 동일 한 경우 CreateIcon (i)의 호출 CreateIcon (유형 [i])을 교체하십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top