Get the First N Values of an Array in JavaScript



In this article we are going to discuss how to get the first n values of an array using JavaScript.

First, n value ? to find the elements from the first index to n (n is the given number or given index) suppose you have given the n value as 5 the returned elements will be from index 0 to 5.

Using the _.first() function

To get the first n elements of an array we have many logical methods. But underscore.js provides the _.first() function. Which will directly or in a simple way gives the output.

Note ? if we did not mention the n value in the _.first() function then it will be returned as the first element of an array. Following is the syntax of the _.first() function ?

_.first(array,n)

It takes the array and a number as a parameter so, it will give the first n value from the array and returns the first n elements of an array as output.

Example: 1

In the following example, we are passing an integer array in _.first() function ?

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> </head> <body> <script type="text/javascript"> var array = [1, 2, 3, 4, 5, 6, 7]; document.write(_.first(array, 4)); </script> </body> </html>

Example 2

Let us see another example for this ?

Open Compiler
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Get the first n values from an array</title> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script> <div id="first"></div> </head> <body> <script> let arr = new Array("Alice", 40, "Edward", "Cullen"); let n = 2; document.getElementById("first").innerHTML = "First n elements from an array is : " + _.first(arr, n); </script> </body> </html>

Using the slice() method

Using the slice method you can get the elements in the selected range in the new array the syntax of the slice() method is ?

arr.slice(0,n);

Example 1

The following example demonstrates to get first n elements of an array using the slice() method in JavaScript.

Open Compiler
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Get the first n values from an array</title> <div id="slice"></div> </head> <body> <script> let arr = new Array("Alice", 40, "Edward", "Cullen"); let n = 2; let firstN = arr.slice(0, n); document.getElementById("slice").innerHTML ="First n elements from an array is : " + firstN; </script> </body> </html>

Example 2

In the following example, the slice() method in JavaScript is used to get first n elements of an array.

Open Compiler
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Get the first n values from an array</title> <div id="slice"></div> </head> <body> <script> let n = 3; let getFirstN = function (...arr) { let sliceArr = arr.slice(0, n); return sliceArr; }; document.getElementById("slice").innerHTML = "First n elements from an array is : " + getFirstN("Alice", 40, "Edward", "Cullen"); </script> </body> </html>
Updated on: 2022-12-06T07:05:20+05:30

264 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements