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

JAVASCRIPT / 글쓴이

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

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

답변

객체의 속성 에 액세스하는 방법 에는 두 가지가 있습니다 .

  • 점 표기법 : something.bar
  • 브라켓 표기법 : something['bar']

대괄호 사이의 값은 모든 표현식이 될 수 있습니다. 따라서 속성 이름이 변수에 저장된 경우 대괄호 표기법을 사용해야합니다.

var foo = 'bar';
something[foo];
// both x = something[foo] and something[foo] = x work as expected

답변

이것은 내 솔루션입니다.

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'})

답변

자바 스크립트에서 다음을 사용하여 액세스 할 수 있습니다.

  • 점 표기법- 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

답변

다음은 두 문자열을 연결하여 동적으로 생성 된 속성 이름을 사용하여 객체의 속성에 액세스하는 방법의 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];

이것은 객체의 모든 속성을 반복하도록 확장 될 수 있습니다. for … of …와 같은 최신 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]있지만 중첩되는 것은 복잡합니다. 이미 작성된 코드를 작성하지 말고 사용하는 것이 좋습니다 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 문서에 대한 링크가 있습니다.