KEMBAR78
Coding for Future in Lutsk. JavaScript. Part 9 | PDF
Об’єкти
У JavaScript об’єкт є набором
найменованих властивостей і методів-
функцій. Об’єкти можуть зберігатись у
змінних, доступ до властивостей і методів
– через “крапковий” синтаксис.
Створення об’єктів
Два способи:
1. o = new Object();
2. o = {}; // пусті фігурні дужки
Приклади:
var rak = {};
var koza = {
name: "Дереза",
age: 12,
talk: function () { alert("Заколю тебе рогами..."); }
};
alert( koza.name ); // Дереза
koza.talk(); // Заколю тебе рогами...
Додавання властивості:
rak.name = "Неборак";
rak.age = 60;
koza.color = "white";
Видалення:
delete koza.color;
Перевірка наявності властивості – in:
if ("name" in koza) {
alert( "Властивість name існує" );
}
Якщо властивості нема:
alert( koza.color ); // undefined
Інший спосіб доступу до властивостей:
об’єкт['властивість'].
var person = {};
person['name'] = 'Колобок';
alert( person['name'] ); // Колобок
person.name = 'Солом'яний бичок';
alert( person['name'] ); //
Солом'яний бичок
Квадратні дужки дозволяють використовувати як ім’я
властивості будь-який рядок:
var person = {};
person['колір волосся'] = 'темний';
Допустимі обидва способи:
var menuSetup = {
width: 300,
'height': 200, // можна в лапках, можна без
title: "Menu"
};
var menuSetup = {};
menuSetup.width = 300;
menuSetup.height = 200;
menuSetup.title = 'Menu'
Значенням може бути навіть інший об’єкт
var character = {
name: "Баба Яга",
age: 700,
transport: {
name: "ступа",
capacity: 1,
maxSpeed: 200
}
}
alert( character.name ); // Баба Яга
alert( character.transport.name ); // Ступа
Задача 35
Виконайте таку послідовність дій:
1. Створіть порожній об’єкт user.
2. Додайте властивість name зі
значенням Вася.
3. Додайте властивість surname зі
значенням Дмитрук.
4. Поміняйте значення name на Сергій.
5. Видаліть властивість name з об’єкта.
6. Виведіть властивість surname.
Перебір властивостей об‘єкта
for (key in obj) {
/* ... якісь дії з obj[key] ... */
}
Зазвичай змінну key оголошують прямо
в циклі:
for (var key in menu) {
// ...
}
Можна використовувати й інші імена для
змінної: for(var propName in menu)
Приклад ітерації по властивостях:
var character = {
name: "Баба Яга",
age: 700,
transport: {
name: "ступа",
capacity: 1,
maxSpeed: 200
}
}
for (var key in character) {
alert("ключ: " + key + "nзначення: " +
character[key]);
}
Задача 36
Напишіть функцію countProp для
підрахунку кількості властивостей об’єкта
character.
Розв’язок
function countProp (obj){
var counter = 0;
for (var key in obj) {
counter++;
}
return counter;
}
alert( countProp(character) );
P.S. Можливий коротший спосіб підрахунку:
Object.keys(character).length (див. Масиви).
Задача 37
Напишіть функцію isEmpty(obj), яка
повертає true, якщо в об’єкті нема
властивостей і false – якщо є хоч одна
властивість.
Приклад роботи:
var schedule = {};
alert( isEmpty(schedule) ); // true
schedule["8:30"] = "підйом";
alert( isEmpty(schedule) ); // false
Розв’язок
function isEmpty(obj) {
for (var key in obj) {
return false;
}
return true;
}
Задача 38
Є об’єкт salaries з зарплатами.
var salaries = {
"Ахванасій ": 5000,
"Савка": 6000,
"Соломон": 2500
};
Напишіть код, який виведе суму всіх
зарплат.
Розв’язок
var salaries = {
"Ахванасій ": 5000,
"Савка": 6000,
"Соломон": 2500
};
var sum = 0;
for (var key in salaries) {
sum += salaries[key];
}
alert( sum );
Задача 39
Є об’єкт salaries з зарплатами. Напишіть
код, який виведе ім’я персонажа, у якого
найбільша зарплата.
Якщо об’єкт порожній, має виводитись
“Ніхто нічого не заробив”.
Розв’язок
var leader = "", maxValue = 0;
for (var key in salaries) {
if (salaries[key] > maxValue) {
maxValue = salaries[key];
leader = key;
}
}
alert( leader || "Ніхто не працював" );
Задача 40
Напишіть функцію multiplyNumeric, яка множить всі числові властивості на 2. Наприклад:
var salaries = { // lдо виклику
"Ахванасій": 5000,
"Савка": 6000,
"Соломон": 2500,
"Митродора Пилипівна": "багато"
};
multiplyNumeric(menu);
var salaries = {// lпісля виклику
"Ахванасій": 10000,
"Савка": 12000,
"Соломон": 5000,
"Митродора Пилипівна": "багато"
};
P. S. Для перевірки на число використовуйте функцію:
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n)
}
Розв’язок
function multiply(obj) {
for (var key in obj) {
//if( +obj[key] > 0) {
if( isNumeric(obj[key]) ) {
obj[key] *= 2;
}
}
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n)
}
multiply( salaries );
Відмінності об’єктів від змінних
У змінній, якій надається об’єкт, зберігається
лише посилання на нього!
var user = { name: 'Вася' };
var admin = user;
admin.name = 'Люда';
alert(user.name); // 'Люда'
alert(admin.name); // 'Люда'
Зі звичайними змінними:
var user = 'Вася';
var admin = user;
admin = 'Люда';
alert( user ); // 'Вася'

