October 9, 2020

Массивы. Метод push() и pop()

В продолжение темы, в предидущей статье Массивы ,теперь о некоторых встроенных методах JavaScript, которые упрощают работу с массивами.

Эти методы специально вызываются у массивов, чтобы упростить выполнение общих задач, таких как добавление и удаление элементов в массиве.

Метод push()

И сегодня речь пойдет про метод, .push (), который позволяет нам добавлять элементы в конец массива. Вот пример того, как он используется:

const itemTracker = ['item 0', 'item 1', 'item 2'];
itemTracker.push('item 3', 'item 4');
console.log(itemTracker); 
// Output: ['item 0', 'item 1', 'item 2', 'item 3', 'item 4'];

Итак, как работает .push ()?

  1. Мы обращаемся к методу push, используя точечную нотацию, связывая push с itemTracker точкой.
  2. Затем мы вызываем это как функцию. Это потому, что .push () - это функция, которую JavaScript позволяет нам использовать прямо в массиве.
    .push () может принимать один аргумент или несколько аргументов, разделенных запятыми.
  3. В этом случае мы добавляем два элемента: item 3 и item 4 в itemTracker.
Обратите внимание, что .push () изменяет или мутирует itemTracker. Вы также можете заметить, что .push (), можно назвать методом деструктивного массива, так как он изменяет исходный массив.

Если вы ищете метод, который изменяет массив, добавляя в него элементы, тогда .push () - это метод который вам нужен!


Практика

  1. Добавьте два элемента в массив задач по дому chores с помощью .push ().
  2. Выведите новое содержимое массива в консоль.
const chores = ['мыть посуду', 'стирать', 'выносить мусор'];

Метод pop()

Другой метод массива, .pop (), удаляет последний элемент массива.

const newItemTracker = ['item 0', 'item 1', 'item 2'];
const removed = newItemTracker.pop();
console.log(newItemTracker); 
// Output: [ 'item 0', 'item 1' ]
console.log(removed);
// Output: item 2

В приведенном выше примере:

  • вызов .pop () в массиве newItemTracker удалил элемент 2 в конце массива.
  • .pop () не принимает никаких аргументов, он просто удаляет последний элемент newItemTracker.
  • .pop () возвращает значение последнего элемента. В этом примере мы сохраняем возвращенное значение в переменной, удаленной для использования в дальнейшем.
  • .pop () - это метод, изменяющий исходный массив.

Практика

Дан массив дел по дому:

const chores = [
  'мыть посуду',
  'стирать',
  'выносить мусор',
  'готовить ужин',
  'мыть пол шваброй'
  ];
  1. Используйте метод .pop (), чтобы удалить последний элемент из дел.
  2. В строке после того, как вы вызвали chores.pop (), запишите список всех дел в консоль, чтобы убедиться, что это работает.

Существует гораздо больше методов массива, чем просто .push () и .pop (). Вы можете прочитать обо всех существующих методах массивов в документации по массивам Mozilla Developer Network (MDN).(есть на русском)

Далее рассмотрим .forEach() метод