Массивы JavaScript

Введение

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

Вы научитесь:

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

В ходе этой лабораторной работы вы будете работать в среде WebIDE. Вы будете писать свой JavaScript код в файле script.js. Чтобы увидеть результаты своего кода, вы будете использовать консоль разработчика браузера, доступ к которой можно получить на вкладке "Web 8080".

Создайте литерал массива с помощью квадратных скобок

На этом шаге вы научитесь наиболее распространенному способу создания массива JavaScript: с помощью литерала массива. Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключенное в квадратные скобки ([]).

Сначала найдите файл script.js в проводнике файлов слева от WebIDE. Щелкните по нему, чтобы открыть в редакторе.

Теперь добавьте следующий код в script.js, чтобы создать массив фруктов и вывести его в консоль.

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits);

После добавления кода сохраните файл (можно использовать Ctrl+S или Cmd+S). Чтобы увидеть вывод, переключитесь на вкладку "Web 8080" в верхней части экрана. Возможно, вам потребуется открыть консоль разработчика браузера (обычно нажатием F12 или щелчком правой кнопкой мыши на странице и выбором "Inspect", затем переходом на вкладку "Console"). Вы должны увидеть массив, напечатанный в консоли.

["Apple", "Banana", "Cherry"];

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

На этом шаге вы научитесь получать доступ к отдельным элементам массива. Массивы JavaScript имеют нулевую индексацию, что означает, что первый элемент находится по индексу 0, второй — по индексу 1 и так далее. Вы можете получить доступ к элементу, указав его порядковый номер в квадратных скобках.

Продолжим редактирование файла script.js. Добавьте следующие строки под существующий код, чтобы получить доступ к первому элементу массива fruits и вывести его в консоль.

// Доступ к первому элементу (индекс 0)
const firstFruit = fruits[0];
console.log("The first fruit is:", firstFruit);

// Доступ к третьему элементу (индекс 2)
console.log("The third fruit is:", fruits[2]);

Сохраните файл script.js и обновите вкладку "Web 8080". Проверьте консоль разработчика. Вы увидите новый вывод в дополнение к выводу из предыдущего шага.

The first fruit is: Apple
The third fruit is: Cherry

Добавление элемента с помощью метода push

На этом шаге вы научитесь добавлять новый элемент в конец существующего массива. Самый простой способ сделать это — использовать метод push(). Этот метод добавляет один или несколько элементов в конец массива и возвращает новую длину массива.

Добавьте следующий код в конец файла script.js, чтобы добавить "Orange" в ваш массив fruits.

// Добавление нового элемента в конец массива
fruits.push("Orange");

console.log("Array after push:", fruits);

Сохраните файл и проверьте консоль на вкладке "Web 8080". Вы увидите, что массив fruits теперь содержит четыре элемента.

Array after push: [ "Apple", "Banana", "Cherry", "Orange" ]

Удаление последнего элемента с помощью метода pop

На этом шаге вы научитесь удалять последний элемент из массива с помощью метода pop(). Этот метод удаляет последний элемент из массива и возвращает этот элемент. Это действие изменяет длину массива.

Добавьте следующий код в конец файла script.js. Это удалит последний добавленный вами элемент и выведет в консоль как удаленный элемент, так и обновленный массив.

// Удаление последнего элемента из массива
const removedFruit = fruits.pop();

console.log("Removed fruit:", removedFruit);
console.log("Array after pop:", fruits);

Сохраните файл и посмотрите на вывод в консоли на вкладке "Web 8080". Вы увидите, что "Orange" был удален, и массив вернулся к своим первоначальным трем элементам.

Removed fruit: Orange
Array after pop: [ "Apple", "Banana", "Cherry" ]

Итерация по массиву с помощью цикла for

На этом шаге вы научитесь перебирать все элементы массива. Распространенный способ сделать это — использовать цикл for. Вы можете использовать свойство length массива, чтобы определить, сколько раз должен выполняться цикл.

Добавьте следующий цикл for в конец файла script.js, чтобы вывести каждый фрукт из массива в консоль на новой строке.

console.log("Iterating through the array with a for loop:");

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

Цикл начинается с i = 0 и продолжается до тех пор, пока i меньше длины массива fruits. В каждой итерации он выводит элемент по текущему индексу i.

Сохраните файл и проверьте консоль на вкладке "Web 8080". Вы увидите каждый фрукт, перечисленный отдельно.

Iterating through the array with a for loop:
Apple
Banana
Cherry

Резюме

Поздравляем с завершением лабораторной работы по массивам JavaScript!

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

• Создании массива с использованием литерального синтаксиса [].
• Доступе к элементам по их индексу, начинающемуся с нуля, например array[0].
• Добавлении элемента в конец массива с помощью метода push().
• Удалении последнего элемента из массива с помощью метода pop().
• Переборе каждого элемента массива с использованием цикла for и свойства length.

Массивы являются краеугольным камнем программирования на JavaScript. Существует множество более мощных методов для изучения, таких как forEach(), map() и filter(), которые могут сделать ваш код еще более лаконичным и выразительным. Продолжайте практиковаться, чтобы освоить эту фундаментальную структуру данных.