Массивы

Автор: |

Оглавление

Начнём с создания массивов, научимся с ними работать и приведём ряд примеров.

Создание массивов

Массив – это структура данных, которая позволяет хранить набор элементов одного типа под одним именем. В JavaScript массивы могут содержать элементы разных типов, включая числа, строки, логические значения и даже другие массивы или объекты.

Для создания массива в JavaScript существует несколько способов:

Используя литерал массива:

let arr = [1, 2, 3];
С помощью конструктора Array:
let arr = new Array(1, 2, 3);
Создав пустой массив и добавляя элементы позже:
let arr = [];	
arr.push(1); // Добавляем элемент в конец массива
arr.unshift(4); // Добавляем элемент в начало массива
console.log(arr); // Выведет [4, 1]

Доступ к элементам массива

Каждый элемент массива имеет свой индекс, начиная с нуля. Для доступа к конкретному элементу используется синтаксис квадратных скобок [ ].

let arr = ["яблоко", "банан", "апельсин"];
console.log(arr[0]); // Выведет "яблоко"

Также можно изменять значение элемента через доступ по индексу:

arr[1] = "груша";
console.log(arr); // Выведет ["яблоко", "груша", "апельсин"]

Методы работы с массивами

JavaScript предоставляет множество встроенных методов для работы с массивами. Вот некоторые из них:

.push(): добавляет элемент в конец массива.
let fruits = ["яблоко", "банан"];
fruits.push("апельсин");
console.log(fruits); // Выведет ["яблоко", "банан", "апельсин"]

.pop(): удаляет последний элемент массива и возвращает его.

let fruits = ["яблоко", "банан", "апельсин"];
let lastFruit = fruits.pop();
console.log(lastFruit); // Выведет "апельсин"
console.log(fruits); // Выведет ["яблоко", "банан"]

.shift(): удаляет первый элемент массива и возвращает его.
let fruits = ["яблоко", "банан", "апельсин"];
let firstFruit = fruits.shift();
console.log(firstFruit); // Выведет "яблоко"
console.log(fruits); // Выведет ["банан"]

.unshift(): добавляет элемент в начало массива.
fruits.unshift("груша");
console.log(fruits); // Выведет ["груша", "банан"]

.slice(start, end): создает новый массив, содержащий часть исходного массива от индекса start до индекса end (не включительно).
let numbers = [1, 2, 3, 4, 5];
let slicedNumbers = numbers.slice(1, 4);
console.log(slicedNumbers); // Выведет [2, 3, 4]

Далее подробно остановимся на методе

.splice(index, deleteCount, item1, …, itemN). Он изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.

array.splice(index, deleteCount, item1, …, itemN)

index: индекс массива, с которого начнется изменение. Если index отрицательный, то отсчет начинается с конца массива.

deleteCount: количество элементов, которое будет удалено, начиная с позиции index. Если этот параметр равен нулю, то никакие элементы не будут удалены.

item1, …, itemN: элементы, которые будут вставлены вместо удалённых. Эти параметры необязательны. Если они отсутствуют, то метод просто удалит указанные элементы без добавления новых.

.splice(index, deleteCount, item1, …, itemN): изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.

Пример использования .splice()

Рассмотрим следующий код:

let animals = ["кошка", "собака", "птица"];
animals.splice(1, 1, "змея", "кролик");	
console.log(animals); // Выведет ["кошка", "змея", "кролик", "птица"]

Давайте пошагово разберём, что происходит при вызове метода .splice():

Определение начальной позиции (index):
Мы передаем 1 в качестве первого аргумента. Это означает, что изменения начнутся со второго элемента массива (индексация начинается с нуля). Таким образом, начальная позиция будет на элементе «собака».
Удаление элементов (deleteCount):
Передан аргумент 1, который указывает, сколько элементов нужно удалить, начиная с указанной позиции. Следовательно, будет удален один элемент, а именно «собака».
Добавление новых элементов (item1, …, itemN):
После удаления мы передаем два новых элемента: «змея» и «кролик». Эти элементы будут вставлены на место удаленного элемента.
После выполнения всех шагов массив примет вид:
[«кошка»,»змея»,»кролик»,»птица»]

Таким образом, метод .splice() позволяет гибко управлять элементами массива, комбинируя удаление и добавление в одном вызове.

.forEach(callback): выполняет функцию для каждого элемента массива.

Применяется для последовательной обработки каждого элемента массива. Этот метод принимает функцию обратного вызова (callback), которую он вызывает для каждого элемента массива. Функция обратного вызова получает три параметра: текущее значение элемента, его индекс и сам массив.

Синтаксис метода .forEach()

array.forEach(callback(currentValue, index, array))

currentValue: текущий обрабатываемый элемент массива.

index (опционально): Индекс текущего элемента в массиве.

array (опционально): Сам массив, над которым выполняется итерация.

Пример использования .forEach()

Рассмотрим следующий код:

let nums = [1, 2, 3];
nums.forEach(function(num) {
    console.log(num * 2);
});
// Выведет:
// 2
// 4
// 6

