Загрузка...

Методы массивов

На прошлой странице перезапись ячейки не трогала число цветов. Здесь корзина с хлебом, молоком и яйцами. Вызов метода имеет право сделать позиций больше или меньше.

Число может сдвинуться

Эти пять вызовов правят тот самый массив, который уже у тебя в руках, а не свежий текст, как методы строки, и не функцию, которую ты сам положил на объект. push, pop, unshift, shift и splice — готовые инструменты списка.

Пять вызовов на одной карточке

Держи карточку рядом с примерами, чтобы не листать наверх каждый раз. Часто значение, которое вернулось, — это не корзина. Это число, ушедший предмет или маленький массив.

📊 Пять вызовов массива

Вызов Где действует Что возвращает length
push конец новая длина растёт на столько, сколько передал
pop конец удалённый элемент меньше на один
unshift начало новая длина растёт на столько, сколько передал
shift начало удалённый элемент меньше на один
splice индекс, который выбрал сам маленький массив удалённых меньше на число удалений

Вызовы, которые добавляют, отдают новую длину числом, а вызовы, которые снимают с края, отдают сам предмет. splice даже ради одной ячейки возвращает маленький массив, и слово сидит в индексе 0 этого результата.

Чай в конце

Корзина начинается с хлеба, молока и яиц. push кладёт чай после яиц. Число, которое слышишь сразу, — это сколько ячеек есть сейчас.

Положить чай в конец

javascript 
let cart = ["bread", "milk", "eggs"];
let n = cart.push("tea");
console.log(n);
console.log(cart[3]);
console.log(cart.length);

n равно 4, то есть новой длине, а не слову tea. Индекс 3 держит чай, и length тоже 4, потому что в конец добавлен один предмет. Два аргумента вырастили бы корзину на две ячейки. Здесь аргумент один, чтобы число читалось легко.

Забрать последний предмет

javascript 
let cart = ["bread", "milk", "eggs"];
let gone = cart.pop();
console.log(gone);
console.log(cart.length);

Последний предмет уходит

pop снимает яйца с конца и отдаёт эту строку, а length становится 2. В корзине остаются хлеб, затем молоко. Этот вызов не отдаёт новую длину. Пустая корзина вернула бы undefined, и примеры этой страницы с пустой не начинаются.

Положить чай вперёд

javascript 
let cart = ["bread", "milk", "eggs"];
let n = cart.unshift("tea");
console.log(n);
console.log(cart[0]);
console.log(cart[1]);

Спереди новое

unshift тоже возвращает 4, потому что это новая длина, и индекс 0 теперь чай. Хлеб съезжает на индекс 1, и ни одна ячейка не перезаписана. Каждый старый предмет делает шаг к концу.

Забрать передний предмет

javascript 
let cart = ["bread", "milk", "eggs"];
let gone = cart.shift();
console.log(gone);
console.log(cart[0]);
console.log(cart.length);

Спереди пустеет

shift возвращает хлеб, то есть ушедший предмет, а не длину. После этого индекс 0 — молоко, а length равен 2. Яйца всё ещё последние. Они просто сидят теперь на индексе 1.

Вырезать среднюю ячейку

javascript 
let cart = ["bread", "milk", "eggs"];
let removed = cart.splice(1, 1);
console.log(removed[0]);
console.log(cart.length);
console.log(cart[1]);

Ячейка, которую выбрал ты

Первый аргумент — начальный индекс, второй говорит, сколько ячеек стереть. Молоко уходит, и removed — массив из одной ячейки, поэтому removed[0] это молоко, а сам вызов не является строкой молока. length становится 2, индекс 1 — яйца, потому что хлеб остался на 0, а яйца закрыли дырку. Если передать 0 как число удалений, будет вставка без удаления. Эту форму пока отложи.

Страница печатает новую длину

Добавь чай через push. Потом запиши length в абзац. Строка должна быть числом, а не списком покупок.

Пример страницы — длина после push

html 
<!DOCTYPE html>
<html>
<head>
<title>array-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let cart = ["bread", "milk", "eggs"];
cart.push("tea");
let box = document.getElementById("line");
box.textContent = cart.length;
</script>
</body>
</html>

Абзац показывает 4. Поменяй добавленную строку с чая на джем и обнови страницу; строка остаётся 4, потому что предмет по-прежнему один. Слово сменилось, число нет. Хлеб, молоко и яйца остаются перед тем, что ты отправил через push.

Потренируйся на свежей корзине

  1. Через push положи чай после хлеба, молока и яиц и прочитай и вернувшееся число, и индекс 3.
  2. Один раз вызови pop, прочитай удалённое слово и новую длину, затем через unshift поставь чай вперёд и посмотри индексы 0 и 1.
  3. Один раз вызови shift, прочитай ушедшее слово и новый индекс 0, затем splice с индекса 1 с удалением одной ячейки и поставь removed[0] рядом с длиной.
  4. На странице сделай push чая, обнови, прочитай строку, потом замени чай на джем и обнови ещё раз.

Где теряют балл

  • Хотел добавить ячейку, а написал cart[1] = "tea", или забыл скобки у push и pop
  • Принял значение от pop за новую длину
  • Ждал, что splice вернёт голую строку молока, а не массив
  • Решил, что после unshift индекс 0 всё ещё хлеб, или смешал эту страницу с обходом каждого элемента и поиском по значению

Что унести

  • Эти вызовы правят тот же массив
  • push и unshift возвращают новую длину, а pop и shift — ушедший предмет
  • splice возвращает маленький массив удалённых
  • Абзац может после push показать только длину
  • Дальше идёт перебор массивов, а поиск в массивах после него

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 39 из 40
Javascript Урок