programing

JavaScript에서 동적 변수 이름 사용

shortcode 2022. 10. 25. 20:33
반응형

JavaScript에서 동적 변수 이름 사용

PHP에서는 다음과 같은 놀라운 일을 할 수 있습니다.

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

Javascript로 이런 일을 할 수 있는 방법이 있나요?

를 들어, '가 '는 '가 하면 '가 있는가 있는가'가 있는가 있는 경우var name = 'the name of the variable';이 " " " " 인 변수에 수 ?name

가 ECMA-/Javascript의 이기 때문에Objects ★★★★★★★★★★★★★★★★★」Contexts(이것은 일종의 객체이기도 합니다), 모든 변수는 변수(또는 함수, 활성화 객체의 경우)라는 이름으로 저장됩니다.

따라서 다음과 같은 변수를 만들 경우:

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

Global scope(= NO 함수 컨텍스트)에서 이러한 변수를 Global object(=)에 암묵적으로 씁니다.window★★★★★★★★★★★★★★★★★★★★★」

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

var name = window.a;

또는

var name = window['a'];

이것은 이 특정 인스턴스의 글로벌오브젝트에 대해서만 동작합니다.글로벌오브젝트의 변수 오브젝트는window오브젝트 자체함수의 컨텍스트 내에서 활성화 개체에 직접 액세스할 수 없습니다.예:

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

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

new foobar();

new는 자기정의 오브젝트(오브젝트)의 새로운 인스턴스를 만듭니다.new함수의 범위 또한 다음과 같을 것이다.global(=ㄹ 예요).에서는 '경고하다.undefined ★★★★★★★★★★★★★★★★★」1각각 다음과 같다.교환할 수 있다면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

경고:를 사용하는 것에 주의해 주세요.eval()이 기능은 여러 가지 보안 문제를 일으키기 때문에 무엇을 하고 있는지 모르는 경우에는 권장하지 않습니다.꼭 필요한 경우가 아니면 다른 것을 사용하세요.자세한 내용은 MDN 페이지를 참조하십시오.

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

다음은 예를 제시하겠습니다.

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 객체의 속성이기 때문입니다.

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

이거 드셔보세요.

Javascript에서는 모든 속성이 키 값 쌍이라는 사실을 사용할 수 있습니다.Jandy는 이미 언급했지만, 그의 답변은 그것을 어떻게 이용할 수 있는지 보여주지 않는다고 생각합니다.

일반적으로 변수 이름을 유지하기 위해 변수를 만드는 것이 아니라 변수 이름을 생성한 후 사용합니다.는 PHP를 합니다.$$var자바스크립트

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

123을 나타냅니다.보통 변수를 생성하기 때문에 간접적으로 실행할 수도 있습니다.

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이치노릇을 하다{[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 매우 강하지만 이미 알고 계실 겁니다

이라면 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.literal object는 있지만 값 수 .

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

    var capture = {[varName]}

}

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

여러 Form Data를 즉시 그려야 했고 객체 방식도 잘 작동했습니다.

var forms = {}

그리고 루프에서 사용한 폼 데이터를 생성해야 했습니다.

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

이것은 동적으로 명명된 변수를 내보내야 하는 사용자를 위한 대체 수단입니다.

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

use Object도 좋습니다.

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

이 답변은 받아들여지고 있습니다만, 저는 다음과 같은 의견을 덧붙이고 싶습니다.

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

나는 이것이 몇몇 사람들에게 유용하기를 바란다.

이것은 당신이 php에서 했던 것과 똑같이 할 것입니다.

var a = 1;
var b = 2;
var ccc = 3;
var name = 'a';
console.log( window[name] ); // 1

안 돼, 안 돼. 할 수 없어. 할 방법이 없어.그래서 당신이 이런 일을 할 수 있었다.

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()은 테스트에서 작동하지 않았습니다.그러나 새로운 JavaScript 코드를 DOM 트리에 추가할 수 있습니다.새로운 변수를 추가하는 함수는 다음과 같습니다.

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)

런타임 환경의 글로벌한 this에 의존하지 않는 순수한 javascript 솔루션을 소개합니다.객체 파괴를 사용하여 간단하게 달성할 수 있습니다.

const dynamicVar = (nameValue, value) => {
    const dynamicVarObj = {
        [nameValue]: value
    }
    return dynamicVarObj;
}

const nameToUse = "myVar";
const value = 55;

const { myVar } = dynamicVar(nameToUse, value);

console.log(myVar); // prints 55

가장 간단한 솔루션: 모든 개체에 두 개의 필드(variableName, variableValue)가 있는 개체의 배열을 만듭니다.

let allVariables = [];

for (let i = 0; i < 5; i++)
    allVariables.push({ variableName: 'variable' + i, variableValue: i * 10 });

for (let i = 0; i < allVariables.length; i++)
    console.log(allVariables[i].variableName + ' is ' + allVariables[i].variableValue);

출력:

variable0 is 0
variable1 is 10
variable2 is 20
variable3 is 30
variable4 is 40

console.log(allVariables) json:

 [
    {
        "variableName": "variable0",
        "variableValue": 0
    },
    {
        "variableName": "variable1",
        "variableValue": 10
    },
    {
        "variableName": "variable2",
        "variableValue": 20
    },
    {
        "variableName": "variable3",
        "variableValue": 30
    },
    {
        "variableName": "variable4",
        "variableValue": 40
    }
]

글로벌 개체에 추가하는 대신 항상 이름 공간 생성 및 이름 공간 내 변수 선언을 사용하는 것이 좋습니다.또한 값을 가져오고 설정하는 함수를 만들 수 있습니다.

아래의 코드 스니펫을 참조해 주세요.

//creating a namespace in which all the variables will be defined.
var myObjects={};

//function that will set the name property in the myObjects namespace
function setName(val){
  myObjects.Name=val;
}

//function that will return the name property in the myObjects namespace
function getName(){
  return myObjects.Name;
}

//now we can use it like:
  setName("kevin");
  var x = getName();
  var y = x;
  console.log(y)  //"kevin"
  var z = "y";
  console.log(z); //"y"
  console.log(eval(z)); //"kevin"

이와 유사한 방법으로 여러 변수를 선언하고 사용할 수 있습니다.이렇게 하면 코드 행이 증가하지만 코드가 더 견고하고 오류 발생률이 낮아집니다.

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

반응형