JS масиви

Збірка методів масиву

• array.length
• for (const variable of iterable)
• array.split(""); // ["M", "a", "n", "g", "o"] "Mango"
• array.join(" "); // "це цікаво" "це", "цікаво"
• array.indexOf("Poly"); // 2
• array.includes("Poly"); // true
• array.push(3); // [1, 2, 3]
• array.pop(); // [1, 2] 3 remove
• array.slice(1, 3); // ["Ajax", "Poly"]
• scores.splice(0, 3);
• const allClients = oldClients.concat(newClients);

Збірка перебираючих методів масиву

• Метод arr.forEach(callback)
• Метод arr.map(callback)
• Метод arr.flatMap(callback)
• Метод arr.filter(callback)
• Метод arr.find(callback)
• Метод arr.findIndex(callback)
• Метод arr.every(callback)
• Метод arr.some(callback)
• Метод arr.reduce(callback)
• Метод arr.sort(callback)

Створення масиву

• const clients = ["Mango", "Poly", "Ajax"];
• console.log(clients[0]); // Mango
• array.length

Ітерація по масиву

for

         for (let i = 0; i < clients.length; i += 1) {
        console.log(clients[i]);
        }
    

for...of break | continue

         
        const clients = ["Mango", "Ajax", "Poly"];
        for (const client of clients) { // Але без доступу до лічильника
            console.log(client);
        }

        for (const client of clients) {
            if (client === clientNameToFind) {
                message = "Клієнт з таким ім'ям є в базі даних!";
                break;
            }
        }
        for (let i = 0; i < numbers.length; i += 1) {
            if (numbers[i] < threshold) {
                continue;
            }
            console.log(`Число більше за ${threshold}: ${numbers[i]}`);
        }
        
    

Методи масиву детально

• name.split(""); // ["M", "a", "n", "g", "o"] "Mango"
• message.split(" "); // ["це", "цікаво"]"це цікаво"
• words.join(" "); // "це цікаво" "це", "цікаво"
• words.join(""); // "цецікаво" "це", "цікаво"
• const clients = ["Mango", "Ajax", "Poly", "Kiwi"];
• console.log(clients.indexOf("Poly")); // 2
• console.log(clients.indexOf("Monkong")); // -1
• console.log(clients.includes("Poly")); // true
• array.push(3); // [1, 2, 3]додає на кінці масиву
• array.pop(); // [1, 2] 3 remove

• slice(begin, end) - повертає копію частини вихідного масиву

  • const clients = ["Mango", "Ajax", "Poly", "Kiwi"];
  • console.log(clients.slice(1, 3)); // ["Ajax", "Poly"]
  • Якщо begin і end не зазначені, буде створена повна копія вихідного масиву
  • Якщо не зазначено end, копіювання буде зі start і до кінця вихідного масиву
  • Якщо значення start від'ємне, а end не зазначено - будуть скопійовані останні start елементи
  • const clients = ["Mango", "Ajax", "Poly", "Kiwi"];
  • console.log(clients.slice(-2)); // ["Poly", "Kiwi"]

• splice(pos, num) -

  • змінює вихідний масив і повертає масив, що містить видалені елементи.
  • const scores = [1, 2, 3, 4, 5];
  • const deletedScores = scores.splice(0, 3);
  • console.log(scores); // [4, 5]
  • console.log(deletedScores); // [1, 2, 3]

  • splice Додавання

  • splice(position, 0, new_element_1, new_element_2, ...)
  • position вказує початкову позицію в масиві, куди будуть вставлені нові елементи.
  • нуль, він говорить методу не видаляти елементи в місці додавання нових.
  • Третій, четвертий і всі наступні аргументи - це нові елементи, які додаються в масив.
  • const colors = ["red", "green", "blue"];
  • colors.splice(2, 0, "purple");
  • console.log(colors); // ["red", "green", "purple", "blue"]

  • splice Заміна - видаляються елементи в місці додавання нових

  • splice(position, num, new_element_1, new_element_2, ...)
  • position - вказує на позицію (індекс) першого елемента для видалення
  • num - визначає кількість елементів, що видаляються
  • Третій, четвертий і всі наступні аргументи - це нові елементи, які додаються в масив.

  •                                     
        const languages = ["C", "C++", "Java", "JavaScript"];
        languages.splice(1, 1, "Python");
        console.log(languages); // ["C", "Python", "Java", "JavaScript"]
        languages.splice(2, 1, "C#", "Swift", "Go");
        console.log(languages); // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]
                                        
                                    

