변수를 사용하여 객체 속성에 동적으로 액세스

변수를 사용하여 객체 속성에 동적으로 액세스

동적 이름을 사용하여 개체의 속성에 액세스하려고 합니다.이게 가능합니까?

const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"

오브젝트 속성에 액세스하는 방법에는 다음 두 가지가 있습니다.

• 표기법: " " " "something.bar
• 표기법: " " " "something['bar']

각 괄호 사이의 값은 임의의 식입니다.따라서 속성 이름이 변수에 저장되어 있는 경우 대괄호 표기법을 사용해야 합니다.

var something = {
  bar: 'foo'
};
var foo = 'bar';

// both x = something[foo] and something[foo] = x work as expected
console.log(something[foo]);
console.log(something.bar)

제 솔루션은 다음과 같습니다.

function resolve(path, obj) {
    return path.split('.').reduce(function(prev, curr) {
        return prev ? prev[curr] : null
    }, obj || self)
}

사용 예:

resolve("document.body.style.width")
// or
resolve("style.width", document.body)
// or even use array indexes
// (someObject has been defined in the question)
resolve("part.0.size", someObject) 
// returns null when intermediate properties are not defined:
resolve('properties.that.do.not.exist', {hello:'world'})

javascript에서는 다음 항목에 액세스할 수 있습니다.

• 표기법 - " " " - "foo.bar
• - ''-'-foo[someVar] ★★★★★★★★★★★★★★★★★」foo["string"]

단, 두 번째 케이스만이 동적으로 속성에 액세스할 수 있습니다.

var foo = { pName1 : 1, pName2 : [1, {foo : bar }, 3] , ...}

var name = "pName"
var num  = 1;

foo[name + num]; // 1

// -- 

var a = 2;
var b = 1;
var c = "foo";

foo[name + a][b][c]; // bar

다음으로 2개의 문자열을 연결하여 동적으로 생성된 속성 이름을 사용하여 객체의 속성에 액세스하는 ES6 예를 나타냅니다.

var suffix = " name";

var person = {
    ["first" + suffix]: "Nicholas",
    ["last" + suffix]: "Zakas"
};

console.log(person["first name"]);      // "Nicholas"
console.log(person["last name"]);       // "Zakas"

이를 계산 속성 이름이라고 합니다.

당신은 이것을 꽤 다양한 방법으로 달성할 수 있다.

let foo = {
    bar: 'Hello World'
};

foo.bar;
foo['bar'];

괄호 표기법은 변수를 기반으로 속성에 액세스할 수 있으므로 특히 강력합니다.

let foo = {
    bar: 'Hello World'
};

let prop = 'bar';

foo[prop];

이는 객체의 모든 속성을 루프하는 것으로 확장될 수 있습니다.이는 ...의 ...용과 같은 새로운 JavaScript 구조 때문에 중복되어 보일 수 있지만, 사용 사례를 설명하는 데 도움이 됩니다.

let foo = {
    bar: 'Hello World',
    baz: 'How are you doing?',
    last: 'Quite alright'
};

for (let prop in foo.getOwnPropertyNames()) {
    console.log(foo[prop]);
}

점 표기법과 괄호 표기법 모두 중첩된 객체에 대해 예상대로 작동합니다.

let foo = {
    bar: {
        baz: 'Hello World'
    }
};

foo.bar.baz;
foo['bar']['baz'];
foo.bar['baz'];
foo['bar'].baz;

오브젝트 파괴

오브젝트 내의 속성에 액세스하는 수단으로 오브젝트 파괴를 고려할 수도 있지만 다음과 같습니다.

let foo = {
    bar: 'Hello World',
    baz: 'How are you doing?',
    last: 'Quite alright'
};

let prop = 'last';
let { bar, baz, [prop]: customName } = foo;

// bar = 'Hello World'
// baz = 'How are you doing?'
// customName = 'Quite alright'

Lodash get을 사용하여 이렇게 할 수 있습니다.

_.get(object, 'a[0].b.c');

갱신했다

