JavaScript | Как получить первые 5 элементов массива?

Есть массив:

var massiv = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

15 элементов в массиве - JavaScript — 15 элементов в массиве — JavaScript

Нужно получить первые 5 элементов.

В решении задачи поможет метод slice(), который принимает два параметра — индекс начала и индекс конца. В нашем случае началом будет индекс «0», а концом будет индекс «5» (не индекс 4 потому что индекс конца «не включается») т. к. индексация элементов массивов начинается с нуля.

var m1 = massiv.slice(0, 5)

Вывод в консоль браузера:

Получение первых пяти элементов массива - JavaScript — Получение первых пяти элементов массива — JavaScript

Мы получили нужные нам первые 5 элементов массива, но это было сделано «неудобным» способом. А что если мы хотим получить вторые 5 элементов массива? Как быть? Снова думать какой индекс будет «началом», а какой «концом»? Так можно запутаться.

Универсальное решение для разных частей «диапазонов элементов» массивов — функция

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

function getArrRange (array, range, part) {
   var start = range * (part - 1);
   var end = (range * part);
   return array.slice(start, end);
}

Мы передаём в функцию массив, диапазон и номер диапазона. В ответ функция возвращает нам новый массив с нужным набором элементов.

Функция получения нужного диапазона элементов массива - JavaScript — Функция получения нужного диапазона элементов массива — JavaScript

ВАЖНО! range и part должны быть целочисленными

Примеры работы функции:

getArrRange(massiv, 1, 5)
[5]

getArrRange(massiv, 2, 5)
[9, 10]

getArrRange(massiv, 2, 1)
[1, 2]

getArrRange(massiv, 3, 1)
[1, 2, 3]

getArrRange(massiv, 3, 3)
[7, 8, 9]

getArrRange(massiv, 5, 3)
[11, 12, 13, 14, 15]

getArrRange(massiv, 5, 1)
[1, 2, 3, 4, 5]

Скриншот из консоли браузера:

Примеры получения разных диапазонов массивов - JavaScript — Примеры получения разных диапазонов массивов — JavaScript

Собственный метод для прототипов Array

Для удобства написания кода мы можем создать свой собственный метод для работы с любыми массивами:

Array.prototype.getRangePart = function (range, part) {
   var start = range * (part - 1);
   var end = (range * part);
   return this.slice(start, end);
}

Скриншот из консоли браузера?

Свой метод для прототипов Array - getRangePart - JavaScript — Свой метод для прототипов Array — getRangePart — JavaScript

Как работает метод? Примеры

var m2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]

m2.getRangePart(5, 1)
[1, 2, 3, 4, 5]

m2.getRangePart(5, 4)
[16, 17, 18, 19, 20]

m2.getRangePart(5, 5)
[21, 22]

m2.getRangePart(5, 6)
[]

Теперь можно вызывать метод на любом массиве и передавать в него только диапазон (range) и номер диапазона (part)

Скриншот:

Пример работы своего метода getRangePart - JavaScript — Пример работы своего метода getRangePart — JavaScript

Информационные ссылки

Официальная страница стандарта ECMAScript — Раздел «22.1 Array Objects» — https://tc39.es/ecma262/#sec-array-objects

Официальная страница стандарта ECMAScript — Раздел «Array.prototype.slice ( start, end )» — https://tc39.es/ecma262/#sec-array.prototype.slice

Официальная страница стандарта ECMAScript — https://tc39.es/ecma262/

Свойства конструктора Array

Свойства объекта прототипа Array