• concat() - Об'єднує два або більше масивів в один. повертає новий

  • const oldClients = ["Mango", "Ajax", "Poly", "Kiwi"];
  • const newClients = ["Monkong", "Singu"];
  • const allClients = oldClients.concat(newClients);

Деструктуризація масивів

Наприклад, є масив кольорів, з якого потрібно отримати значення кожної складової кольору в окремих змінних

    const rgb = [200, 255, 100];
    const [red, green, blue] = rgb;
    console.log(`R:${red},G:${green},B:${blue}`); // "R:200,G:255,B:100"
    const [red, green, blue, alfa = 0.3] = rgb;
                

Іноді з масиву необхідно деструктуризувати тільки перші N елементів, а інші зберегти в одну змінну у вигляді масиву. Деструктуруючи масив, можна розпакувати і присвоїти іншу частину елементів масиву змінної, використовуючи операцію ... (rest).

    const rgb = [200, 255, 100];
    const [red, ...colors] = rgb;
                

Елементи можна пропускати. Припустимо, з масиву rgb необхідно взяти тільки останнє значення. На практиці ця можливість рідко використовується.

    const rgb = [200, 100, 255];
    const [, , blue] = rgb;
    console.log(`Blue: ${blue}`); // "Blue: 255"
                

Перебираючі методи масиву детально

Метод arr.forEach(callback)

Метод перебирання масиву, який використовується для заміни циклів for і for...of в роботі з колекцією даних.

    const numbers = [5, 10, 15, 20, 25];

    // Класичний for
    for (let i = 0; i / numbers.length; i += 1) {
        console.log(`Індекс ${i}, значення ${numbers[i]}`);
    }

    // Метод перебирання forEach
    numbers.forEach(function (number, index) {
        console.log(`Індекс ${index}, значення ${number}`);
        arr[index] = number * 2;
    });

• Поелементно перебирає масив.
• Викликає колбек-функцію для кожного елемента масиву.
• Нічого не повертає.
• index and arr не обовязкові
• Можна оголошувати тільки необхідні параметри, найчастіше - це елемент
• головне не забувати про їх порядок.
• Перервати виконання методу forEach не можна, він завжди перебирає масив до кінця.
• Немає return
• Мутує масив

В JavaScript є методи масивів, що прийшли з функціональних мов. Більшість з них - це чисті функції.

    array.method((item, idx, arr) => {
        // логіка, яка буде застосовуватися на кожній ітерації
    });

Всі параметри, крім значення елемента item, - необов'язкові. Назви параметрів можуть бути будь-які, але є неофіційні домовленості

Метод arr.map(callback)

    массив.map((element, index, array) => {
        // Тіло колбек-функції
    });

Метод map(callback) використовується для трансформації масиву. Він викликає колбек-функцію для кожного елемента вихідного масиву, а результат її роботи записує у новий масив, який і буде результатом виконання методу.

    const students = [
        { name: "Манго", score: 83 },
        { name: "Полі", score: 59 },
        { name: "Аякс", score: 37 },
        { name: "Ківі", score: 94 },
        { name: "Х'юстон", score: 64 },
    ];

    const names = students.map(student => student.name);
    console.log(names); // ['Манго', 'Полі', 'Аякс', 'Ківі', 'Х'юстон']

Метод arr.flatMap(callback)

    массив.flatMap((element, index, array) => {
        // Тіло колбек-функції
    });

аналогічний методу map(), але застосовується у випадках, коли результат - це багатовимірний масив, який необхідно «розгладити».

