Урок 7: Массивы
Массивы являются важной частью JavaScript и позволяют хранить упорядоченные коллекции данных. В этом уроке мы рассмотрим, как создавать массивы, манипулировать ими и использовать основные методы массивов.
Создание массивов
Массивы в JavaScript можно создавать несколькими способами. Наиболее распространенные методы включают использование литералов массива и конструктора Array.
// Создание массива с использованием литерала массива
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits); // ['apple', 'banana', 'cherry']
// Создание массива с использованием конструктора Array
let numbers = new Array(1, 2, 3, 4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]
Литералы массива заключают элементы массива в квадратные скобки [], разделенные запятыми. Конструктор Array используется для создания массива с указанными элементами.
Манипуляции с массивами
После создания массива его элементы можно изменять, добавлять новые или удалять существующие.
// Доступ к элементам массива
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 'apple'
console.log(fruits[2]); // 'cherry'
// Изменение элементов массива
fruits[1] = 'blueberry';
console.log(fruits); // ['apple', 'blueberry', 'cherry']
// Добавление новых элементов
fruits.push('date');
console.log(fruits); // ['apple', 'blueberry', 'cherry', 'date']
// Удаление элементов
fruits.pop();
console.log(fruits); // ['apple', 'blueberry', 'cherry']
Методы push и pop используются для добавления и удаления элементов в конце массива соответственно. Для добавления и удаления элементов в начале массива используются методы unshift и shift.
Основные методы массивов
В JavaScript существует множество методов для работы с массивами. Рассмотрим некоторые из наиболее часто используемых методов.
forEach
Метод forEach выполняет указанную функцию один раз для каждого элемента массива.
// Пример использования forEach
let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(fruit, index) {
console.log(index + ': ' + fruit);
});
// 0: apple
// 1: banana
// 2: cherry
map
Метод map создает новый массив с результатами вызова указанной функции для каждого элемента массива.
// Пример использования map
let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(function(num) {
return num * num;
});
console.log(squares); // [1, 4, 9, 16, 25]
filter
Метод filter создает новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.
// Пример использования filter
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
reduce
Метод reduce применяет функцию к аккумулятору и каждому элементу массива (слева-направо), чтобы свести его к одному значению.
// Пример использования reduce
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
Результат выполнения
['apple', 'banana', 'cherry']
[1, 2, 3, 4, 5]
'apple'
'cherry'
['apple', 'blueberry', 'cherry']
['apple', 'blueberry', 'cherry', 'date']
['apple', 'blueberry', 'cherry']
0: apple
1: banana
2: cherry
[1, 4, 9, 16, 25]
[2, 4]
15
Упражнения
Упражнение 1: Обход массива
Создайте массив colors с элементами 'red', 'green', 'blue'. Используйте метод forEach для вывода каждого цвета и его индекса в консоль.
Решение:
// Объявление массива
let colors = ['red', 'green', 'blue'];
// Использование метода forEach
colors.forEach(function(color, index) {
console.log(index + ': ' + color);
});
// 0: red
// 1: green
// 2: blue
Объяснение: Мы объявили массив colors с тремя элементами и использовали метод forEach для вывода каждого цвета и его индекса в консоль.
Упражнение 2: Фильтрация массива
Создайте массив чисел и используйте метод filter для создания нового массива, содержащего только четные числа. Выведите новый массив в консоль.
Решение:
// Объявление массива чисел
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Фильтрация четных чисел
let evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6, 8, 10]
Объяснение: Мы объявили массив numbers и использовали метод filter для создания нового массива evenNumbers, содержащего только четные числа. Затем вывели новый массив в консоль.