Создание и манипуляция массивами в JavaScript

Введение

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

Лаб涵盖了关键技能，如用数字、字符串和混合元素定义数组，使用索引访问单个数组元素，以及演示基本的数组操作技术。通过实际操作示例，学习者将获得创建、访问和与数组交互的实践经验，数组是JavaScript编程中的基本数据结构。

Разобраться с определением и инициализацией массива

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

Давайте начнем с создания простого массива в JavaScript. Откройте WebIDE и создайте новый файл под названием arrays.js в директории ~/project.

// Создание массива чисел
let numbers = [1, 2, 3, 4, 5];

// Создание массива строк
let fruits = ["apple", "banana", "orange"];

// Создание пустого массива
let emptyArray = [];

// Создание массива с смешанными типами данных
let mixedArray = [42, "hello", true, null];

console.log("Массив чисел:", numbers);
console.log("Массив фруктов:", fruits);
console.log("Пустой массив:", emptyArray);
console.log("Массив с смешанными типами данных:", mixedArray);

При запуске этого кода вы увидите следующий пример вывода:

Массив чисел: [1, 2, 3, 4, 5]
Массив фруктов: ['apple', 'banana', 'orange']
Пустой массив: []
Массив с смешанными типами данных: [42, 'hello', true, null]

Основные моменты по инициализации массивов:

• Массивы создаются с использованием квадратных скобок []
• Массивы могут содержать элементы разных типов
• Массивы могут быть пустыми или предварительно заполнены
• Первый элемент массива всегда имеет индекс 0

Вы также можете создавать массивы с использованием конструктора Array:

// Использование конструктора Array
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log(
  "Массив, созданный с использованием конструктора:",
  numbersConstructor
);

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

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

Откройте файл arrays.js в директории ~/project и добавьте следующий код:

// Создание массива цветов
let colors = ["red", "green", "blue", "yellow", "purple"];

// Обращение к элементам массива по индексу
console.log("Первый цвет:", colors[0]); // Первый элемент
console.log("Третий цвет:", colors[2]); // Третий элемент
console.log("Последний цвет:", colors[colors.length - 1]); // Последний элемент

// Изменение элементов массива
colors[1] = "orange"; // Замена второго элемента
console.log("Измененный массив цветов:", colors);

// Демонстрация диапазона индексов
console.log("Длина массива:", colors.length);

При запуске этого кода вы увидите следующий пример вывода:

Первый цвет: red
Третий цвет: blue
Последний цвет: purple
Измененный массив цветов: ['red', 'orange', 'blue', 'yellow', 'purple']
Длина массива: 5

Основные моменты по индексированию массивов:

• Индексы начинаются с 0
• Используйте квадратные скобки [] для доступа к элементам
• array.length возвращает общее количество элементов
• Вы можете изменить элементы, присвоив новое значение конкретному индексу
• Для доступа к последнему элементу используйте array[array.length - 1]

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

console.log("Обращение к индексу за пределами диапазона:", colors[10]); // Возвращает undefined

Создать массив фруктов

В этом шаге вы создадите массив фруктов и узнаете, как работать с ним. Откройте файл arrays.js в директории ~/project и добавьте следующий код:

// Создать массив фруктов
let fruits = ["apple", "banana", "orange", "mango", "strawberry"];

// Показать весь массив фруктов
console.log("Массив фруктов:", fruits);

// Добавить новый фрукт в конец массива
fruits.push("grape");
console.log("Фрукты после добавления винограда:", fruits);

// Создать массив с разными видами фруктов
let tropicalFruits = ["pineapple", "coconut", "papaya"];

// Объединить два массива фруктов
let allFruits = fruits.concat(tropicalFruits);
console.log("Все фрукты:", allFruits);

// Проверить количество фруктов
console.log("Общее количество фруктов:", allFruits.length);

При запуске этого кода вы увидите следующий пример вывода:

Массив фруктов: ['apple', 'banana', 'orange','mango','strawberry']
Фрукты после добавления винограда: ['apple', 'banana', 'orange','mango','strawberry', 'grape']
Все фрукты: ['apple', 'banana', 'orange','mango','strawberry', 'grape', 'pineapple', 'coconut', 'papaya']
Общее количество фруктов: 9

