JavaScript 속성 액세스 : 점 표기법 대 괄호?

첫 번째 형식은 문자열 리터럴이 아닌 변수를 사용할 수 있다는 명백한 사실 외에 다른 것을 사용하는 이유가 있습니까?

코드에서 :

// Given:
var foo = {'bar': 'baz'};

// Then
var x = foo['bar'];

// vs. 
var x = foo.bar;

컨텍스트 : 이러한 표현식을 생성하는 코드 생성기를 작성했으며 어느 것이 바람직한 지 궁금합니다.

( 여기 에서 출처 )

대괄호 표기법을 사용하면 점 표기법과 함께 사용할 수없는 문자를 사용할 수 있습니다.

var foo = myForm.foo[]; // incorrect syntax
var foo = myForm["foo[]"]; // correct syntax

myForm["ダ"]( 더 많은 예제 ) 에서와 같이 비 ASCII (UTF-8) 문자를 포함 합니다.

둘째, 대괄호 표기법은 예측 가능한 방식으로 다른 속성 이름을 처리 할 때 유용합니다.

for (var i = 0; i < 10; i++) {
  someFunction(myForm["myControlNumber" + i]);
}

모으다:

• 도트 표기법은 쓰기 속도가 빠르고 읽기 쉽습니다.
• 대괄호 표기법을 사용하면 특수 문자가 포함 된 속성에 액세스하고 변수를 사용하여 속성을 선택할 수 있습니다

점 표기법과 함께 사용할 수없는 문자의 또 다른 예는 자체적으로 점이 포함 된 속성 이름입니다 .

예를 들어 json 응답에는이라는 속성이 포함될 수 있습니다 bar.Baz.

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

대괄호 표기법을 사용하면 변수에 저장된 이름으로 속성에 액세스 할 수 있습니다.

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj.x 이 경우에는 작동하지 않습니다.

JavaScript에서 속성에 액세스하는 가장 일반적인 두 가지 방법은 점과 대괄호를 사용하는 것입니다. 둘 다 value.x and value[x]가치가있는 속성에 액세스하지만 반드시 동일한 속성은 아닙니다. 차이점은 x가 해석되는 방식에 있습니다. 점을 사용할 때 점 뒤의 부분은 유효한 변수 이름이어야하며 속성 이름을 직접 지정합니다. 대괄호를 사용할 때 대괄호 사이의 표현식은 특성 이름을 가져 오도록 평가됩니다. value.x는“x”라는 이름의 속성을 가져 오는 반면, value [x]는 표현식 x를 평가하고 그 결과를 속성 이름으로 사용합니다.

따라서 관심있는 부동산의 이름을 "길이"라고하면이라고 말합니다 value.length. 변수에 포함 된 값으로 명명 된 속성을 추출하려면 i다음과 같이 말합니다 value[i]. 그리고 속성 이름은 임의의 문자열이 될 수 있으므로 “2”또는 이름이 지정된 속성에 액세스 “John Doe”하려면 대괄호를 사용해야합니다 value[2] or value["John Doe"]. “2” nor “John Doe”유효한 변수 이름이 아니므로 점 표기법을 통해 액세스 할 수 없으므로 속성의 정확한 이름을 미리 알고있는 경우에도 마찬가지 입니다.

배열의 경우

배열의 요소는 속성에 저장됩니다. 이러한 속성의 이름은 숫자이므로 변수에서 이름을 가져와야하는 경우가 많으므로 대괄호 구문을 사용하여 액세스해야합니다. 배열의 길이 속성은 얼마나 많은 요소가 포함되어 있는지 알려줍니다. 이 속성 이름은 유효한 변수 이름이며, 그 이름을 미리 알고 있으므로 배열의 길이를 찾으려면 일반적으로 array.length쓰기보다 쉽기 때문에 씁니다 array["length"].

Internet Explorer 8의 일부 키워드 (예 : new및 class)에서는 점 표기법이 작동하지 않습니다 .

나는이 코드를 가지고 있었다 :

//app.users is a hash
app.users.new = {
  // some code
}

그리고 이것은 두려운 "예상 식별자"를 유발합니다 (적어도 Windows XP의 IE8에서는 다른 환경을 시도하지 않았습니다). 이를위한 간단한 수정은 대괄호 표기법으로 전환하는 것입니다.