내의 할 수 .obj[variable]하지만 네스트되는 것은 일을 복잡하게 만든다. 않도록 위해, 저는 미미 not not미 i i i i i i i i i i i 。lodash.get.

예

// Accessing root property
var rootProp = 'rootPropert';
_.get(object, rootProp, defaultValue);

// Accessing nested property
var listOfNestedProperties = [var1, var2];
_.get(object, listOfNestedProperties);

Lodash get은 문서 lodash.get 등 다양한 방법으로 사용할 수 있습니다.

오브젝트 속성의 「주소」를 다른 함수에 데이터로서 전달해, 오브젝트를 (AJAX로) 채우고, 주소 배열로부터 룩업을 실시해, 그 외의 함수로 표시하고 싶다고 생각한 케이스가 있습니다.현악 곡예를 하지 않으면 도트 표기법을 사용할 수 없기 때문에, 그 대신 어레이를 통과시키는 것이 좋다고 생각했습니다.어쨌든 다른 일을 하게 되었지만, 이 포스트와 관련된 것 같습니다.

다음은 제가 원하는 데이터와 같은 언어 파일 개체의 예입니다.

const locs = {
  "audioPlayer": {
    "controls": {
      "start": "start",
      "stop": "stop"
    },
    "heading": "Use controls to start and stop audio."
  }
}

