Programing

JavaScript에서 동적 변수 이름 사용

lottogame 2020. 3. 9. 08:00
반응형

JavaScript에서 동적 변수 이름 사용


PHP에서는 다음과 같이 놀랍고 끔찍한 일을 할 수 있습니다.

$a = 1;
$b = 2;
$c = 3;
$name = 'a';
echo $$name;
// prints 1

Javascript로 이와 같은 작업을 수행하는 방법이 있습니까?

var name = 'the name of the variable';를 들어 변수가 name있다면 이름을 가진 변수에 대한 참조를 얻을 수 있습니까?


ECMA- / 자바 스크립트는 모든 것 ( ObjectsContexts일종의 Object) 에 관한 것이므로 모든 변수는 Variable 이라는 (또는 Function, Activation Object의 경우 )에 저장됩니다.

따라서 다음과 같은 변수를 작성하면

var a = 1,
    b = 2,
    c = 3;

에서 글로벌 범위 (= NO 기능 컨텍스트), 당신은 암시 적으로이 변수 쓰기 글로벌 객체 (= window브라우저에서)를.

"dot"또는 "bracket"표기법을 사용하여 액세스 할 수 있습니다.

var name = window.a;

또는

var name = window['a'];

때문 만이 특정 인스턴스에서 전역 객체에 대한 작동 변수 오브젝트글로벌 개체 는 IS window객체 자체. 함수의 컨텍스트 내에서는 활성화 객체에 직접 액세스 할 수 없습니다 . 예를 들어 :

function foobar() {
   this.a = 1;
   this.b = 2;

   var name = window['a']; // === undefined
   alert(name);
   name = this['a']; // === 1
   alert(name);
}

new foobar();

new자체 정의 객체 (컨텍스트)의 새 인스턴스를 만듭니다. new기능의 범위가 없으면 global(= 창)이됩니다. 이 예는 경고 것 undefined1각각. 우리가 다음 this.a = 1; this.b = 2과 같이 교체한다면 :

var a = 1,
    b = 2;

두 경고 출력은 모두 정의되지 않습니다. 이 시나리오에서는 변수 a와는 b에서 정품 인증 개체에 저장된 얻을 것이다 foobar우리가하지 액세스 (물론 우리가 호출하여 직접 그 액세스 할 수 할 수있는, a그리고 b).


eval 하나의 옵션입니다.

var a = 1;
var name = 'a';

document.write(eval(name)); // 1

window 객체를 사용하여 얻을 수 있습니다.

window['myVar']

window 사용중인 모든 전역 변수 및 전역 함수에 대한 참조가 있습니다.


나쁜 답변이 얼마나 많은 표를 얻는 지 모릅니다. 대답하기는 쉽지만 복잡하게 만듭니다.

// If you want to get article_count
// var article_count = 1000;
var type = 'article';
this[type+'_count'] = 1000;  // in a function we use "this";
alert(article_count);

a = 'varname';
str = a+' = '+'123';
eval(str)
alert(varname);

이 시도...


이것은 예입니다 :

for(var i=0; i<=3; i++) {
    window['p'+i] = "hello " + i;
}

alert(p0); // hello 0
alert(p1); // hello 1
alert(p2); // hello 2
alert(p3); // hello 3

또 다른 예 :

var myVariable = 'coco';
window[myVariable] = 'riko';

alert(coco); // display : riko

따라서 myVariable의 " coco " 은 변수 coco가 됩니다.

전역 범위의 모든 변수는 Window 개체의 속성이므로


Javascript에서는 모든 속성이 키 값 쌍이라는 사실을 사용할 수 있습니다. jAndy는 이미 이것을 언급했지만 그의 답변이 어떻게 악용 될 수 있는지는 생각하지 않습니다.

일반적으로 변수 이름을 보유 할 변수를 만들지 않고 변수 이름을 생성 한 다음 사용하려고합니다. PHP는 $$var표기법으로 수행하지만 속성 키는 배열 키와 상호 교환 가능하므로 Javascript는 필요하지 않습니다.

var id = "abc";
var mine = {};
mine[id] = 123;
console.log(mine.abc);

일반적으로 변수를 구성하려고합니다. 간접적 인 이유가 있으므로 다른 방법으로도 할 수 있습니다.

var mine = {};
mine.abc = 123;
console.log(mine["a"+"bc"]);

window 또는 global (노드)와 같은 전역 객체를 사용하지 않으려면 다음과 같이 시도하십시오.

var obj = {};
obj['whatever'] = 'There\'s no need to store even more stuff in a global object.';

console.log(obj['whatever']);

2019 년