Пошаговый разбор того, что происходит при выполнении этого кода:

Инициализация массива:
Создается массив nums, содержащий три элемента: 1, 2 и 3.
Вызов метода .forEach():
Метод .forEach() вызывается для массива nums. Ему передается анонимная функция, которая будет выполняться для каждого элемента массива.
Обработка первого элемента:
При первом вызове функции обратного вызова ей передается значение первого элемента массива (num = 1). Внутри функции вычисляется выражение num * 2, результат которого выводится в консоль (console.log(1 * 2)). На экране появляется число 2.
Обработка второго элемента:
Затем функция обратного вызова вызывается для второго элемента массива (num = 2). Выражение num * 2 снова вычисляется, и результат выводится в консоль (console.log(2 * 2)). На экране появляется число 4.
Обработка третьего элемента:
Наконец, функция обратного вызова вызывается для последнего элемента массива (num = 3). Опять же, вычисляется выражение num * 2, и результат выводится в консоль (console.log(3 * 2)). На экране появляется число 6.

В результате выполнения всего цикла, на экране последовательно появляются числа 2,4 и 6.

Альтернативный способ записи с использованием стрелочной функции

В современных версиях JavaScript можно использовать стрелочные функции для более компактной записи:

let nums = [1, 2, 3];
nums.forEach(num => console.log(num * 2));
// Выведет:
// 2	
// 4
// 6

Этот вариант делает код короче и читабельнее, сохраняя ту же функциональность.

.map(callback): создает новый массив, применяя функцию к каждому элементу старого массива.

let nums = [1, 2, 3];
let doubledNums = nums.map(function(num) {
    return num * 2;
});	
console.log(doubledNums); // Выведет [2, 4, 6]

.filter(callback): создает новый массив, содержащий только те элементы, для которых функция возврата истинного значения.

let nums = [1, 2, 3];
let evenNums = nums.filter(function(num) {
    return num % 2 === 0;
});	
console.log(evenNums); // Выведет [2]

.reduce(callback, initialValue): сводит массив к одному значению, выполняя функцию для каждого элемента. Предназначен для свертки массива к единственному значению путем применения функции к каждому элементу массива. Эта функция принимает два аргумента: предыдущее значение (аккумулятор) и текущий элемент массива. Начальное значение аккумулятора также может быть задано вторым параметром метода.

Синтаксис метода .reduce()
array.reduce(callback(accumulator, currentValue, index, array), initialValue)

callback: функция, выполняемая для каждого элемента массива. Она принимает четыре аргумента:

accumulator: накопленное значение, возвращаемое предыдущей итерацией функции.
currentValue: Текущий элемент массива.
o index (опционально): Индекс текущего элемента в массиве.

array (опционально): сам массив, над которым выполняется операция.

initialValue (опционально): начальное значение аккумулятора. Если оно не указано, то первым значением аккумулятора станет первый элемент массива, а обработка начнется со второго элемента.

Пример использования .reduce().
Рассмотрим следующий код:

let nums = [1, 2, 3];
let sum = nums.reduce(function(acc, num) {
    return acc + num;
}, 0);
console.log(sum); // Выведет 6

Разберем шаг за шагом, что происходит при выполнении этого кода:

Инициализация массива:
Создаем массив nums, содержащий три элемента: 1, 2 и 3.
Вызов метода .reduce():
Вызываем метод .reduce() для массива nums. Передаем ему две вещи: функцию обратного вызова и начальное значение аккумулятора (0).
Первая итерация:
Так как начальное значение аккумулятора указано (0), оно становится значением аккумулятора для первой итерации.
Функция обратного вызова вызывается с параметрами: acc = 0 (начальное значение аккумулятора) и num = 1 (первый элемент массива).
Выполняется выражение внутри функции: return acc + num;, что дает 0 + 1 = 1. Это значение возвращается и становится новым значением аккумулятора.
Вторая итерация:
Теперь аккумулятор содержит значение 1.
Функция обратного вызова вызывается с параметрами: acc = 1 и num = 2 (второй элемент массива).
Выполняется выражение внутри функции: return acc + num;, что дает 1 + 2 = 3. Это значение возвращается и становится новым значением аккумулятора.
Третья итерация:
Аккумулятор теперь содержит значение 3.
Функция обратного вызова вызывается с параметрами: acc = 3 и num = 3 (третий элемент массива).
Выполняется выражение внутри функции: return acc + num;, что дает 3 + 3 = 6. Это значение возвращается и становится окончательным результатом операции.
Результат:
Значение 6 присваивается переменной sum и выводится в консоль.

Альтернативный способ записи с использованием стрелочной функции

В современных версиях JavaScript можно использовать стрелочную функцию для более краткой записи:

let nums = [1, 2, 3];
let sum = nums.reduce((acc, num) => acc + num, 0);
console.log(sum); // Выведет 6
	
let nums = [1, 2, 7];
let sum = nums.reduce((acc, num) => acc * num, 1);
console.log(sum); // Выведет 14