언어 텍스트에 액세스하기 위해 ["audioPlayer", "controls", "stop" 등의 배열을 전달하고 싶었습니다.이 경우는 "stop"입니다.

이 작은 함수는 "최소한의" 주소 매개 변수(첫 번째)를 검색하고 반환된 개체를 자신에게 재할당합니다.다음으로 가장 고유성이 높은 주소 파라미터가 존재하는 경우 이를 조회할 수 있습니다.

function getText(selectionArray, obj) {
  selectionArray.forEach(key => {
    obj = obj[key];
  });
  return obj;
}

사용방법:

/* returns 'stop' */
console.log(getText(["audioPlayer", "controls", "stop"], locs)); 

/* returns 'use controls to start and stop audio.' */
console.log(getText(["audioPlayer", "heading"], locs)); 

ES5 // 완전 중첩 변수 확인

이 간단한 코드 조각은 도중에 각 변수를 확인할 필요 없이 깊이 중첩된 변수/값의 존재를 확인할 수 있습니다.

var getValue = function( s, context ){
    return Function.call( context || null, 'return ' + s )();
}

예 - 깊이 중첩된 개체 배열:

a = [ 
    {
      b : [
          {
             a : 1,
             b : [
                 {
                    c : 1,
                    d : 2   // we want to check for this
                 }
             ]
           }
      ]
    } 
]

대신:

if(a && a[0] && a[0].b && a[0].b[0] && a[0].b[0].b && a[0].b[0].b[0] && a[0].b[0].b[0].d && a[0].b[0].b[0].d == 2 )  // true

다음과 같은 작업을 할 수 있습니다.

if( getValue('a[0].b[0].b[0].d') == 2 ) // true

건배!

이미 '점'과 '사각형' 구문을 언급했기 때문에 마찬가지로 함수에 대한 접근과 파라미터 전송에 대해 설명하고자 합니다.

코드 jsfiddle

var obj = {method:function(p1,p2,p3){console.log("method:",arguments)}}

var str = "method('p1', 'p2', 'p3');"

var match = str.match(/^\s*(\S+)\((.*)\);\s*$/);

var func = match[1]
var parameters = match[2].split(',');
for(var i = 0; i < parameters.length; ++i) {
  // clean up param begninning
    parameters[i] = parameters[i].replace(/^\s*['"]?/,'');
  // clean up param end
  parameters[i] = parameters[i].replace(/['"]?\s*$/,'');
}

obj[func](parameters); // sends parameters as array
obj[func].apply(this, parameters); // sends parameters as individual values

특성에 동적으로 액세스하려면 대괄호를 사용하십시오. []음음음같 뭇매하다

const something = { bar: "Foobar!" };
const userInput = 'bar';
console.log(something[userInput])

문제

그 솔루션에는 중요한 고치야가 있습니다! (다른 답변이 아직 이 문제를 제기하지 않은 것이 놀랍습니다.)대부분의 경우 자신이 해당 개체에 추가한 속성에만 액세스하고 상속된 속성을 가져오기를 원하지 않습니다.

여기 이 문제의 예가 있습니다.여기 순진해 보이는 프로그램이 있는데, 미묘한 버그가 있어요. 알 수 있겠어요?

const agesOfUsers = { sam: 16, sally: 22 }
const username = prompt('Enter a username:')
if (agesOfUsers[username] !== undefined) {
  console.log(`${username} is ${agesOfUsers[username]} years old`)
} else {
  console.log(`${username} is not found`)
}

"toString is function toString() { [ native code ]} }년" 입니다.는 문는 the the the the the theagesOfUsers오브젝트이기 .toString()기본 오브젝트 클래스에서 가져옵니다.모든 개체가 상속하는 속성의 전체 목록을 여기에서 찾을 수 있습니다.

솔루션

1. 대신 Map 데이터 구조를 사용하십시오.지도에 저장된 콘텐츠는 프로토타입 문제로 인해 문제가 발생하지 않기 때문에 이 문제에 대한 깨끗한 해결책을 제공합니다.

const agesOfUsers = new Map()
agesOfUsers.set('sam', 16)
agesOfUsers.set('sally', 2)
console.log(agesOfUsers.get('sam')) // 16

  

2. 기본 프로토타입 대신 Null 프로토타입이 있는 객체를 사용합니다.하시면 됩니다.Object.create(null)그런 오브젝트를 만듭니다.이러한 개체는 아무런 상속도 받지 않는 방식으로 명시적으로 생성되었기 때문에 이러한 프로토타입 문제로 인해 문제가 발생하지 않습니다.

const agesOfUsers = Object.create(null)
agesOfUsers.sam = 16
agesOfUsers.sally = 22;
console.log(agesOfUsers['sam']) // 16
console.log(agesOfUsers['toString']) // undefined - toString was not inherited

  

3. 있는 적어도 숫자 상속된하지 않는 있는 는, 을 사용할 수 .Object.hasOwn(yourObj, attrName)대신 액세스 중인 특정 동적 키가 실제로 상속된 키인지 여부를 확인합니다(자세한 내용은 여기를 참조하십시오).이것은 비교적 새로운 기능이기 때문에, 코드에 드롭 하기 전에 호환성 테이블을 확인해 주세요.전에Object.hasOwn(yourObj, attrName)같은 효과를 얻을 수 있습니다.Object.prototype.hasOwnProperty.call(yourObj, attrName). 가끔 코드 표시는 다음과 같습니다.yourObj.hasOwnProperty(attrName)그것도 가끔은 먹히지만 여기서 읽을 수 있는 함정이 있습니다.

// Try entering the property name "toString",
// you'll see it gets handled correctly.
const user = { name: 'sam', age: 16 }
const propName = prompt('Enter a property name:')
if (Object.hasOwn(user, propName)) {
  console.log(`${propName} = ${user[propName]}`)
} else {
  console.log(`${propName} is not found`)
}

얼마 전에 이 주제에 대해 비슷한 질문을 했습니다.그리고 과도한 조사 끝에, 많은 정보가 누락되어 있는 것을 보고, 이 오래된 포스트에 뭔가 가치 있는 것을 덧붙일 수 있다고 느꼈습니다.

• 먼저 속성 값을 취득하여 동적 변수에 저장할 수 있는 몇 가지 방법이 있다는 점을 설명하고 싶습니다.IMHO의 가장 인기 있고 쉬운 첫 번째 방법은 다음과 같습니다.

let properyValue = element.style['enter-a-property'];

하지만 스타일시트를 통해 할당된 속성 값에는 적용되지 않기 때문에 이 경로를 거의 사용하지 않습니다.예를 들면, 약간의 의사 코드를 사용해 보겠습니다.

 let elem = document.getElementById('someDiv');
 let cssProp = elem.style['width'];

위의 코드 예를 사용하여 'elem' 변수에 저장된 div 요소의 폭 속성이 HTML 태그 내에서 스타일링되지 않고 CSS 스타일 시트로 스타일링된 경우 cssProp 변수 내에 저장된 정의되지 않은 반환값을 얻을 수 있습니다.정의되지 않은 값은 올바른 값을 얻으려면 CSS 스타일시트 내에 기록된 코드를 순서대로 계산해야 하기 때문에 발생합니다.따라서 스타일시트 내에 있는 값이 있는 속성 값을 계산하는 방법을 사용해야 합니다.

• 이후 getComputedStyle() 메서드!

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

W3Schools getComputedValue Doc 이것은 좋은 예를 제시해 주고 있습니다.다만, 이 링크 Mozilla CSS getComputedValue 문서는 getComputedValue 함수에 대해 자세히 설명하고 있습니다.이 주제에 대해 잘 모르는 개발자가 읽어주세요.

• 참고로 getComputedValue 메서드는 getComputedValue만 얻을 뿐 설정되지는 않습니다.이것은 분명히 큰 단점이지만, 표준 Javascript는 아니지만 CSS 스타일시트에서 파생되어 값을 설정하는 방법이 있습니다.JQuery 메서드...

$(selector).css(property,value)

...받기도 하고, 잡히기도 한다.JQuery를 알아야 한다는 것이 단점이지만, 이것이 바로 모든 Javascript 개발자가 JQuery를 배워야 하는 좋은 이유 중 하나입니다.이러한 방법은 표준 Javascript에서는 사용할 수 없습니다.누군가에게 도움이 되길 바랍니다!!!

네스트된 변수의 값을 설정하는 방법은 다음과 같습니다.

const _ = require('lodash'); //import lodash module

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c);
// => 4

문서: https://lodash.com/docs/4.17.15#set

또한 값을 얻고 싶은 경우 다음 문서를 참조하십시오.https://lodash.com/docs/4.17.15#get 를 참조해 주세요.

할 수 .bracket notationobj[yourKey] 그러나 javascript 객체는 실제로 동적으로 업데이트되거나 읽히도록 설계되지 않았습니다.초기화 시 정의하도록 의도되어 있습니다.

및 key value대신 지도를 사용해야 합니다.

const yourKey = 'yourKey';

// initialise it with the value
const map1 = new Map([
  ['yourKey', 'yourValue']
]);

// initialise empty then dynamically assign
const map2 = new Map();
map2.set(yourKey, 'yourValue');

console.log(map1.get(yourKey));
console.log(map2.get(yourKey));

참조에 의한 오브젝트 검색(문자열 없음), 전달한 오브젝트가 클론임을 확인합니다.그 경우 lodash에서 cloneDeep를 사용합니다.

물체가 처럼 보이는 경우

const obj = {data: ['an Object',{person: {name: {first:'nick', last:'gray'} }]

경로는 다음과 같습니다.

const objectPath = ['data',1,'person',name','last']

그런 다음 아래 메서드를 호출하면 지정된 경로에 따라 하위 개체를 반환합니다.

const child = findObjectByPath(obj, objectPath)
alert( child) // alerts "last"


const findObjectByPath = (objectIn: any, path: any[]) => {
    let obj = objectIn
    for (let i = 0; i <= path.length - 1; i++) {
        const item = path[i]
        // keep going up to the next parent
        obj = obj[item] // this is by reference
    }
    return obj
}

하시면 됩니다.getter

getter 문서

오브젝트 내부에 문제의 속성이 존재하는지 여부를 확인하고 존재하지 않으면 창에서 가져옵니다.

const something = {
    get: (n) => this.n || something.n || window[n]
};

하면 됩니다.JSON.parsehttps://www.w3schools.com/js/js_json_parse.asp 를 참조해 주세요.

const obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}')
console.log(obj.name)
console.log(obj.age)

언급URL : https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable