JavaScript & TypeScriptМодуль 4: Массивы и объекты
Основы массивов
Создание и базовая работа с массивами
Цель урока
В этом уроке ты научишься:
- Создавать массивы
- Получать и изменять элементы
- Работать с длиной массива
Создание массива
// Литерал (рекомендуется)
let fruits = ["яблоко", "банан", "апельсин"];
// Пустой массив
let empty = [];
// Конструктор (редко используется)
let numbers = new Array(1, 2, 3);Доступ к элементам
Индексация начинается с 0:
let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]); // "яблоко"
console.log(fruits[1]); // "банан"
console.log(fruits[2]); // "апельсин"
console.log(fruits[3]); // undefinedМетод at()
let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits.at(0)); // "яблоко"
console.log(fruits.at(-1)); // "апельсин" (последний)
console.log(fruits.at(-2)); // "банан" (предпоследний)Изменение элементов
let fruits = ["яблоко", "банан", "апельсин"];
fruits[1] = "груша";
console.log(fruits); // ["яблоко", "груша", "апельсин"]
// Добавление по индексу
fruits[3] = "киви";
console.log(fruits); // ["яблоко", "груша", "апельсин", "киви"]Длина массива
let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits.length); // 3
// Последний элемент
console.log(fruits[fruits.length - 1]); // "апельсин"
// Изменение длины
fruits.length = 2;
console.log(fruits); // ["яблоко", "банан"]
fruits.length = 0;
console.log(fruits); // [] — очистка массиваМногомерные массивы
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6
console.log(matrix[2][1]); // 8Проверка массива
let arr = [1, 2, 3];
let obj = { a: 1 };
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
console.log(typeof arr); // "object" (не надёжно)Перебор массива
for
let fruits = ["яблоко", "банан", "апельсин"];
for (let i = 0; i < fruits.length; i++) {
console.log(i + ": " + fruits[i]);
}for...of
let fruits = ["яблоко", "банан", "апельсин"];
for (let fruit of fruits) {
console.log(fruit);
}forEach
let fruits = ["яблоко", "банан", "апельсин"];
fruits.forEach(function(fruit, index) {
console.log(index + ": " + fruit);
});Рекомендация
Для простого перебора используй for...of. Для работы с индексами — forEach или for.
Практика
Задание 1: Доступ к элементам
Задача: Выведи первый и последний элемент массива.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
красный жёлтый
Задание 2: Сумма элементов
Задача: Вычисли сумму всех чисел в массиве.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
150
Задание 3: Двумерный массив
Задача: Найди сумму элементов главной диагонали.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
15
Проверь себя
- С какого числа начинается индексация?
- Как получить последний элемент?
- Как проверить, что переменная — массив?