DevGang
Авторизоваться

JavaScript: получить последний элемент в списке 

Получение последнего элемента списка / массива - обычная операция. В этом руководстве мы рассмотрим, как получить последний элемент в массиве / списке JavaScript.

JavaScript - это слабо типизированный или нетипизированный язык, что означает, что тип переменной не нужно объявлять перед ее использованием, поскольку JavaScript определяет тип, считывая значение переменной.

var x = "something" оценивается и x присваивается типу String. Тот же процесс применяется к спискам - вам не нужно определять тип списка, вы можете просто заполнить список значениями.

Список определяется путем помещения элементов между квадратными скобками ([]), где элементы могут быть разнородными (не обязательно одного типа):

var myList = ["Peter", "Smith", 25, 23, "Random String", 10]

В JavaScript есть множество встроенных методов, которые можно использовать для управления списками, подобными этому.

Получить последний элемент, используя длину

Атрибут length из списка обозначает количество элементов в списке:

console.log(myList.length)

Индексирование элементов в массивах / списках в JavaScript очень похоже на другие языки. Мы можем получить доступ к элементу на основе его индекса, передав его в квадратных скобках [], ссылаясь на массив. Последний элемент имеет индекс length-1.

Поскольку поле length просто возвращает сохраненное значение элементов - это быстрая, эффективная и дешевая операция. Лучший способ получить последний элемент массива / списка JavaScript:

var lastElement = myList[myList.length - 1];
console.log(lastElement);

Это приводит к:

10

Получить последний элемент с помощью pop()

Метод pop() возвращает последний элемент коллекции, но удаляет его из коллекции. Однако, если мы используем оператор распространения из ES6 - мы можем избежать этой функции, временно скопировав список в память и выполнив операцию pop()с копией, сохранив исходный список нетронутым.

Метод *pop()`

Пусть pop() это последний элемент из списка:

var lastElement = myList.pop();
console.log(lastElement)
console.log(myList)

Это приводит к тому, что список урезается (последний элемент выризается из исходной коллекции):

10
["Peter", "Smith", 25, 23, "Random String"]

Если вам не нужно, чтобы исходный список оставался неизменным, вы можете извлекать из него элементы, но если вам действительно нужен оригинал, вы можете сделать копию и pop()из него.

pop() с оператором распространения ES6

ES6 - это сокращение от EcmaScript6, который представляет собой стандарт JavaScript, используемый для упрощения программирования на JavaScript (меньше кодировать, но делать больше).

Он был основан еще в 1997 году, и его первый крупный прорыв произошел в 2015 году со стандартом ES6 (или EcmaScript2015). Последняя версия - 11-я, разработанная в 2020 году. Все версии предназначены для упрощения кодирования в JavaScript (с новыми правилами синтаксиса, новыми ключевыми словами и т.д.).

Функция, которую мы можем здесь использовать, - это оператор распространения ( ...) .

Помимо других функций, оператор распространения может копировать списки / массивы:

[...myList]

Это создает новый список с теми же элементами, что и myList. При этом мы можем выполнить pop() из нового списка вместо исходного:

console.log([...myList].pop())
console.log(myList)

Это приводит к:

10
["Peter", "Smith", 25, 23, "Random String", 10]

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

Получить последний элемент с помощью slice()

В методе slice(a, b) массив нарезается на отрезки от точки a к точке b-1 - при условии, что a и b целые числа. С математической точки зрения, вы можете посмотреть на срез следующим образом: [a, b)- элемент a включен, а элемент b - нет:

console.log(myList.slice(1, 4))

В результате получается фрагмент исходного массива:

["Smith", 25, 23]

Этот метод slice() также принимает отрицательную индексацию, где он выполняет итерацию по коллекции в обратном порядке. Итак, если мы выполним slice(-4, -1), итерация начнется с третьего элемента сзади и закончится на уровне, предшествующем последнему (потому что slice не включает точку b).

Это позволяет нам просто включить один последний элемент из конца списка с помощью slice():

console.log(myList.slice(-1))

Что приводит к:

[10]

Это все еще массив, поэтому, чтобы получить этот элемент, мы получаем к нему доступ с помощью myList.slice(-1)[0] - который вернет наш элемент:

console.log(myList.slice(-1)[0])

Примечаниеslice() лучше всего использовать, когда вы хотите получить последние N элементов массива, а не один, поскольку вы можете просто использовать вместо них length-1.

Получить последний элемент с помощью reverse()

Метод reverse() меняет список на месте. Последний элемент станет первым, и наоборот:

console.log(myList.reverse())

Результат будет:

[10, 'Random String', 23, 25, 'Smith', 'Peter']

Теперь наш элемент является первым, поэтому мы можем получить к нему доступ с помощью myListReversed[0].

Примечание. Обращение массива / списка также является потенциально очень дорогостоящей операцией. Избегайте реверсирования коллекции, если единственное, что вы хотите сделать, - это получить доступ к последнему элементу. Если вы все равно хотите отменить его - вы можете получить доступ к элементу следующим образом. Если нет, обратитесь к первому подходу к использованию length-1.

Заключение

Самый дешевый, эффективный и, вероятно, самый интуитивно понятный из них - первый - myList[myList.length()-1]. Это то, что вы будете использовать большую часть времени.

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

slice()дает нам срез, что является отличным подходом, если мы хотим получить последние N элементов.

reverse()переворачивает массив на месте, и этого следует избегать, если вы просто хотите получить элемент. Однако, если вы все равно меняете массив, это не требует дополнительных затрат.

Источник:

#JavaScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В подарок 100$ на счет при регистрации

Получить