Об'єкти. Масиви. Рядки.
Фронтенд розробка JavaScript. -> Об'єкти. Масиви. Рядки.
Масиви
Масив – це структура даних, яка групує набір деяких значень під одним ім’ям. Для Доступ до конкретного значення використовується індекс.
Створення масивів за допомогою архітектора.
// створюємо порожній масив
var arrayName = new Array();
// створюємо масив заданої довжини
var arrayName = new Array (Number length);
// Створюємо масив і відразу ініціалізуємо його значеннями
var arrayName = new Array(el1, el2...)
Створення масивів з допомогою літералів.
var arr = [1,2,3]
Отримання значень за індексом
Індексування починається з 0.
var g = arr [0]
Заповнення масиву
arr[1] = 'value'
Якщо вказати неяснуючій індекс.
arr[4] = 6
// [1,2,3, undefined, 6]
Данні в масиві можна міксувати.
var a = [1,2,[3,4,5]]
a[2][1]
Двовимірні масиви.
var arr = [
[1,3,5],
[2,7,8]
];
Набуття значень.
alert(arr[1][2]);
Довжина масиву.
arr.lenght
Зменшити масив можна зміною свійсва lenght при цьому дані будуть втрачені.
Прохід по масиву циклом.
for(var i = 0;i<arr.length;i++){
alert(arr[i]);
}
arr.forEach(function(item, index) { console.log(item) });
Створення одного масіва з иншого.
Як не треба робити (антіпаттерн)
const numbers = [1,2,3,4,5], doubled = [];
numbers.forEach(function(n, i){ doubled[i] = n * 2 });
Як треба.
const numbers = [1,2,3,4,5];
const doubled = numbers.map(function(n) {n * 2});
console.log(doubled);
Створення масиву цілих чісел
arr = [...Array(5)].map((e,i) => i);
arr = Array.from(Array(10).keys());
arr = [...Array(10).keys()]
arr = Array.from({length: 10}, (_, i) => i + 1)
Методи масивів.
Пошук значень
indexOf lastIndexOf у прямий та зворотний бік.
name_of_array.indexOf(what_to_search[, fromIndex])
Повертається індекс або -1 якщо не виявив.
Сортування sort
Сигнатура.
name_of_array.sort([compareFunc])
Сигнатура функції для сортування
function name_of_function(name_of_var1, name_of_var2){
body_of_function
}
name_of_var1, name_of_var2 - два параметри, які порівнюватимуться.
В результаті порівняння функція може повертати 0, 1 або -1 залежно від того більше або менше.
Приклад.
function compareFunc(a,b){
if(a>b)
return 1;
else if(b>a)
return -1;
else
return 0;
}
var arr = [10,1,3,33,6];
// 1 3 6 10 33
arr.sort(compareFunc);
Видалення єлементів
arr.pop() // з кінця масіва
arr.shift() // з початку
Додавання елементиів
arr.unshift(el) // на початок
arr.push(el) // на кінець
Об’єднання масивів
arr.concat(arr2,arr3)
Перетворення масива у рядок
arr.join(',')
Деструктурізация масівив
const [first] = [1,2,3] // 1
const [,,third] = [1,2,3] // 3
Оператор росповсюдження …
const a = [1,2,3]
const b = [4,5,6]
const c = [...a, ...b] // [1,2,3,4,5,6]
також цей оператор можна використовуваті для отримання змінних
const a = [1,2,3,4]
const [first, ...others] = a // others = [2,3,4] first = [1]
Росповсюдження у функціях
function test(...args) {
let [start, ...remaining] = args
}
test(1,2,3)
Array.from
Створюе масів с масівоподібного об’єкта.
Array.from([1, 2, 3], x => x + x);
Об’єкти..
Об’єкт — це певна конкретна реалізація якоїсь сутності.
Об’єкт у мові JS представлений як асоціативного масиву.
Нагадаємо, це масив, який складається з пар «ключ-значення».
Створення об’єкта.
// створюємо порожній об'єкт
// ми використовуємо ключове слово new для створення об'єкта
var obj = new Object();
// Створення об'єкта.
// створюємо порожній об'єкт
// ми використовуємо ключове слово new для створення об'єкта
var student = {
name: "Daria",
lastName: "Kislicina",
age:23
};
Під час створення об’єкта можна вставити всередину інший об’єкт.
var student = {
name: "Daria",
lastName: "Kislicina",
age:23,
address:{
street:"Tiraspolskaya 5",
city:"Odessa"
}
};
Додавання пар ключ-значення.
// створюємо порожній об'єкт
var student=new Object();
// Додаємо властивість об'єкт використовуючи звичайний
// синтаксис масивів
// ["ключ"]
student["Name"] = "Vasya";
// замість подвійних лапок можна використовувати одинарні
student['Age'] = 23;
alert(student["Name"]);
alert(student['Age']);
другий спосіб
// створюємо порожній об'єкт
var firm={};
// створюємо властивість
firm.Name = "Star Inc";
firm.Address = 'Somewhere street 5';
alert(firm.Name);
alert(firm.Address);
Видалення властивостей
delete cat.Name;
Перевірка існування властивості всередині об’єкта
if("Age" in obj){
alert("Exists");
}
else{
alert("Not exists");
}
Альтернативний спосіб
if (obj.hasOwnProperty('age')){
console.log('Age exists!');
}
Перегляд всіх властивостей усередині об’єкту
for(var tempProperty in rect){
// Відображаємо назву властивості
alert(tempProperty);
// значення якості
alert(rect[tempProperty]);
}
Крім властивостей в об’єкті можуть бути і методи (функції).
myobj.sayHello = function() { console.log('Hello!') }
Виклик методу.
myobj.sayHello()
Рядки та їх методи.
Визначення рядків.
var s = "Hello";
var name = 'Dima';
var phrase = `Hello \t ${name}`
\t - табуляція
Вставка лапок
var str2 = "Yes";
Доступ до елемента.
str2[2]
Рядок це незмінний об’єкт тому, щоб її змінити потрібно користуватися методами або перестворювати цілком.
Конкатенація рядків.
"Hello"+"Dima"
Split - розбиття на частини.
name_of_string.split(separator)
separator - розділювач за його допомогою ми розбиваємо рядок на елементи масиву. Внаслідок роботи методу повертається масив результату.
Join - об’єднання через роздільник.
var arr = ["bmw","audi","opel"];
var str = arr.join(";");
Методи toLowerCase та toUpperCase змінюють регістр літер. При цьому повертається новий рядок.
var str = "FootbalL";
var newStr = str.toLowerCase();
Методи substr, substring.
Використовуються для отримання підрядка з рядка.
substring(start, [end])
Метод повертає підрядок, починаючи з індексу start, але не включаючи індекс end.
Якщо end не вказано, то повертаємо підрядок до кінця рядка.
var str = "Some value";
// end — необов'язковий параметр, який можна опустити
var newStr = str.substring(2);
// me value
alert(newStr);
newStr = str.substring(1,3);
// om
alert(newStr);
Метод substr( start, [length]) повертає підрядок починаючи з start, причому можна вказати довжину підрядка у другому параметрі. Якщо ж довжина не вказана, то повертається підрядок до кінця оригінального рядка.
Фронтенд розробка JavaScript. -> Домашнє завдання.
Домашнє завдання.
Вам необхідно самостійно вирішити, для якого завдання який оператор розгалуження краще використовувати: if, switch або тернарний.
Завдання 1.
Запитати у користувача його вік та визначити, ким він є: дитиною (0-2), підлітком (12-18), дорослим (18_60) або пенсіонером (60-…).
Завдання 2.
Запросити у користувача число від 0 до 9 та вивести йому спецсимвол, який розташований на цій клавіші (1–!, 2-@, 3-# і т. д).
Завдання 3.
Запитати у користувача тризначне число і перевірити, чи є у ньому однакові цифри.
Завдання 4.
Запитати у користувача рік і перевірити, чи високосний він чи ні. Високосний рік або кратен 400, або кратен 4 і при цьому не кратний 100.
Завдання 5.
Запитати у користувача п’ятирозрядне число і визна- лити, чи воно є паліндромом.
Завдання 6.
Написати конвертор валют. Користувач вводить кількість - ство USD, вибирає, в яку валюту хоче перекласти: EUR, UAN або AZN, і отримує відповідну суму.
Завдання 7.
Запросити у користувача суму покупки та вивести суму до оплати зі знижкою: від 200 до 300 – знижка буде 3%, від 300 до 500 – 5%, від 500 і від – 7%.
Завдання 8.
Запитати у користувача довжину кола та периметр квадрат. Визначити, чи може таке коло замі- ститися у вказаний квадрат.
Завдання 9.
Задати користувачеві 3 питання, у кожному питанні по 3 ва- ріанта відповіді. За кожну правильну відповідь нараховується 2 бали. Після запитань виведіть користувачеві кількість набраних балів.
Завдання 10.
Запитати дату (день, місяць, рік) та вивести наступну за нею дату. Врахуйте можливість переходу на наступний місяць, рік, а також високосний рік.