app.users['new'] = {
  // some code
}

다음 표기법을 사용할 때주의하십시오. 예를 들어. 창의 부모에 존재하는 함수에 액세스하려면 IE에서 :

window['parent']['func']

같지 않다

window.['parent.func']

우리는 다음 중 하나를 사용할 수 있습니다.

window['parent']['func'] 

또는

window.parent.func 

그것에 접근

일반적으로, 그들은 같은 일을합니다.
그럼에도 불구하고 대괄호 표기법은 도트 표기법으로 할 수없는 일을 할 수있는 기회를 제공합니다.

var x = elem["foo[]"]; // can't do elem.foo[];

특수 문자를 포함하는 모든 속성으로 확장 할 수 있습니다.

속성 이름에 특수 문자가있는 경우 대괄호를 사용해야합니다.

var foo = {
    "Hello, world!": true,
}
foo["Hello, world!"] = false;

그 외에는 맛의 문제라고 생각합니다. IMHO, 도트 표기법이 더 짧고 배열 요소가 아닌 속성임을 분명히 알 수 있습니다 (물론 JavaScript에는 연관 배열이 없습니다).

대괄호 표기법은 변수를 사용할 수 있으므로 점 표기법이 작동하지 않는 두 가지 경우에 유용합니다.

1) 속성 이름이 동적으로 결정될 때 (정확한 이름이 런타임까지 알려지지 않은 경우)

2) for..in 루프를 사용하여 객체의 모든 속성을 살펴볼 때.

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

다음과 같은 경우 대괄호 표기법을 사용해야합니다.

1. 속성 이름은 숫자입니다.

   var ob = {
     1: 'One',
     7 : 'Seven'
   }
   ob.7  // SyntaxError
   ob[7] // "Seven"

2. 속성 이름에는 특수 문자가 있습니다.

   var ob = {
     'This is one': 1,
     'This is seven': 7,
   }  
   ob.'This is one'  // SyntaxError
   ob['This is one'] // 1

3. 특성 이름이 변수에 지정되며이 변수로 특성 값에 액세스하려고합니다.

   var ob = {
     'One': 1,
     'Seven': 7,
   }
   
   var _Seven = 'Seven';
   ob._Seven  // undefined
   ob[_Seven] // 7

케이스 []표기가 도움이된다 :

객체가 동적이고 키 number및 []/ 또는 기타 특수 문자 와 같은 키에 임의의 값이있을 수있는 경우

var a = { 1 : 3 };

이제는 a.1문자열을 기대하고 있기 때문에 오류를 통해 액세스하려고 하면 오류가 발생합니다.

점 표기법이 항상 바람직합니다. "스마트 한"IDE 또는 텍스트 편집기를 사용하는 경우 해당 개체에서 정의되지 않은 이름이 표시됩니다. 이름이 대시 또는 이와 유사한 이름이 아닌 경우에만 대괄호 표기법을 사용하십시오. 또한 이름이 변수에 저장된 경우.

대괄호 표기법의 사용 사례를 더 추가하겠습니다. x-proxy객체 의 속성에 액세스하려면 -잘못 해석됩니다. 그것들은 공간, 도트 등과 같은 다른 경우들인데, 도트 연산이 도움이되지 않습니다. 또한 u에 변수에 키가있는 경우 객체의 키 값에 액세스하는 유일한 방법은 대괄호 표기법입니다. 더 많은 맥락을 얻으시기 바랍니다.

도트 표기법이 실패하는 예

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "😎":'😴',
   "a[]":[ 
      2,
      2
   ]
};

// correct
console.log(json['value:']);
console.log(json['help"']);
console.log(json["help\""]);
console.log(json['hello\'']);
console.log(json["hello'"]);
console.log(json["data+"]);
console.log(json["😎"]);
console.log(json["a[]"]);

// wrong
console.log(json.value:);
console.log(json.help");
console.log(json.hello');
console.log(json.data+);
console.log(json.😎);
console.log(json.a[]);

속성 이름은 자바 스크립트의 구문 규칙을 방해하지 않아야합니다. json.property_name