Coding for Future in Lutsk. JavaScript. Part 9

  • 1.
    Об’єкти У JavaScript об’єктє набором найменованих властивостей і методів- функцій. Об’єкти можуть зберігатись у змінних, доступ до властивостей і методів – через “крапковий” синтаксис.
  • 2.
    Створення об’єктів Два способи: 1.o = new Object(); 2. o = {}; // пусті фігурні дужки Приклади: var rak = {}; var koza = { name: "Дереза", age: 12, talk: function () { alert("Заколю тебе рогами..."); } }; alert( koza.name ); // Дереза koza.talk(); // Заколю тебе рогами...
  • 3.
    Додавання властивості: rak.name ="Неборак"; rak.age = 60; koza.color = "white"; Видалення: delete koza.color; Перевірка наявності властивості – in: if ("name" in koza) { alert( "Властивість name існує" ); } Якщо властивості нема: alert( koza.color ); // undefined
  • 4.
    Інший спосіб доступудо властивостей: об’єкт['властивість']. var person = {}; person['name'] = 'Колобок'; alert( person['name'] ); // Колобок person.name = 'Солом'яний бичок'; alert( person['name'] ); // Солом'яний бичок
  • 5.
    Квадратні дужки дозволяютьвикористовувати як ім’я властивості будь-який рядок: var person = {}; person['колір волосся'] = 'темний'; Допустимі обидва способи: var menuSetup = { width: 300, 'height': 200, // можна в лапках, можна без title: "Menu" }; var menuSetup = {}; menuSetup.width = 300; menuSetup.height = 200; menuSetup.title = 'Menu'
  • 6.
    Значенням може бутинавіть інший об’єкт var character = { name: "Баба Яга", age: 700, transport: { name: "ступа", capacity: 1, maxSpeed: 200 } } alert( character.name ); // Баба Яга alert( character.transport.name ); // Ступа
  • 7.
    Задача 35 Виконайте такупослідовність дій: 1. Створіть порожній об’єкт user. 2. Додайте властивість name зі значенням Вася. 3. Додайте властивість surname зі значенням Дмитрук. 4. Поміняйте значення name на Сергій. 5. Видаліть властивість name з об’єкта. 6. Виведіть властивість surname.
  • 8.
    Перебір властивостей об‘єкта for(key in obj) { /* ... якісь дії з obj[key] ... */ } Зазвичай змінну key оголошують прямо в циклі: for (var key in menu) { // ... } Можна використовувати й інші імена для змінної: for(var propName in menu)
  • 9.
    Приклад ітерації повластивостях: var character = { name: "Баба Яга", age: 700, transport: { name: "ступа", capacity: 1, maxSpeed: 200 } } for (var key in character) { alert("ключ: " + key + "nзначення: " + character[key]); }
  • 10.
    Задача 36 Напишіть функціюcountProp для підрахунку кількості властивостей об’єкта character.
  • 11.
    Розв’язок function countProp (obj){ varcounter = 0; for (var key in obj) { counter++; } return counter; } alert( countProp(character) ); P.S. Можливий коротший спосіб підрахунку: Object.keys(character).length (див. Масиви).
  • 12.
    Задача 37 Напишіть функціюisEmpty(obj), яка повертає true, якщо в об’єкті нема властивостей і false – якщо є хоч одна властивість. Приклад роботи: var schedule = {}; alert( isEmpty(schedule) ); // true schedule["8:30"] = "підйом"; alert( isEmpty(schedule) ); // false
  • 13.
    Розв’язок function isEmpty(obj) { for(var key in obj) { return false; } return true; }
  • 14.
    Задача 38 Є об’єктsalaries з зарплатами. var salaries = { "Ахванасій ": 5000, "Савка": 6000, "Соломон": 2500 }; Напишіть код, який виведе суму всіх зарплат.
  • 15.
    Розв’язок var salaries ={ "Ахванасій ": 5000, "Савка": 6000, "Соломон": 2500 }; var sum = 0; for (var key in salaries) { sum += salaries[key]; } alert( sum );
  • 16.
    Задача 39 Є об’єктsalaries з зарплатами. Напишіть код, який виведе ім’я персонажа, у якого найбільша зарплата. Якщо об’єкт порожній, має виводитись “Ніхто нічого не заробив”.
  • 17.
    Розв’язок var leader ="", maxValue = 0; for (var key in salaries) { if (salaries[key] > maxValue) { maxValue = salaries[key]; leader = key; } } alert( leader || "Ніхто не працював" );
  • 18.
    Задача 40 Напишіть функціюmultiplyNumeric, яка множить всі числові властивості на 2. Наприклад: var salaries = { // lдо виклику "Ахванасій": 5000, "Савка": 6000, "Соломон": 2500, "Митродора Пилипівна": "багато" }; multiplyNumeric(menu); var salaries = {// lпісля виклику "Ахванасій": 10000, "Савка": 12000, "Соломон": 5000, "Митродора Пилипівна": "багато" }; P. S. Для перевірки на число використовуйте функцію: function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n) }
  • 19.
    Розв’язок function multiply(obj) { for(var key in obj) { //if( +obj[key] > 0) { if( isNumeric(obj[key]) ) { obj[key] *= 2; } } } function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n) } multiply( salaries );
  • 20.
    Відмінності об’єктів відзмінних У змінній, якій надається об’єкт, зберігається лише посилання на нього! var user = { name: 'Вася' }; var admin = user; admin.name = 'Люда'; alert(user.name); // 'Люда' alert(admin.name); // 'Люда' Зі звичайними змінними: var user = 'Вася'; var admin = user; admin = 'Люда'; alert( user ); // 'Вася'