Array.pop() в JavaScript — витягти останній елемент

Опис

Метод pop() використовується для роботи з масивами, коли потрібно видалити останній елемент масиву. Після вилучення елемента з масиву, метод повертає його значення, щоб ми могли дізнатися, яке саме значення було видалено.

Розглянемо приклад:

let animals = ["cat", "dog", "fish"];
let lastAnimal = animals.pop();
console.log(animals);  // Output: ["cat", "dog"]
console.log(lastAnimal); // Output: "fish"

У цьому прикладі ми маємо масив animals, що містить три елементи. Після застосування методу pop(), останній елемент fish видаляється з масиву, але зберігається в змінній lastAnimal.

Дуже важливо розуміти, що pop() є мутуючим методом. Це означає, що він впливає на довжину та вміст масиву, представленого як this. Якщо ж вам потрібно зберегти вихідний масив без змін, але повернути новий масив без останнього елемента, слід використовувати arr.slice(0, -1).

правити

Загальний опис

правити

Порада

Переконайтеся, що ви викликаєте метод pop() на конкретному масиві, на якому хочете здійснити операцію видалення останнього елемента. Виклик цього методу без контексту або на об'єкті не відповідного типу може призвести до помилки.

автор: Bond правити

Порада

Перед викликом методу pop() варто переконатися, що масив не є пустим. Якщо масив пустий, метод pop() поверне undefined. Тому варто використовувати умовну перевірку, щоб переконатися, що масив має елементи перед викликом pop().

автор: Bond правити

Нотатка

Метод pop() не тільки видаляє останній елемент з масиву, але й повертає його значення. Ви можете зберегти це значення у змінну або використовувати його безпосередньо.

автор: Bond правити

Нотатка

Якщо ви вирішите застосувати pop() до порожнього масиву, він поверне undefined, оскільки в масиві немає жодного елемента для видалення.

автор: Bond правити

Нотатка

Є інший метод, Array.prototype.shift(), який дуже схожий на pop(). Однак основна відмінність полягає в тому, що цей метод видаляє перший елемент масиву, а не останній.

автор: Bond правити

Нотатка

Метод pop() очікує, що масив, представлений як this, матиме властивість length.

автор: Bond правити

Нотатка

Хоча рядки мають властивості, що нагадують масиви, pop() не призначений для роботи з рядками, тому що рядки в JavaScript є незмінними.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

pop()

Повернення

value

Видалений елемент з масиву.

автор: Bond

правити

undefined

Якщо масив порожній.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	1	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const myFish = ["angel", "clown", "mandarin", "sturgeon"];

const popped = myFish.pop();

console.log(myFish); // ['angel', 'clown', 'mandarin']

console.log(popped); // 'sturgeon'

const arrayLike = {
  length: 3,
  unrelated: "foo",
  2: 4,
};
console.log(Array.prototype.pop.call(arrayLike));
// 4
console.log(arrayLike);
// { length: 2, unrelated: 'foo' }

const plainObj = {};
// Відсутня властивість length, тому довжина (length) дорівнює 0
Array.prototype.pop.call(plainObj);
console.log(plainObj);
// { length: 0 }

<header>
  <h2 class="title">Видалення останнього елемента з масиву</h2>
  <p class="description">Цей метод видаляє останній елемент з масиву і повертає його значення.</p>
</header>
<main>
  <div>
    <h3>Результати:</h3>
    <p>Масив до видалення: <span id="preview"></span></p>
    <p>Видалений елемент: <span id="poppedElement"></span></p>
    <p>Масив після видалення: <span id="remainingArray"></span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

main div {
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

main div h3 {
  margin-top: 0;
}

main div p {
  margin: 10px 0;
}

main div p span {
  font-weight: bold;
}

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

document.getElementById('preview').innerText = plants;

const poppedElement = plants.pop();
const remainingArray = plants;

document.getElementById('poppedElement').innerText = poppedElement;
document.getElementById('remainingArray').innerText = remainingArray;
//# sourceURL=pen.js

const stack = ['перший', 'другий', 'третій'];
console.log(stack.pop()); // "третій" — повертається знятий елемент
console.log(stack);       // ["перший","другий"]

console.log([].pop());    // undefined, а не помилка й не null

// пастка: цикл обривається на хибному значенні
const nums = [1, 0, 2];
const got = [];
let x;
while ((x = nums.pop())) got.push(x);
console.log(got, nums);   // [2] і [1] — нуль зник, одиниця лишилася

// надійний варіант
const nums2 = [1, 0, 2];
const ok = [];
while (nums2.length) ok.push(nums2.pop());
console.log(ok);          // [2,0,1]

// без мутації — slice, а не pop
const src = [1, 2, 3];
console.log(src.slice(0, -1), src); // [1,2] і [1,2,3]