How to get first N number of elements from an array

JavascriptArraysFilteringSliceExtract

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

To get the first n elements of an array, use

const slicedArray = array.slice(0, n);

Solution 2 - Javascript

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 3 - Javascript

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 - Javascript

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 - Javascript

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)

Solution 6 - Javascript

Do not try doing that using a map function. Map function should be used to map values from one thing to other. When the number of input and output match.

In this case use filter function which is also available on the array. Filter function is used when you want to selectively take values maching certain criteria. Then you can write your code like

var items = list
             .filter((i, index) => (index < 3))
             .map((i, index) => {
                   return (
                     <myview item={i} key={i.id} />
                   );
              });

Solution 7 - Javascript

The following worked for me.

array.slice( where_to_start_deleting, array.length )

Here is an example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.slice(2, fruits.length);
//Banana,Orange  ->These first two we get as resultant

Solution 8 - Javascript

Just try this to get first n elements from list:

const slicedList = list.slice(0, n);

Example:

const list = [1,2,3,4,5]
console.log(list.slice(0, 3)) // Should return [1,2,3] 
console.log(list.slice(0, 10)) // Returns [1,2,3,4,5] since this is all we have in 1st 10 elements

Solution 9 - Javascript

Using a simple example:

var letters = ["a", "b", "c", "d"];
var letters_02 = letters.slice(0, 2);
console.log(letters_02)

> Output: ["a", "b"]

var letters_12 = letters.slice(1, 2);
console.log(letters_12)

> Output: ["b"]

Note: slice provides only a shallow copy and DOES NOT modify the original array.

Solution 10 - Javascript

With lodash, take function, you can achieve this by following:

_.take([1, 2, 3]);
// => [1]
 
_.take([1, 2, 3], 2);
// => [1, 2]
 
_.take([1, 2, 3], 5);
// => [1, 2, 3]
 
_.take([1, 2, 3], 0);
// => []

Solution 11 - Javascript

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

know more

Solution 12 - Javascript

With LInQer you can do:

Enumerable.from(list).take(3).toArray();

Solution 13 - Javascript

Pawel'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

Solution 14 - Javascript

Although this question is very old, as for 2021, there is a full implementation of LINQ to object written with the latest feature of ECMAScript (javascript).

The Github repository is: https://github.com/IlanAmoyal/WebPartyLinq

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1526912View Question on Stackoverflow
Solution 1 - JavascriptOriolView Answer on Stackoverflow
Solution 2 - JavascriptPatrick ShaughnessyView Answer on Stackoverflow
Solution 3 - JavascriptPawelView Answer on Stackoverflow
Solution 4 - JavascriptFreddyView Answer on Stackoverflow
Solution 5 - JavascriptRahul singh View Answer on Stackoverflow
Solution 6 - JavascriptsandeepView Answer on Stackoverflow
Solution 7 - JavascriptFlyingSnowGhostView Answer on Stackoverflow
Solution 8 - JavascriptAnuragView Answer on Stackoverflow
Solution 9 - Javascriptfaruk13View Answer on Stackoverflow
Solution 10 - JavascriptnurgasemeteyView Answer on Stackoverflow
Solution 11 - JavascriptMD SHAYONView Answer on Stackoverflow
Solution 12 - JavascriptSiderite ZackwehdexView Answer on Stackoverflow
Solution 13 - JavascriptManuel de la Iglesia CamposView Answer on Stackoverflow
Solution 14 - JavascriptIlanView Answer on Stackoverflow