У масиві students зберігається список студентів зі списком предметів, які відвідує студент, у властивості courses. Кілька студентів можуть відвідувати один і той самий предмет. Необхідно скласти список всіх предметів, які відвідує ця група студентів, поки що, навіть повторюваних.

    const students = [
        { name: "Ivan", courses: ["математика", "фізика"] },
        { name: "Kolya", courses: ["інформатика", "математика"] },
        { name: "Katya", courses: ["фізика", "біологія"] },
    ];
    students.map(student => student.courses);
    // [['математика', 'фізика'], ['інформатика', 'математика'], ['фізика', 'біологія']]

    students.flatMap(student => student.courses);
    // ['математика', 'фізика', 'інформатика', 'математика', 'фізика', 'біологія'];

Метод arr.filter(callback)

    масив.filter((element, index, array) => {
        // Тіло колбек-функції
    });

Метод filter використовується для - фільтрації масиву, тобто, коли необхідно вибрати більше одного елемента з колекції за певним критерієм.

• Не змінює оригінальний масив
• Повертає новий масив.
• Додає у масив, що повертається, елементи, які задовольняють умови
• Якщо жоден елемент не задовольнив умову, повертає порожній масив.

    const values = [51, -3, 27, 21, -68, 42, -37];
    const positiveValues = values.filter(value => value >= 0);
    console.log(positiveValues); // [51, 27, 21, 42] 

Фільтрація унікальних елементів

Цей прийом працює тільки з масивом примітивних значень - не об'єктів.

    const courses = ['математика', 'фізика', 'інформатика', 'математика', 'фізика', 'біологія'];
    const uniqueCourses = allCourses.filter(
        (course, index, array) => array.indexOf(course) === index
    );

Фільтрація масиву об'єктів

Під час роботи з масивом об'єктів виконується фільтрація за значенням певної властивості. У підсумку, утворюється новий масив відфільтрованих об'єктів.

    const LOW_SCORE = 50;
    const HIGH_SCORE = 80;
    const students = [
        { name: "Манго", score: 83 },
        { name: "Полі", score: 59 },
        { name: "Аякс", score: 37 },
        { name: "Ківі", score: 94 },
        { name: "Х'юстон", score: 64 },
    ];

    const best = students.filter(student => student.score >= HIGH_SCORE);
    console.log(best); // Масив об'єктів з іменами Манго і Ківі

Метод arr.find(callback)

    масив.find((element, index, array) => {
        // Тіло колбек-функції
    });

Метод find(callback) дозволяє знайти і повернути перший відповідний елемент, після чого перебирання масиву припиняється. Не змінює оригінальний масив. Якщо жоден елемент не задовольнив умову, метод повертає undefined

    const colorPickerOptions = [
        { label: "red", color: "#F44336" },
        { label: "green", color: "#4CAF50" },
        { label: "blue", color: "#2196F3" },
    ];
    colorPickerOptions.find(option => option.label === "blue"); 
            // { label: 'blue', color: '#2196F3' }

Метод arr.findIndex(callback)

    масив.findIndex((element, index, array) => {
        // Тіло колбек-функції
    });

Метод findIndex(callback) - це сучасна заміна методу indexOf(). Дозволяє виконувати пошук за складнішими умовами, ніж просто рівність. Використовується як для пошуку у масиві примітивів, так і в масиві об'єктів.

• Не змінює оригінальний масив.
• Повертає індекс першого елемента, що задовольняє умову
• Якщо жоден елемент не задовольняє умову, метод повертає -1.

Метод arr.every(callback)

Перевіряє, чи проходять всі елементи масиву тест колбек-функції. Повертає true або false

    масив.every((element, index, array) => {
        // Тіло колбек-функції
    });

• Не змінює оригінальний масив.
• Повертає true, якщо всі елементи масиву задовольняють умову
• Повертає false, якщо хоча б один елемент масиву не задовольняє умову
• Перебирання масиву припиняється, якщо колбек повертає false

    [1, 2, 3, 4, 5].every(value => value >= 0); // true
    [1, 2, 3, -10, 4, 5].every(value => value >= 0); // false

Метод arr.some(callback)

Перевіряє, чи проходить хоча б один елемент масиву тест колбек-функції. Повертає true або false

    масив.some((element, index, array) => {
        // Тіло колбек-функції
    });

