Преимущество использования нотации в виде скобок (с переменными) для доступа к объекту объекта

Question

При использовании альтернатив, таких как оператор-точка, имеет смысл, когда вам нужно получить доступ к некоторой сохраненной информации, я немного затрудняюсь понять, почему и в какие сценарии мы будем использовать переменные для выполнения одной и той же задачи.

Например:

var myObj = { 
    prop1: "val1", 
    prop2: "val2" 
}; 
var prop1val = myObj.prop1; // val1 
var prop2val = myObj.prop2; // val2 

против:

var testObj = { 

    12: "Namath", 
    16: "Montana", 
    19: "Unitas" 
}; 

var playerNumber = 16;  
var player = testObj[playerNumber]; 

Является ли это просто вопрос предпочтения, или есть реальные преимущества использования каждого из них?

Answer 1

Синтаксис скобок позволяет динамически обращаться к именам свойств, тогда как синтаксис точек не имеет. Вот пример того, как он может быть использован:

var data = { 
 
    prop1: "I am prop 1", 
 
    prop2: "I am prop 2" 
 
}; 
 
function clickHandler() { 
 
    var prop = this.getAttribute("data-property"); 
 
    console.log(data[prop]); // <-- Dynamically access object properties with [] syntax 
 
} 
 

 
var buttons = document.querySelectorAll("[data-property]"); 
 
for (var i = 0; i < buttons.length; i++) { 
 
    var button = buttons[i]; 
 
    button.addEventListener("click", clickHandler); 
 
}

<button data-property="prop1">Get Prop 1</button> 
 
<button data-property="prop2">Get Prop 2</button>

синтаксиса Кронштейн также позволяет вам возможность использовать свойства объекта, которые в противном случае недопустимые имена переменных (которые не рекомендуется, но это выполнимо).

Например:

var data = { 
 
    "property name with spaces": "I'm a property with spaces", 
 
    "another-invalid-variable-name": "I'm an invalid variable name" 
 
}; 
 
console.log(data["property name with spaces"]) 
 
console.log(data["another-invalid-variable-name"])

Answer 2

Синтаксис индекса является более гибким, чем точечная нотация в нескольких направлениях. В вашем собственном примере выполнение некоторых из следующих операций, очевидно, невозможно:

var playerNumber = 16; 
var player = testObj.playerNumber; //null; this is equivalent to: 
var player = testObj["playerNumber"]; //which is subscripting by the string "playerNumber" 
var player = testObj[playerNumber]; //this is valid and produces the expected result: subscripting with the value 16 

Точка обозначение ограниченно тем, что она не может быть использована с переменными, имеющими динамическими значениями. testObj.playerNumber совсем не то же самое, что и testObj[playerNumber].

Answer 3

Синтаксис кронштейна является динамическим. Он обычно используется для коллекций, таких как списки, массивы, словари и т. Д. Обозначение периодов более полезно для неистребимых полей, методов и всего остального, к которым вы, возможно, захотите получить доступ из класса.

Например, вы могли бы перебрать список с

var aggregate; 
for (int i = 0; i < arrayOfNumbers.length; i++){ 
    aggregate += arrayOfNumbers[i]; 
} 

Answer 4

Одна вещь, которая отличает их в том, что с помощью точечной нотации, вы должны уже знать свойство, которое вы хотите получить доступ.

Рассмотрим случай, когда вы можете захотеть, чтобы получить ввод данных пользователем или какой-либо другой внешний фактор, чтобы решить, какое свойство получить:

function myFunction(property) { 

    var data = { 
     thingOne: "1", 
     thingTwo: "2" 
    } 

    return data[property]; 
} 

В приведенной выше функции, один не мог писать return data.property - это будет выглядеть для свойство называется property! Для получения правильного значения вам придется использовать индексную нотацию.

Answer 5

Обычно это зависит от предпочтений, однако мне нравится использовать обозначения в виде скобок для массивов и точечные обозначения для объектов. Однако, если на объекте есть объект с тире, можно использовать только скобку.

foo = { "bar-baz": "value" }; 
foo["bar-baz"]; //returns "value" 
foo.bar-baz; //error