Задачи
Первый объект
важность: 3
Мини-задача на синтаксис объектов. Напишите код, по строке на каждое действие.
1.Создайте пустой объект user.
2.Добавьте свойство nameсо значением Вася.
3.Добавьте свойство surnameсо значением Петров.
4.Поменяйте значение nameна Сергей.
5.Удалите свойство nameиз объекта.
Крешению
Объекты: перебор свойств
Для перебора всех свойств из объекта используется цикл по свойствам for..in. Эта синтаксическая конструкция отличается от рассмотренного ранее цикла for(;;).
for..in
Синтаксис:
for (key in obj) {
/* ... делать что то с obj[key] ... */
}
При этом for..inпоследовательно переберёт свойства объекта obj, имя каждого свойства будет записано в keyи вызвано тело цикла.
Объявление переменной в цикле for (var key in obj)
Вспомогательную переменную keyможно объявить прямо в цикле:
for (var key in menu) {
// ...
}
Так иногда пишут для краткости кода. Можно использовать и любое другое название, кроме key,
например for(var propName in menu).
Пример итерации по свойствам:
var menu = { width: 300, height: 200, title: "Menu"
};
for (var key in menu) {
//этот код будет вызван для каждого свойства объекта
//..и выведет имя свойства и его значение
alert( "Ключ: " + key + " значение:" + menu[key] );
}
Обратите внимание, мы использовали квадратные скобки menu[key]. Как уже говорилось, если имя свойства хранится в переменной, то обратиться к нему можно только так, не через точку.
Количество свойств в объекте
Как узнать, сколько свойств хранит объект?
Готового метода для этого нет.
Самый кросс-браузерный способ — это сделать цикл по свойствам и посчитать, вот так:
var menu = { width: 300, height: 200, title: "Menu"
};
var counter = 0;
for (var key in menu) { counter++;
}
alert( "Всего свойств: " + counter );
Вследующих главах мы пройдём массивы и познакомимся с другим, более коротким, вызовом:
Object.keys(menu).length.
Вкаком порядке перебираются свойства?
Для примера, рассмотрим объект, который задаёт список опций для выбора страны:
var codes = {
//телефонные коды в формате "код страны": "название" "7": "Россия", "38": "Украина",
//..,
"1": "США" };
Здесь мы предполагаем, что большинство посетителей из России, и поэтому начинаем с 7, это
зависит от проекта.
При выборе телефонного кода мы хотели бы предлагать варианты, начиная с первого. Обычно на основе списка генерируется select, но здесь нам важно не это, а важно другое.
Правда ли, что при переборе for(key in codes)ключи keyбудут перечислены именно в том порядке, в котором заданы?
По стандарту — нет. Но некоторое соглашение об этом, всё же, есть.
Соглашение говорит, что если имя свойства — нечисловая строка, то такие ключи всегда перебираются в том же порядке. Так получилось по историческим причинам и изменить это сложно: поломается много готового кода.
С другой стороны, если имя свойства — число, то все современные браузеры сортируют такие свойства в целях внутренней оптимизации.
К примеру, рассмотрим объект с заведомо нечисловыми свойствами:
var user = { name: "Вася",
surname: "Петров" };
user.age = 25;
// порядок перебора соответствует порядку присвоения свойства for (var prop in user) {
alert( prop ); // name, surname, age
}
А теперь — что будет, если перебрать объект с кодами?
var codes = {
// телефонные коды в формате "код страны": "название" "7": "Россия", "38": "Украина", "1": "США"
};
for (var code in codes) alert( code ); // 1, 7, 38
При запуске этого кода в современном браузере мы увидим, что на первое место попал код США!
Нарушение порядка возникло, потому что ключи численные. Интерпретатор JavaScript видит, что строка на самом деле является числом и преобразует ключ в немного другой внутренний формат. Дополнительным эффектом внутренних оптимизаций является сортировка.
А что, если мы хотим, чтобы порядок был именно таким, какой мы задали?
Это возможно. Можно применить небольшой хак, который заключается в том, чтобы сделать все ключи нечисловыми, например, добавим в начало дополнительный символ '+':
var codes = { "+7": "Россия", "+38": "Украина", "+1": "США"
};
for (var code in codes) { var value = codes[code];
code = +code; // ..если нам нужно именно число, преобразуем: "+7" > 7
alert( code + ": " + value ); // 7, 38, 1 во всех браузерах
}
Итого
●Цикл по ключам: for (key in obj).
●Порядок перебора соответствует порядку объявления для нечисловых ключей, а числовые — сортируются (в современных браузерах).
●Если нужно, чтобы порядок перебора числовых ключей соответствовал их объявлению в объекте, то используют трюк: числовые ключи заменяют на похожие, но содержащие не только цифры. Например, добавляют в начало +, как описано в примере выше, а потом, в процессе обработки, преобразуют такие ключи в числа.
Задачи
Определите, пуст ли объект
важность: 5
Создайте функцию isEmpty(obj), которая возвращает true, если в объекте нет свойств и false— если хоть одно свойство есть.
Работать должно так:
function isEmpty(obj) { /* ваш код */
}
var schedule = {};
alert( isEmpty(schedule) ); // true schedule["8:30"] = "подъём";
alert( isEmpty(schedule) ); // false
Открыть песочницу с тестами для задачи.
К решению
Сумма свойств
важность: 5
Есть объект salariesс зарплатами. Напишите Если объект пустой, то результат должен быть Например:
код, который выведет сумму всех зарплат.
0.
"use strict";
var salaries = { "Вася": 100, "Петя": 300, "Даша": 250
};
//... ваш код выведет 650
P.S. Сверху стоит use strict, чтобы не забыть объявить переменные.
К решению
Свойство с наибольшим значением
важность: 5
Есть объект salariesс зарплатами. Напишите код, который выведет имя сотрудника, у которого самая большая зарплата.
Если объект пустой, то пусть он выводит «нет сотрудников».
Например:
"use strict";
var salaries = { "Вася": 100, "Петя": 300, "Даша": 250
};
// ... ваш код выведет "Петя"
К решению