TL; DR

  • eval 연산자는 호출 한 컨텍스트에서 문자열 식을 실행하고 해당 컨텍스트에서 변수를 반환 할 수 있습니다.
  • literal object이론적으로 write :로 할 수 {[varName]}있지만 정의에 의해 차단되었습니다.

그래서 나는이 질문을 보았고 여기에있는 모든 사람들은 실제 해결책을 제시하지 않고 놀았습니다. 그러나 @Axel Heider는 접근이 좋습니다.

해결책은 eval입니다. 가장 잊혀진 연산자. (대부분은 생각 with())

eval연산자는 호출 한 컨텍스트에서 표현식을 동적으로 실행할 수 있습니다. 해당 표현식의 결과를 반환합니다. 이를 사용하여 함수의 컨텍스트에서 변수의 값을 동적으로 반환 할 수 있습니다.

예:

function exmaple1(){
   var a = 1, b = 2, default = 3;
   var name = 'a';
   return eval(name)
}

example1() // return 1


function example2(option){
  var a = 1, b = 2, defaultValue = 3;

  switch(option){
    case 'a': name = 'a'; break;
    case 'b': name = 'b'; break;
    default: name = 'defaultValue';
  }
  return eval (name);
}

example2('a') // return 1
example2('b') // return 2
example2() // return 3

나는 항상 명시 적으로 표현식 eval이 실행될 것이라는 점에 유의하십시오 . 코드에서 불필요한 놀라움을 피하기 위해. eval매우 강하지 만 이미 알고 있다는 것을 확신합니다

BTW, 합법적이라면 literal object변수 이름과 값을 캡처하는 데 사용할 수 있지만 계산 된 속성 이름과 속성 값을 결합 할 수는 없습니다.

functopn example( varName ){
    var var1 = 'foo', var2 ='bar'

    var capture = {[varName]}

}

example('var1') //trow 'Uncaught SyntaxError: Unexpected token }`

여러 개의 FormData를 즉석에서 그려야하고 객체 방식이 잘 작동했습니다.

var forms = {}

그런 다음 루프에서 내가 사용한 양식 데이터를 만들어야 할 때마다

forms["formdata"+counter]=new FormData();
forms["formdata"+counter].append(var_name, var_value);

그들이 의미하는 것은 아니오, 당신은 할 수 없습니다. 그것을 할 수있는 방법이 없습니다. 그래서 당신은 이런 식으로 할 수있었습니다

function create(obj, const){
// where obj is an object and const is a variable name
function const () {}

const.prototype.myProperty = property_value;
// .. more prototype

return new const();

}

ECMAScript 5에서 구현 된 것과 같은 작성 기능이 있습니다.


내 테스트에서 eval ()이 작동하지 않았습니다. 그러나 DOM 트리에 새로운 JavaScript 코드를 추가 할 수 있습니다. 새 변수를 추가하는 함수는 다음과 같습니다.

function createVariable(varName,varContent)
{
  var scriptStr = "var "+varName+"= \""+varContent+"\""

  var node_scriptCode = document.createTextNode( scriptStr )
  var node_script = document.createElement("script");
  node_script.type = "text/javascript"
  node_script.appendChild(node_scriptCode);

  var node_head = document.getElementsByTagName("head")[0]
  node_head.appendChild(node_script);
}

createVariable("dynamicVar", "some content")
console.log(dynamicVar)

이것은 받아 들일만한 대답이 있지만 관찰을 추가하고 싶습니다.

ES6에서는 사용 let 이 작동하지 않습니다 .

/*this is NOT working*/
let t = "skyBlue",
    m = "gold",
    b = "tomato";

let color = window["b"];
console.log(color);

그러나 작품 사용var

/*this IS working*/
var t = "skyBlue",
    m = "gold",
    b = "tomato";

let color = window["b"];
console.log(color);

나는 이것이 일부에게 도움이되기를 바랍니다.


Object를 사용하는 것도 좋습니다.

var a=123
var b=234
var temp = {"a":a,"b":b}
console.log(temp["a"],temp["b"]);

이것은 동적으로 명명 된 변수를 내 보내야하는 사람들을위한 대안입니다

export {
  [someVariable]: 'some value',
  [anotherVariable]: 'another value',
}

// then.... import from another file like this:
import * as vars from './some-file'

다른 대안은 단순히 키 이름이 동적으로 지정된 객체를 만드는 것입니다.

const vars = { [someVariable]: 1, [otherVariable]: 2 };

// consume it like this
vars[someVariable];

참고 URL : https://stackoverflow.com/questions/5117127/use-dynamic-variable-names-in-javascript

반응형