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?
To get the first n
elements of an array, use
const slicedArray = array.slice(0, n);
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>
)
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
if (arr.length > n) arr.length = n
You can filter using index
of array.
var months = ['Jan', 'March', 'April', 'June']; months = months.filter((month,idx) => idx < 2) console.log(months);
.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.)
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)
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} />
);
});
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
slice
but in the second you use splice
.
["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.
fruits.slice(0,2)
, where 0
is the starting index and 2
is the number to take. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
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
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.
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);
// => []
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"]
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
Maybe I'm missing something, but feels like kicking in an open door by suggesting to use splice()
? Of course, it's important to remember that this modifies the array.
const myArray = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', ] myArray.splice(3) console.log(myArray) // expected output: ['one', 'two', 'three']
It's also possible to grab the elements of the array that are outside of what is being kept:
const myArray = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', ] const afterFirstThree = myArray.splice(3) console.log(myArray) // expected output: ['one', 'two', 'three'] console.log(afterFirstThree) // expected output: ['four', 'five', 'six', 'seven'] // if n is larger than myArray.length the entire array is kept and if trying to grab the return, it will be an empty array
Success story sharing
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/…array.slice(0, n);
it returns[0, min(n, array.length))
.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.