JavaScript назначение объекта недвижимости

Question

На этой странице ->https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

"После создания, свойства объекта можно снова получить доступ в одном из двух способов:.

obj.name = "Simon"; 
var name = obj.name; 

obj["name"] = "Simon"; 
var name = obj["name"]; 

Это также семантически эквивалентно Второй метод имеет то преимущество, что имя свойства предоставляется в виде строки, что означает, что он может быть рассчитан во время выполнения, хотя использование этого метода предотвращает применение некоторых механизмов JavaScript и оптимизаторов minifier. "

(IN BOLD) Почему второй способ лучше? Что такое оптимизация JavaScript и minifier?

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация

Answer 1

Второе не так «лучше», но безопаснее, поскольку оно позволяет использовать свойства с нетрадиционными символами. Например:

obj.my-property = true; //parse errror 
obj['my-property'] = true; //fine, because property name specified as string 

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

var prop_name = 'foo'; 
prop_name += 'bar'; 
obj[prop_name] = true; 

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

var str = "hello"; 

Даже если вы уменьшили свой скрипт, вы хотите, чтобы ваша строка оставалась «привет».

Так минификация двигатель может превратить

obj.foobar = true; 

в

a.b=true; 

Но это не изменило бы

obj['foobar'] = true; 

в

a['b']=true; 

Answer 2

Второй метод позволяет динамически создавать имя во время выполнения:

// something passed in to the context 
var name = firstName + "_name"; 

obj[name] = "some value"; 

Это также поддерживает символы (например, дефис -), которые не поддерживаются в коде JavaScript:

obj["some-value"] = "some value"; 

И так строковых литералов не будут тронуты минификация инструментов, "name" не будет минимизирован, но name может быть:

obj.name = "value"; 
obj.name = "another value": 

// after minification: 
obj.n = "value"; 
obj.n = "another value"; 

Принимая во внимание, что это не будет касаться:

obj["name"] = "value"; 
obj["name"] = "another value"; 

Answer 3

Это не лучше, это просто более гибким. Рассмотрим это:

var objects = [ 
    { 
    x: 2, 
    y: 3 
    }, 
    { 
    x: 32, 
    y: 64 
    }, 
    ... 
]; 

var sum = 0; 
for (var i = 0, len = objects.length; i < len; i++) { 
    var property; 
    if (i % 2 == 0) { 
    property = 'x'; 
    } else { 
    property = 'y'; 
    } 
    sum += objects[i][property]; 
} 

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

Answer 4

Второй метод позволяет имен, которые, как правило, бросают ошибку:

var obj = {} 

//setting 
obj.hyphenated-name = 'foo' //throws error 
obj['hyphenated-name'] = 'foo' //works 

//getting 
obj.hyphenated-name //NaN or Undefined depending on your environment 
obj['hyphenated-name'] //'foo' 

Answer 5

Первый метод можно рассматривать «синтаксический сахар» для второго метода.

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

Примером того, когда вы можете найти это полезным, было бы при попытке избежать смехотворно длинных коммутационных шкафов (if, if-else, if-else, else и т. Д.).

Вы можете избежать этого, используя хэш-карту, например, так:

function getFav(name) { 
    var favoriteColors = { 
    "bob": "red", 
    "jim": "blue", 
    "ana": "red", 
    "sue": "purple" 
    }; 
    // Here we use the second accessor method, 
    // if 'name' is not inside the favoriteColors, we short-circuit to 'unknown' 
    return favoriteColors[name] || "unknown"; 
} 

getFav("bob"); // "red" 
getFav("ana"); // "red" 
getFav("sue"); // "purple" 
getFav("dan"); // "unknown"