Манипулировать массивами с помощью методов массивов JavaScript

CSSBeginner
Практиковаться сейчас

Введение

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