Введение
В этом лабе студенты изучат фундаментальные концепции создания и манипулирования массивами в 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 в эффективном хранении и организации данных.
