В JavaScript, когда использовать объект буквального и когда использовать массив?
-
12-10-2019 - |
Вопрос
Вот образец. Меня беспокоит оба, кажется, выполняют работу. Какие из них предпочтет?
var fooArr = [{ "bar": {"blah": 9 } }];
for(var i in fooArr) {
var value = fooArr[i].bar.blah;
console.log(value); //checking in firebug console
}
var fooObj = { "bar": {"blah": 9 } };
for(var i in fooObj) {
var value = fooObj[i].blah;
console.log(value); //checking in firebug console
}
Кроме того, следующее, по -видимому, не является действительным, каким -либо способом избежать обозначения массива.
var fooObj1 = {
{ "bar": { "blah": 9 } },
{ "bar": { "blah": 4 } },
{ "bar": { "blah":12} }
};
Поэтому мне пришлось изменить приведенный выше код на что -то вроде ниже, которое работает. Слишком ли слишком плохо, чтобы быть слишком большим липким с объектными литералами
var fooObj1 = {
1:{ "bar": { "blah": 9 } },
2:{ "bar": { "blah": 4 } },
3:{ "bar": { "blah":12} }
};
Еще раз спасибо и заранее тем, кто помогает мне с запросом.
Решение
Образец на самом деле не сравнивает объекты и массивы. Вы просто добавляете ненужный слой, положив объект в первый элемент массива.
Используйте объект, когда вам нужно ссылаться на что -то по имени.
var obj = {}
// 3 способа сделать то же самое:
var obj.newName = 'bob';
var obj['newName'] = 'bob';
var name = 'newName';
var obj[name] = 'bob';
Второй стиль на самом деле не нужен и может быть на самом деле медленнее, чем 1 -й, но он помогает вам понять, как может быть 3 -й. Или вы могли бы сделать следующее прямо:
var obj = { newName:'bob' }
Если вы хотите кучу имен в объекте, это стало бы немного глупо:
var obj = { newName:'bob', anotherNewName:'sue', yetAnotherNewName:'billy' }
obj.newName === 'bob'
obj.anotherNewName === 'sue'
//etc...
Вот для чего нужны массивы.
var listOfNewNames = ['bob','sue','billy']
listOfNewNames[0] === 'bob'
listOfNewNames[1] === 'sue'
//etc...
Конечно, ничто не мешает вам назначить массив объектному свойству:
obj { listOfNewNames:['bob','sue','billy'] }
obj.listOfNewNames[0] === 'bob'
Или, как показано выше, несколько объектов в массиве:
var listOfMonsters = [
{ monsterName:'Grarrr',eats:'people' },
{ monsterName:'Wadsworth',eats:'other monsters'}
];
listOfMonsters[1].monsterName === 'Wadsworth'
Объекты, как правило, больше о сохранении групп сопутствующих значений и методов вместе для простоты ссылки. Массивы - это всего лишь список вещей, которые, как правило, можно предположить, к тому же.
Другие советы
А for .. in
Цивя итерации над перечисленными. Вы можете захотеть прочитать в теме.
Если у вас есть множество объектов, я бы предложил традиционный for
петля:
var fooObjs = [ {bar: "blah"}, {bar: "blah2"} ];
for (var i = 0, j = fooObj.length; i < j; i++) {
console.log(fooObjs[i].bar);
}
Если у вас есть объект с несколькими свойствами, то вы можете использовать for .. in
петля:
var fooObj = { bar: "blah", baz: "blah2" };
for (var i in fooObj) {
if (fooObj.hasOwnProperty(i)) { // So you don't log prototype properties
console.log(fooObj[i]);
}
}
Используйте массив, когда вы знаете, у вас будет более одного объекта. Один массив элементов не нужен, когда будет использоваться только один объект.
Как видите, синтаксис также немного сложнее (у вас есть [...]
а также bar
При использовании массивов -> используется больше символов), поэтому не используйте его, если вам не нужно.
Используйте массив, если вам нужны списки и используйте объекты, если вам нужны свойства.
В приведенном выше случае я бы предпочел последний.
Кроме того, никогда не используйте for in
на массиве (это очень медленно и побеждает цель) и всегда используйте hasOwnProperty
Когда итерация над свойствами объекта.
Вы используете массив, когда вам нужно использовать более одного элемента. Пример:
var fooArr = [{ bar: { blah: 9 } },{ bar: { blah: 4 } },{ bar: { blah: 12 } }];
for(var i in fooArr) {
var value = fooArr[i].bar.blah;
console.log(value); // will log "9", "4" and "12"
}
Во втором примере у вас есть только один объект, поэтому вам вообще не нужна петля, чтобы получить доступ к свойству:
var fooObj = { bar: { blah: 9 } };
var value = fooObj.bar.blah;
console.log(value);