Об'єкти. Масиви. Рядки.

Фронтенд розробка 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.

Запитати дату (день, місяць, рік) та вивести наступну за нею дату. Врахуйте можливість переходу на наступний місяць, рік, а також високосний рік.