Введение
В этом лабе студенты изучат важные методы манипуляции массивами в JavaScript с помощью комплексного практического опыта обучения. Лаб涵盖关键数组方法，如slice()、unshift()、shift()、排序和转换数组，为管理和修改数组数据结构提供实用技能。
Участники узнают, как извлекать элементы массива с использованием slice(), добавлять элементы в начало массива с использованием unshift(), удалять первый элемент с использованием shift() и выполнять сортировку и переворачивание массива. Решив практические задачи по программированию, студенты получат четкое представление о том, как эффективно манипулировать массивами в JavaScript, повысив свои навыки программирования и способности к решению задач.
Вырезать элементы массива
В этом шаге вы узнаете, как использовать метод slice() для извлечения части массива в JavaScript. Метод slice() позволяет создать новый массив, выбрав элементы из существующего массива, не изменяя исходный массив.
Давайте начнем с создания примера массива и практики вырезания его элементов. Откройте WebIDE и создайте новый файл под названием array-slice.js в директории ~/project.
// Создайте массив фруктов
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
// Вырежьте первые три элемента
const slicedFruits1 = fruits.slice(0, 3);
console.log("Первые три фрукта:", slicedFruits1);
// Вырежьте с индекса 2 до конца
const slicedFruits2 = fruits.slice(2);
console.log("Фрукты начиная с индекса 2:", slicedFruits2);
// Вырежьте последние два элемента с использованием отрицательного индекса
const slicedFruits3 = fruits.slice(-2);
console.log("Последние два фрукта:", slicedFruits3);
Теперь запустите скрипт, чтобы увидеть результаты:
node ~/project/array-slice.js
Пример вывода:
Первые три фрукта: [ 'apple', 'banana', 'cherry' ]
Фрукты начиная с индекса 2: [ 'cherry', 'date', 'elderberry' ]
Последние два фрукта: [ 'date', 'elderberry' ]
Основные моменты о slice():
- Первый аргумент - это начальный индекс (включительно)
- Второй аргумент - это конечный индекс (не включительно)
- Если конечный индекс не указан, то вырезается до конца массива
- Отрицательные индексы считаются с конца массива
- Исходный массив остается неизменным
Добавить элементы в начало массива с использованием unshift()
В этом шаге вы узнаете, как использовать метод unshift() для добавления одного или нескольких элементов в начало массива в JavaScript. Метод unshift() изменяет исходный массив, вставляя элементы в начало, и возвращает новую длину массива.
Создайте новый файл под названием array-unshift.js в директории ~/project и добавьте следующий код:
// Создайте начальный массив фруктов
let fruits = ["banana", "cherry", "date"];
console.log("Исходный массив:", fruits);
// Добавьте один элемент в начало массива
fruits.unshift("apple");
console.log("После добавления одного элемента:", fruits);
// Добавьте несколько элементов в начало массива
fruits.unshift("grape", "kiwi");
console.log("После добавления нескольких элементов:", fruits);
// Сохраните новую длину массива
let newLength = fruits.unshift("orange");
console.log("Новая длина массива:", newLength);
console.log("Финальный массив:", fruits);
Теперь запустите скрипт, чтобы увидеть результаты:
node ~/project/array-unshift.js
Пример вывода:
Исходный массив: [ 'banana', 'cherry', 'date' ]
После добавления одного элемента: [ 'apple', 'banana', 'cherry', 'date' ]
После добавления нескольких элементов: [ 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
Новая длина массива: 7
Финальный массив: [ 'orange', 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
Основные моменты о unshift():
- Добавляет один или несколько элементов в начало массива
- Изменяет исходный массив
- Возвращает новую длину массива
- Может добавить несколько элементов за один вызов
- Сдвигает существующие элементы на большие индексы
Удалить первый элемент с использованием shift()
В этом шаге вы узнаете, как использовать метод shift() для удаления первого элемента из массива в JavaScript. Метод shift() изменяет исходный массив, удаляя первый элемент, и возвращает удаленный элемент.
Создайте новый файл под названием array-shift.js в директории ~/project и добавьте следующий код:
// Создайте начальный массив языков программирования
let languages = ["JavaScript", "Python", "Java", "C++", "Ruby"];
console.log("Исходный массив:", languages);
// Удалите и сохраните первый элемент
let removedLanguage = languages.shift();
console.log("Удаленный язык:", removedLanguage);
console.log("Массив после сдвига:", languages);
// Удалите несколько элементов, вызвав shift() несколько раз
let secondRemovedLanguage = languages.shift();
console.log("Второй удаленный язык:", secondRemovedLanguage);
console.log("Массив после второго сдвига:", languages);
// Демонстрируйте, что происходит с пустым массивом
let emptyArray = [];
let result = emptyArray.shift();
console.log("Сдвиг из пустого массива:", result);
console.log("Пустой массив остается:", emptyArray);
Теперь запустите скрипт, чтобы увидеть результаты:
node ~/project/array-shift.js
Пример вывода:
Исходный массив: [ 'JavaScript', 'Python', 'Java', 'C++', 'Ruby' ]
Удаленный язык: JavaScript
Массив после сдвига: [ 'Python', 'Java', 'C++', 'Ruby' ]
Второй удаленный язык: Python
Массив после второго сдвига: [ 'Java', 'C++', 'Ruby' ]
Сдвиг из пустого массива: undefined
Пустой массив остается: []
Основные моменты о shift():
- Удаляет первый элемент из массива
- Изменяет исходный массив
- Возвращает удаленный элемент
- Возвращает
undefined, если массив пуст - Уменьшает длину массива на 1
Отсортировать и перевернуть элементы массива
В этом шаге вы узнаете, как использовать методы sort() и reverse() для манипуляции элементами массива в JavaScript. Эти методы предоставляют простые способы организации и переупорядочивания содержимого массива.
Создайте новый файл под названием array-sort-reverse.js в директории ~/project и добавьте следующий код:
// Создайте массивы для демонстрации сортировки
let numbers = [5, 2, 9, 1, 7];
let fruits = ["banana", "apple", "cherry", "date"];
// Стандартная сортировка (лексикографическая для строк, по возрастанию для чисел)
console.log("Исходные числа:", numbers);
numbers.sort();
console.log("Стандартная сортировка:", numbers);
// Числовая сортировка требует функции сравнения
numbers = [5, 2, 9, 1, 7];
numbers.sort((a, b) => a - b);
console.log("Числовая сортировка:", numbers);
// Обратная сортировка
console.log("\nИсходные фрукты:", fruits);
fruits.sort().reverse();
console.log("Отсортированные и перевернутые:", fruits);
// Перевернуть массив без сортировки
let colors = ["red", "green", "blue", "yellow"];
console.log("\nИсходные цвета:", colors);
colors.reverse();
console.log("Перевернутые цвета:", colors);
Теперь запустите скрипт, чтобы увидеть результаты:
node ~/project/array-sort-reverse.js
Пример вывода:
Исходные числа: [ 5, 2, 9, 1, 7 ]
Стандартная сортировка: [ 1, 2, 5, 7, 9 ]
Числовая сортировка: [ 1, 2, 5, 7, 9 ]
Исходные фрукты: [ 'banana', 'apple', 'cherry', 'date' ]
Отсортированные и перевернутые: [ 'date', 'cherry', 'banana', 'apple' ]
Исходные цвета: [ 'red', 'green', 'blue', 'yellow' ]
Перевернутые цвета: [ 'yellow', 'blue', 'green','red' ]
Основные моменты о sort() и reverse():
sort()изменяет исходный массив- Стандартный
sort()преобразует элементы в строки и сортирует лексикографически - Используйте функцию сравнения для числовой или пользовательской сортировки
reverse()переворачивает порядок элементов в массиве- Оба метода работают "на месте", изменяя исходный массив
Преобразовать и проанализировать массивы
В этом шаге вы изучите мощные методы массивов, такие как map(), filter() и reduce(), для преобразования и анализа элементов массива в JavaScript. Эти методы предоставляют элегантные способы манипуляции и извлечения информации из массивов.
Создайте новый файл под названием array-transform.js в директории ~/project и добавьте следующий код:
// Примерный массив оценок студентов
const scores = [85, 92, 78, 65, 90, 55, 88];
// Используйте map() для создания нового массива с измененными значениями
const adjustedScores = scores.map((score) => score + 5);
console.log("Исходные оценки:", scores);
console.log("Корректированные оценки:", adjustedScores);
// Используйте filter() для создания массива及格ных оценок (выше 70)
const passingScores = scores.filter((score) => score >= 70);
console.log("Пройденные оценки:", passingScores);
// Используйте reduce() для вычисления общей суммы оценок
const totalScore = scores.reduce((sum, score) => sum + score, 0);
const averageScore = totalScore / scores.length;
console.log("Общая оценка:", totalScore);
console.log("Средняя оценка:", averageScore.toFixed(2));
// Объедините методы: найдите среднюю оценку для пройденных оценок
const averagePassingScore =
passingScores.reduce((sum, score) => sum + score, 0) / passingScores.length;
console.log("Средняя пройденная оценка:", averagePassingScore.toFixed(2));
// Преобразуйте массив имен
const names = ["alice", "bob", "charlie"];
const capitalizedNames = names.map(
(name) => name.charAt(0).toUpperCase() + name.slice(1)
);
console.log("Исходные имена:", names);
console.log("Имена с заглавной буквой:", capitalizedNames);
Теперь запустите скрипт, чтобы увидеть результаты:
node ~/project/array-transform.js
Пример вывода:
Исходные оценки: [ 85, 92, 78, 65, 90, 55, 88 ]
Корректированные оценки: [ 90, 97, 83, 70, 95, 60, 93 ]
Пройденные оценки: [ 85, 92, 78, 90, 88 ]
Общая оценка: 553
Средняя оценка: 79.00
Средняя пройденная оценка: 86.60
Исходные имена: [ 'alice', 'bob', 'charlie' ]
Имена с заглавной буквой: [ 'Alice', 'Bob', 'Charlie' ]
Основные моменты о методах преобразования массивов:
map(): Создает новый массив, преобразовав каждый элементfilter(): Создает новый массив с элементами, которые проходят тестreduce(): Сокращает массив до одного значения с помощью обратного вызова функции- Эти методы не изменяют исходный массив
- Можно объединять их в цепочку для сложных преобразований
Резюме
В этом лабе участники изучали различные методы манипуляции массивами в JavaScript. Лаборатория была сосредоточена на обучении slicing элементов массива с использованием метода slice(), который позволяет извлекать определенные части массива без изменения исходного массива. Участники практиковались в создании новых массивов путём выбора элементов с использованием различных диапазонов индексов, включая положительные и отрицательные индексы.
Лаборатория также познакомила с методами, такими как unshift() для добавления элементов в начало массива, shift() для удаления первого элемента, а также с методами сортировки и переворачивания элементов массива. С помощью практических заданий по программированию, учащиеся приобрели практический опыт в преобразовании и анализе массивов, поняли, как эти методы могут эффективно изменять и извлекать данные из структур массивов в JavaScript.