• Не змінює оригінальний масив.
• Повертає true, якщо хоча б один елемент масиву задовольняє умову.
• Повертає false, якщо жоден елемент масиву не задовольняє умову
• Перебирання масиву припиняється, якщо колбек повертає true

    [1, 2, 3, 4, 5].some(value => value >= 0); // true
    [1, 2, 3, 4, 5].some(value => value < 0); // false

    const fruits = [
        { name: "apples", amount: 100 },
        { name: "bananas", amount: 0 },
        { name: "grapes", amount: 50 },
    ];

    const allAvailable = fruits.every(fruit => fruit.amount > 0); // false
    const anyAvailable = fruits.some(fruits => fruits.amount > 0); // true
                

Метод arr.reduce(callback)

    масив.reduce((previousValue, element, index, array) => {
        // Тіло колбек-функції
    }, initialValue);

Метод reduce(callback, initialValue) використовується для послідовної обробки кожного елемента масиву із збереженням проміжного результату, як акумулятор.

• Не змінює оригінальний масив.
• Повертає все, що завгодно.
• Робить все, що завгодно.

прикладі підрахунку суми елементів масиву

    const total = [2, 7, 3, 14, 6].reduce((previousValue, number) => {
        return previousValue + number;
    }, 0);   
    console.log(total); // 32

Другим аргументом для reduce() можна передати необов'язкове початкове значення акумулятора - параметр initialValue.

Задача 1. Необхідно отримати середній бал

    const students_4 = [
        { name: "Манго", score: 83 },
        { name: "Полі", score: 59 },
        { name: "Аякс", score: 60 },
    ];

    const totalScore = students_4.reduce((acum, student)=> {
        return acum + student.score;
    }, 0);

    const averScore = totalScore / students_4.length;

Задача 2.

з масиву постів твіттера окремого користувача необхідно порахувати суму усіх лайків

    const tweets = [
        { id: "000", likes: 5, tags: ["js", "nodejs"] },
        { id: "001", likes: 2, tags: ["html", "css"] },
        { id: "002", likes: 17, tags: ["html", "js", "nodejs"] },
        { id: "003", likes: 8, tags: ["css", "react"] },
        { id: "004", likes: 0, tags: ["js", "nodejs", "react"] },
    ];
    const likes = tweets.reduce((totalLikes, tweet) => totalLikes + tweet.likes, 0);
    //напишемо функцію
    const countLikes = tweets => {
        return tweets.reduce((totalLikes, tweet) => totalLikes + tweet.likes, 0);
    };
    console.log(countLikes(tweets)); // 32

Задача 3.

зберемо в масив усі теги, які зустрічаються в постах.

    const tags = tweets.reduce((allTags, tweet) => {
        allTags.push(...tweet.tags); 
                          
        return allTags;
      }, []);
                      
      console.log(tags);

    // напишемо функцію
    const getTags = tweets =>
      tweets.reduce((allTags, tweet) => {
        allTags.push(...tweet.tags);

        return allTags;
      }, []);
                    
    console.log(getTags(tweets));

порахувати кількість унікальних тегів в масиві.

    const getTags = tweets =>
    tweets.reduce((allTags, tweet) => {
        allTags.push(...tweet.tags);

        return allTags;
    }, []);

    const tags = getTags(tweets);

    // Винесемо callback-функцію окремо, а в reducе передамо посилання на неї.
    // Це стандартна практика, якщо callback-функція досить велика.

    // Якщо в об'єкті-акумуляторі acc відсутня своя властивість з ключем tag,
    // то створюємо її і записуємо їй значення 0.
    // В іншому випадку збільшуємо значення на 1.
    const getTagStats = (acc, tag) => {
        if (!acc.hasOwnProperty(tag)) {
            acc[tag] = 0;
        }
        acc[tag] += 1;

        return acc;
    };

    // Початкове значення акумулятора - це порожній об'єкт {}
    const countTags = tags => tags.reduce(getTagStats, {});

    const tagCount = countTags(tags);
    console.log(tagCount);

Метод arr.sort(callback)

• Сортує і змінює вихідний масив.
• Повертає змінений масив,
• За замовчуванням сортує за зростанням.
• Сортування відбувається шляхом приведення значень до рядка і порівняння порядкових номерів у таблиці Unicode.
• стандартне сортування чисел працює незвично

    const scores = [27, 2, 41, 4, 7, 3, 75];
    scores.sort();
    console.log(scores); // [2, 27, 3, 4, 41, 7, 75]

