How to get first N number of elements from an array
Solution 1
I believe what you're looking for is:
// ...inside the render() function
var size = 3;
var items = list.slice(0, size).map(i => {
return <myview item={i} key={i.id} />
});
return (
<div>
{items}
</div>
)
Solution 2
To get the first n
elements of an array, use
const slicedArray = array.slice(0, n);
Solution 3
arr.length = n
This might be surprising but length
property of an array is not only used to get number of array elements but it's also writable and can be used to set array's length MDN link. This will mutate the array.
If you don't care about immutability or don't want to allocate memory i.e. for a game this will be the fastest way.
to empty an array
arr.length = 0
Solution 4
You can filter using index
of array.
var months = ['Jan', 'March', 'April', 'June'];
months = months.filter((month,idx) => idx < 2)
console.log(months);
Solution 5
Use Slice Method
The javascript slice()
method returns a portion of an array into a new array object selected from start to end where start and end represent the index of items in that array. The original array will not be modified.
syntax : slice(start, end)
Let us say we have an array with 7 items [5,10,15,20,25,30,35]
and we want the first 5 elements from that array:
let array = [5,10,15,20,25,30,35]
let newArray = array.slice(0,5)
console.log(newArray)
user1526912
Updated on February 18, 2022Comments
-
user1526912 about 2 years
I am working with Javascript(ES6) /FaceBook react and trying to get the first 3 elements of an array that varies in size. I would like do the equivalent of Linq take(n).
In my Jsx file I have the following:
var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); });
Then to get the first 3 items I tried
var map = new Map(list); map.size = 3; var items = map(i => { return (<SpotlightLandingGlobalInboxItem item={i} key={i.id} />); });
This didn't work as map doesn't have a set function.
Can you please help?
-
Chris about 7 yearsYou're correct overall, but semantically you should use filter to first filter down the set of elements, then, map the filtered down set if you are taking this approach.
-
elQueFaltaba almost 7 yearsThe filter function would go through all the elements in the array, while the slice would not, so it's better performant-wise to use slice, right?
-
Danny Harding almost 6 yearsNote that the
slice
function on arrays returns a shallow copy of the array, and does not modify the original array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… -
Veslav about 5 yearsIn the first example you use
slice
but in the second you usesplice
. -
MikeBeaton over 4 years
.filter
on it's own is not a great choice, at least not if the input array might be long..filter
goes through every element of the array checking its condition..slice
would not do this, but would just extract the first n elements and then stop processing - which would definitely be what you want for a long list. (As @elQueFaltaba already said in comments to another answer.) -
Angel Joseph Piscola over 4 yearsThis is also wrong. You will get
["Apple", "Mango"]
from this. The first part of slice is not "where to start deleting", it's where to start the slice from. It doesn't modify the original array and won't delete anything. -
Oldrich Svec over 4 yearsThis will also expand the array if it is smaller than N
-
Rishabh876 over 3 yearsDoes this throw any error if n is larger than size?
-
denski over 3 yearsThis is not correct. Slice returns a new array of the sliced items. Should be
fruits.slice(0,2)
, where0
is the starting index and2
is the number to take. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… -
Morgoth over 3 years@Rishabh876 No it does not. For
array.slice(0, n);
it returns[0, min(n, array.length))
. -
Manuel de la Iglesia Campos almost 3 yearsPawel's answer seems the best option in resource-critical environments, and when the remaining elements can be discarded. Considering the case when the array is already smaller, this is a little improvement:
if (arr.length > n) arr.length = n
-
charlie6411 over 2 yearsI echo @Rishabh876 Another upped answer which is just incorrect and can be hard to debug at a later point.
-
ashleedawg over 2 years@Morgoth - I'm confused here -- are you saying this is incorrect because, in cases when the array has less than 3 elements, this method won't return 3 elements?
-
Morgoth over 2 years@ashleedawg Depends on your definition of correct. If
array
has less than 3 elements and you slice it for 3, then it will return all the elements in the array (i.e. less than 3). That is a very sensible behaviour, but if that does not make sense for your application you might want to check the length of the array first. -
alex almost 2 yearsplease just pay attention you'll receive the values in the array beginning with the one at index start untill the one at index end - 1. this is good to allow looping.