PHP에서 "변수"변수를 가질 수 있다는 것을 알고 있습니다. 예를 들면
$x = "variable";
$$x = "hello, world!";
echo $variable; // displays "hello, world!"
javascript에서 이름으로 변수를 문자열로 참조 할 수 있습니까? 어떻게 될까요?
PHP에서 "변수"변수를 가질 수 있다는 것을 알고 있습니다. 예를 들면
$x = "variable";
$$x = "hello, world!";
echo $variable; // displays "hello, world!"
javascript에서 이름으로 변수를 문자열로 참조 할 수 있습니까? 어떻게 될까요?
답변:
이에 대한 단일 솔루션은 없습니다 (글쎄요 eval
,하지만 심각하게 고려하지 않겠습니다). 를 통해 일부 전역 변수에 동적으로 액세스 할 수 window
있지만 함수에 로컬 인 변수에는 작동하지 않습니다. 속성 이되지 않는 전역 변수는 및 , 및 es로 window
정의 된 변수 입니다.let
const
class
변수 변수를 사용하는 것보다 거의 항상 더 나은 솔루션이 있습니다! 대신 데이터 구조를 살펴보고 문제에 맞는 구조 를 선택 해야합니다 .
다음과 같이 고정 된 이름 집합이있는 경우
// BAD
var foo = 42;
var bar = 21;
var key = 'foo';
console.log(eval(key));
이러한 이름 / 값을 객체의 속성으로 저장하고 대괄호 표기법 을 사용 하여 동적으로 조회합니다.
// GOOD
var obj = {
foo: 42,
bar: 21,
};
var key = 'foo';
console.log(obj[key]);
ES2015 + 에서는 간결한 속성 표기법을 사용하여 기존 변수에 대해이 작업을 수행하는 것이 훨씬 더 쉽습니다 .
// GOOD
var foo = 42;
var bar = 21;
var obj = {foo, bar};
var key = 'foo';
console.log(obj[key]);
다음과 같이 "연속적으로"번호가 매겨진 변수가있는 경우
// BAD
var foo1 = 'foo';
var foo2 = 'bar';
var foo3 = 'baz';
var index = 1;
console.log(eval('foo' + index));
그런 다음 대신 배열 을 사용하고 인덱스를 사용하여 해당 값에 액세스해야합니다.
// GOOD
var foos = ['foo', 'bar', 'baz'];
var index = 1;
console.log(foos[index - 1]);
이 작업을 필사적으로 수행하려면 eval ()을 사용해 볼 수 있습니다.
var data = "testVariable";
eval("var temp_" + data + "=123;");
alert(temp_testVariable);
또는 창 개체 사용 :
var data = "testVariable";
window["temp_" + data] = 123;
alert(window["temp_" + data]);
http://www.hiteshagrawal.com/javascript/dynamic-variables-in-javascript
eval
Strict 모드에서는 지역 변수를 만들 수 없습니다. 그러나 간접 호출은 전역 변수를 만들 수 있습니다.
PHP와 달리 JavaScript는 현재 선언 된 모든 변수 이름에 대한 참조를 포함하는 전역 배열에 대한 액세스를 제공하지 않습니다. 따라서 JavaScript는 변수 변수에 대한 기본 지원을 제공하지 않습니다. 그러나 모든 변수를 배열 또는 객체의 일부로 정의하는 한이 기능을 에뮬레이션 할 수 있습니다. 그러면 gloabls 배열이 생성됩니다. 예를 들어 다음 hello
과 같이 전역 범위에서 변수를 선언하는 대신 :
var hello = 'hello world';
객체 안에 그것을 캡슐화합시다. 우리는 그 객체를 vv (변수 변수)라고 부를 것입니다 :
var vv = {
'hello': 'hello world',
//Other variable variables come here.
},
referToHello = 'hello';
이제 우리는 변수의 인덱스로 변수를 참조 할 수 있으며, 배열 인덱스는 변수를 사용하여 제공 될 수 있으므로 사실상 변수 변수를 사용하고 있습니다.
console.log(vv[referToHello]); //Output: hello world
질문에 대한 답변
원래 질문에서 제공 한 코드에 이것을 적용 해 보겠습니다.
var vv = {
'x': 'variable',
'variable': 'hello world!'
};
console.log(vv[vv['x']]); //Displays "hello, world!"
실용적인 사용
이전 코드는 엄청나게 번거롭고 비실용적으로 보일 수 있지만 이러한 유형의 캡슐화를 사용하는 JavaScript의 변수 변수에 대한 실용적인 용도가 있습니다. 아래 예에서 정의되지 않은 수의 HTML 요소의 ID를 얻기 위해 동일한 개념을 사용합니다.
var elementIds = [],
elements = ['message','fillOrStroke','sizePicker','colorPicker']; //The items in this array could be defined automatically via an input, database query, event, etc.
elements.forEach( (element) => {
elementIds[element] = document.getElementById(element);
});
이 예제는 elementIds
각 요소의 ID를 기반으로 변수 변수 (의 키 ) 를 선언 하고 해당 요소의 노드를 각 변수의 값으로 할당합니다. 그리고 JavaScript에서 전역 변수를 사용하는 것은 일반적으로 변수 변수에 고유 한 범위 (이 경우 elementIds
배열 내에서 선언 )를 지정하는 것이 좋지 않기 때문에 깔끔 할뿐만 아니라 책임감도 더 높습니다.
JavaScript eval(str)
기능을 사용할 수 있습니다 .
이 함수가하는 일은 제공된 문자열을 JS 코드로 변환 한 다음 실행하는 것입니다.
예를 들면 :
eval("console.log('hello world')"); // Logs hello world
따라서 변수 변수로 사용하려면 다음을 수행 할 수 있습니다.
var a = "hello";
var hello = "world";
console.log(a + " " + eval(a)); // Logs hello world
이렇게하면 다음과 같은 출력이 생성됩니다.
console.log(a + " " + hello); // Logs hello world
(예는 변수 변수에 대한 PHP 매뉴얼에서 가져온 것입니다 .)