Масив рядків сортується за алфавітом.

const students = ["Віка", "Андрій", "Олег", "Юля", "Борис", "Катя"];
students.sort();
console.log(students); // [ 'Андрій', 'Борис', 'Віка', 'Катя', 'Олег', 'Юля' ]
                

Водночас порядковий номер великих літер менший, ніж у малих.

const letters = ["b", "B", "a", "A", "c", "C"];
letters.sort();
console.log(letters); // ['A', 'B', 'C', 'a', 'b', 'c']

Через те, що сортується вихідний масив, порушується принцип чистоти функцій і не можна зручно створити декілька похідних колекцій на основі вихідної. Наприклад, створити колекцію, відсортовану за зростанням, а іншу - за спаданням. Тому перед сортуванням роблять повну копію вихідного масиву і сортують вже її.

const scores = [61, 19, 74, 35, 92, 56];
const ascendingScores = [...scores].sort();
console.log(scores); // [61, 19, 74, 35, 92, 56]
console.log(ascendingScores); // [19, 35, 56, 61, 74, 92]

Свій порядок сортування чисел

    массив.sort((a, b) => {
        // Тіло колбек-функції
      });
      a - перший елемент для порівняння.
      b - другий елемент для порівняння.

Якщо виклик compareFunction(a, b) повертає будь-яке від'ємне значення, тобто a менше b, сортування поставить a перед b. Це сортування за зростанням.

    const scores = [61, 19, 74, 35, 92, 56];
    const ascendingScores = [...scores].sort((a, b) => a - b);
    console.log(ascendingScores); // [19, 35, 56, 61, 74, 92]

Якщо виклик compareFunction(a, b) повертає будь-яке додатне значення більше нуля, тобто b більше a, сортування поставить b перед a. Це сортування за спаданням.

    const scores = [61, 19, 74, 35, 92, 56];
    const descendingScores = [...scores].sort((a, b) => b - a);
    console.log(descendingScores); // [92, 74, 61, 56, 35, 19]

Свій порядок сортування рядків

Для сортування рядків в алфавітному порядку, за зростанням або спаданням, використовується метод рядків localeCompare().

    firstString.localeCompare(secondString)

Він викликається на рядку, який потрібно порівняти (firstString) з тим, що був переданий йому як аргумент (secondString).

    "a".localeCompare("b"); // -1
    "b".localeCompare("a"); // 1
    "a".localeCompare("a"); // 0
    "b".localeCompare("b"); // 0

const students = ["Віка", "Андрій", "Олег", "Юля", "Борис", "Катя"];
const inAlphabetOrder = [...students].sort((a, b) => a.localeCompare(b));
console.log(inAlphabetOrder); // ['Андрій', 'Борис', 'Віка', 'Катя', 'Олег', 'Юля']
const inReversedOrder = [...students].sort((a, b) => b.localeCompare(a));
console.log(inReversedOrder); // ['Юля', 'Олег', 'Катя', 'Віка', 'Борис', 'Андрій']
                

Сортування об'єктів

Під час роботи з масивом об'єктів, сортування виконується за числовим або рядковим значенням певної властивості. Наприклад, у нас є група студентів з балами за тест. Необхідно відсортувати масив об'єктів за зростанням і спаданням кількості балів, і за ім'ям студента.

const students = [
    { name: "Манго", score: 83 },
    { name: "Полі", score: 59 },
    { name: "Аякс", score: 37 },
    { name: "Ківі", score: 94 },
];

const inAscendingScoreOrder = students.sort(
    (firstStudent, secondStudent) => firstStudent.score - secondStudent.score
);

const inDescendingScoreOrder = students.sort(
    (firstStudent, secondStudent) => secondStudent.score - firstStudent.score
);

const inAlphabeticalOrder = students.sort((firstStudent, secondStudent) =>
    firstStudent.name.localeCompare(secondStudent.name)
);

Ланцюжки методів

const names = [...students]
    .sort((a, b) => a.score - b.score)
    .map(student => student.name);

console.log(names); // ['Аякс', 'Полі', 'Манго', 'Ківі']