JS Tower
JavaScript & TypeScriptМодуль 4: Массивы и объекты

Методы мутации

Методы, изменяющие исходный массив

Цель урока

В этом уроке ты научишься:

  • Добавлять и удалять элементы
  • Сортировать массив
  • Изменять порядок элементов

Важно

Методы в этом уроке изменяют исходный массив. Это называется мутацией.


Добавление элементов

push — в конец

let fruits = ["яблоко", "банан"];

fruits.push("апельсин");
console.log(fruits); // ["яблоко", "банан", "апельсин"]

// Возвращает новую длину
let length = fruits.push("киви", "манго");
console.log(length); // 5

unshift — в начало

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...
Ваш вывод:
Ожидаемый результат:
["яблоко","апельсин"]

Проверь себя

  1. Чем push отличается от unshift?
  2. Почему [10, 2, 1].sort() даёт [1, 10, 2]?
  3. Как удалить элемент по индексу?