Основные моменты по созданию и манипуляции с массивами фруктов:

• Массивы можно создавать с несколькими элементами
• Вы можете добавлять новые элементы с использованием push()
• Массивы можно объединять с использованием concat()
• Свойство length показывает общее количество элементов

Вывести элементы массива на веб-страницу

В этом шаге вы узнаете, как отображать элементы массива на веб-странице с использованием HTML и JavaScript. Сначала создайте HTML-файл с именем fruits.html в директории ~/project:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Отображение массива фруктов</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #fruits-list {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Моя коллекция фруктов</h1>
    <div id="fruits-list"></div>

    <script>
      // Создать массив фруктов
      let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry"];

      // Получить контейнер для списка фруктов
      let fruitsList = document.getElementById("fruits-list");

      // Создать неупорядоченный список для отображения фруктов
      let ul = document.createElement("ul");

      // Пройти по массиву фруктов и создать элементы списка
      fruits.forEach(function (fruit) {
        let li = document.createElement("li");
        li.textContent = fruit;
        ul.appendChild(li);
      });

      // Добавить список на страницу
      fruitsList.appendChild(ul);
    </script>
  </body>
</html>

Этот пример демонстрирует несколько важных концепций:

• Создание HTML-структуры
• Использование JavaScript для манипуляции с DOM
• Отображение элементов массива на веб-странице
• Использование forEach() для перебора элементов массива

При открытии этого HTML-файла в веб-браузере вы увидите список фруктов, отображенный на странице.

Альтернативный метод с использованием innerHTML:

// Альтернативный метод для отображения фруктов
let fruitsList = document.getElementById("fruits-list");
fruitsList.innerHTML = fruits.map((fruit) => `<li>${fruit}</li>`).join("");

Изучить базовые операции с массивами

В этом шаге вы узнаете о распространенных операциях с массивами в JavaScript. Откройте файл arrays.js в директории ~/project и добавьте следующий код:

// Создать массив чисел
let numbers = [5, 2, 8, 1, 9, 3];

// Добавление элементов
numbers.push(10); // Добавить элемент в конец
numbers.unshift(0); // Добавить элемент в начало
console.log("После добавления элементов:", numbers);

// Удаление элементов
let lastNumber = numbers.pop(); // Удалить последний элемент
let firstNumber = numbers.shift(); // Удалить первый элемент
console.log("После удаления элементов:", numbers);

// Сортировка массива
numbers.sort((a, b) => a - b); // По возрастанию
console.log("Отсортированный массив:", numbers);

// Переворачивание массива
numbers.reverse();
console.log("Перевернутый массив:", numbers);

// Поиск элементов
let index = numbers.indexOf(8);
console.log("Индекс 8:", index);

// Вырезание части массива
let slicedNumbers = numbers.slice(1, 4);
console.log("Вырезанный массив:", slicedNumbers);

// Фильтрация массива
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("Четные числа:", evenNumbers);

// Преобразование массива
let squaredNumbers = numbers.map((num) => num * num);
console.log("Квадраты чисел:", squaredNumbers);

При запуске этого кода вы увидите следующий пример вывода:

После добавления элементов: [0, 5, 2, 8, 1, 9, 3, 10]
После удаления элементов: [5, 2, 8, 1, 9, 3, 10]
Отсортированный массив: [1, 2, 3, 5, 8, 9, 10]
Перевернутый массив: [10, 9, 8, 5, 3, 2, 1]
Индекс 8: 2
Вырезанный массив: [9, 8, 5]
Четные числа: [10, 8, 2]
Квадраты чисел: [100, 81, 64, 25, 9, 4, 1]

Показанные основные операции с массивами:

• push() и unshift() для добавления элементов
• pop() и shift() для удаления элементов
• sort() для упорядочивания элементов
• reverse() для изменения порядка элементов в массиве
• indexOf() для поиска позиции элемента
• slice() для извлечения части массива
• filter() для создания нового массива с определенными элементами
• map() для преобразования элементов массива

Резюме

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

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