JavaScript & TypeScriptМодуль 4: Массивы и объекты
Методы мутации
Методы, изменяющие исходный массив
Цель урока
В этом уроке ты научишься:
- Добавлять и удалять элементы
- Сортировать массив
- Изменять порядок элементов
Важно
Методы в этом уроке изменяют исходный массив. Это называется мутацией.
Добавление элементов
push — в конец
let fruits = ["яблоко", "банан"];
fruits.push("апельсин");
console.log(fruits); // ["яблоко", "банан", "апельсин"]
// Возвращает новую длину
let length = fruits.push("киви", "манго");
console.log(length); // 5unshift — в начало
let fruits = ["яблоко", "банан"];
fruits.unshift("апельсин");
console.log(fruits); // ["апельсин", "яблоко", "банан"]Удаление элементов
pop — с конца
let fruits = ["яблоко", "банан", "апельсин"];
let last = fruits.pop();
console.log(last); // "апельсин"
console.log(fruits); // ["яблоко", "банан"]shift — с начала
let fruits = ["яблоко", "банан", "апельсин"];
let first = fruits.shift();
console.log(first); // "яблоко"
console.log(fruits); // ["банан", "апельсин"]splice — универсальный метод
// splice(start, deleteCount, ...items)
let fruits = ["яблоко", "банан", "апельсин", "киви"];
// Удаление
let removed = fruits.splice(1, 2);
console.log(removed); // ["банан", "апельсин"]
console.log(fruits); // ["яблоко", "киви"]
// Вставка
fruits.splice(1, 0, "груша", "манго");
console.log(fruits); // ["яблоко", "груша", "манго", "киви"]
// Замена
fruits.splice(0, 1, "ананас");
console.log(fruits); // ["ананас", "груша", "манго", "киви"]Отрицательные индексы
let fruits = ["яблоко", "банан", "апельсин"];
fruits.splice(-1, 1); // удалить последний
console.log(fruits); // ["яблоко", "банан"]Сортировка
sort
let fruits = ["банан", "яблоко", "апельсин"];
fruits.sort();
console.log(fruits); // ["апельсин", "банан", "яблоко"]Сортировка чисел
let numbers = [10, 2, 30, 1];
// Неправильно — как строки
numbers.sort();
console.log(numbers); // [1, 10, 2, 30]
// Правильно — с функцией сравнения
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 10, 30]
// По убыванию
numbers.sort((a, b) => b - a);
console.log(numbers); // [30, 10, 2, 1]Сортировка объектов
let users = [
{ name: "Иван", age: 25 },
{ name: "Мария", age: 22 },
{ name: "Пётр", age: 30 }
];
users.sort((a, b) => a.age - b.age);
console.log(users);
// [{ name: "Мария", age: 22 }, { name: "Иван", age: 25 }, { name: "Пётр", age: 30 }]reverse
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]fill
let arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]
arr.fill(9, 1, 3);
console.log(arr); // [0, 9, 9, 0, 0]
// Создание массива
let zeros = new Array(5).fill(0);
console.log(zeros); // [0, 0, 0, 0, 0]copyWithin
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3);
console.log(arr); // [4, 5, 3, 4, 5]Сводная таблица
| Метод | Действие | Возвращает |
|---|---|---|
push() | Добавить в конец | Новую длину |
pop() | Удалить с конца | Удалённый элемент |
unshift() | Добавить в начало | Новую длину |
shift() | Удалить с начала | Удалённый элемент |
splice() | Добавить/удалить | Удалённые элементы |
sort() | Сортировка | Отсортированный массив |
reverse() | Развернуть | Развёрнутый массив |
fill() | Заполнить значением | Изменённый массив |
Практика
Задание 1: Очередь
Задача: Реализуй очередь: добавь элемент в конец, удали из начала.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
["второй","третий"]
Задание 2: Сортировка
Задача: Отсортируй массив по убыванию.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
[9,8,5,2,1]
Задание 3: Удаление элемента
Задача: Удали элемент "банан" из массива.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
["яблоко","апельсин"]
Проверь себя
- Чем
pushотличается отunshift? - Почему
[10, 2, 1].sort()даёт[1, 10, 2]? - Как удалить элемент по индексу?