Этот вариант делает код короче и читабельнее, сохраняя ту же функциональность.

Данные методы позволяют эффективно работать с массивами, избегая необходимости писать много повторяющегося кода вручную.

Пример. Поиск самого длинного слова в строке

Эта программа использует массив для хранения слов из строки и находит самое длинное слово.

 


function findLongestWord(sentence) {
    // Разделяем строку на массив слов
    const words = sentence.split(' ');
    
    // Ищем самое длинное слово
    let longestWord = '';
    for (const word of words) {
        if (word.length > longestWord.length) {
            longestWord = word;
        }	
    }
    
    return longestWord;
}

// Пример использования
const result = findLongestWord("Программирование — это искусство создания программ.");
console.log(result); // Выведет "Программирование"

Пояснение:

Функция findLongestWord:
Принимает строку sentence в качестве аргумента.
Разделение строки на массив слов:
Используется метод split(‘ ‘), который разбивает строку на отдельные слова по пробелам и сохраняет их в массиве words.
Поиск самого длинного слова:
Объявлена переменная longestWord, изначально пустая строка.
Проходим циклом for…of по всем словам в массиве words.
Проверяется длина текущего слова. Если она больше длины longestWord, то обновляем значение longestWord на текущее слово.
Возврат результата:
Возвращается найденное самое длинное слово.
Пример использования:
Вызываем функцию findLongestWord с предложением «Программирование — это искусство создания программ.».
Результат выводим в консоль, где должно появиться слово «Программирование».

Пример. Подсчёт количества вхождений каждого слова в тексте

Программа использует объект для подсчёта количества вхождений каждого слова в тексте.





function countWords(text) {
    // Разделяем текст на массив слов
    const words = text.toLowerCase().split(/\s+/);
    
    // Используем объект для подсчета слов
    const wordCounts = {};
    for (const word of words) {
        if (!wordCounts[word]) {
            wordCounts[word] = 1;
        } else {
            wordCounts[word]++;
        }			
    }
    
    return wordCounts;
}

// Пример использования
const text = "Я люблю программирование, потому что программирование — это интересно.";
const counts = countWords(text);
console.log(counts); // Выведет { я: 1, люблю: 1, программирование: 2, потому: 1, что: 1, это: 1, интересно: 1 }

Пояснение:

Функция countWords:
Принимает строку text в качестве аргумента.
Преобразование текста в массив слов:
Сначала текст приводится к нижнему регистру методом toLowerCase(), чтобы избежать различий между заглавными и строчными буквами.
Затем используется регулярное выражение /\s+/ для разделения текста на слова по любому количеству пробелов и сохранения их в массиве words.
Подсчёт слов:
Объявлен пустой объект wordCounts, который будет использоваться для хранения количества вхождений каждого слова.
Проходим циклом for…of по всем словам в массиве words.
Если слово ещё не встречалось, создаем новую запись в объекте wordCounts с ключом равным слову и значением 1.
Если слово уже встречалось, увеличиваем счётчик на единицу.
Возврат результата:
Возвращается объект wordCounts, содержащий количество вхождений каждого слова.
Пример использования:
Вызываем функцию countWords с текстом «Я люблю программирование, потому что программирование — это интересно.».
Результат выводим в консоль, где должно появиться количество вхождений каждого слова.

Пример. Фильтрация списка товаров по цене

программа демонстрирует работу с массивом объектов, фильтруя товары по заданной максимальной цене.

 


const products = [
    { name: "Телефон", price: 10000 },
    { name: "Ноутбук", price: 50000 },
    { name: "Наушники", price: 2000 },
    { name: "Смарт-часы", price: 7000 },
    { name: "Флешка", price: 800 }
];	

function filterProductsByPrice(maxPrice) {
    return products.filter(product => product.price <= maxPrice);
}

// Пример использования
const filteredProducts = filterProductsByPrice(10000);
console.log(filteredProducts);
/* Выведет:
[
    { name: "Телефон", price: 10000 },
    { name: "Наушники", price: 2000 },
    { name: "Флешка", price: 800 }
]
*/

Пояснение:

Массив продуктов:
Создан массив products, содержащий объекты с информацией о товарах (название и цена).
Функция filterProductsByPrice:
Принимает максимальную цену maxPrice в качестве аргумента.
Использует метод filter для фильтрации массива products. В колбек-функции проверяется условие: цена продукта должна быть меньше или равна maxPrice.
Возврат результата:
Возвращается новый массив, содержащий только те продукты, которые соответствуют условию фильтрации.
Пример использования:
Вызываем функцию filterProductsByPrice с максимальной ценой 10000.
Результат выводим в консоль, где должны появиться товары с ценой менее или равной 10000.

Создание массивов

Доступ к элементам массива

Методы работы с массивами

Пример. Поиск самого длинного слова в строке

Пример. Подсчёт количества вхождений каждого слова в тексте

Пример. Фильтрация списка товаров по цене

Добавить комментарий Отменить ответ