How do you get the first element from an array like this:
var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
I tried this:
alert($(ary).first());
But it would return [object Object]. So I need to get the first element from the array which should be the element 'first'.
like this
alert(ary[0])
Why are you jQuery-ifying a vanilla JavaScript array? Use standard JavaScript!
var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
alert(ary[0]);
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Also,
Source, courtesy of bobince
Some of ways below for different circumstances.
In most normal cases, the simplest way to access the first element is by
yourArray[0]
but this requires you to check if [0] actually exists.
Another commonly used method is shift() but you should avoid using this for the purpose of accessing the first element.
Well, this method modifies the original array (removes the first item and returns it) but re-indexes what is left in the array to make it start from 0 (shifts everything down). Therefore the length of an array is reduced by one.
There are good cases where you may need this, for example, to take the first customer waiting in the queue, but it is very inefficient to use this for the purpose of accessing the first element.
In addition, this requires a perfect array with [0] index pointer intact, exactly as using [0];
yourArray.shift()
The important thing to know is that the two above are only an option if your array starts with a [0] index.
There are cases where the first element has been deleted, for example with delete yourArray[0], leaving your array with "holes". Now the element at [0] is simply undefined, but you want to get the first "existing" element. I have seen many real world cases of this.
So, assuming we have no knowledge of the array and the first key (or we know there are holes), we can still get the first element.
You can use find() to get the first element.
The advantage of find() is its efficiency as it exits the loop when the first value satisfying the condition is reached (more about this below).
(You can customize the condition to exclude null or other empty values too)
var firstItem = yourArray.find(x=>x!==undefined);
I'd also like to include filter() here as an option to first "fix" the array in the copy and then get the first element while keeping the original array intact (unmodified).
Another reason to include filter() here is that it existed before find() and many programmers have already been using it (it is ES5 against find() being ES6).
var firstItem = yourArray.filter(x => typeof x!==undefined).shift();
Warning that filter() is not really an efficient way (filter() runs through all elements) and creates another array. It is fine to use on small arrays as performance impact would be marginal, closer to using forEach(), for example.
Another one I have seen in some projects is splice() to get the first item in an array and then get it by index:
var firstItem = yourArray.splice(0, 1)[0];
I am not sure why you would do that. This method won't solve the problem with holes in an array (sparse array). It is costly as it will re-index the array, and it returns an array that you have to access again to get the value. For example, if you delete the first couple of elements, then splice() will return undefined instead of the first defined value from the array.
Both find() and filter() guarantee the order of elements, so are safe to use as above.
**(I see some people suggest using loops to get the first element, but I would recommend against this method. Obviously, you can use any loop to get a value from an array but why would you do that?
Readability, optimization, unnecessary block of code etc. When using native functions, the browser can better optimize your code. And it may not even work with some loops which don't guarantee the order in iteration.
By the way, forEach() doesn't solve the issue as many suggest because you can't break it and it will run through all elements. You would be better off using a simple for loop and by checking key/value, but why?**
Using ES6 destructuring
let [first] = [1,2,3];
Which is the same as
let first = [1,2,3][0];
You can just use find():
const first = array.find(Boolean)
Or if you want the first element even if it is falsy:
const first = array.find(() => true)
Or if you want the first element even if it is falsy but not if it is null or undefined (more information):
const first = array.find(e => typeof e !== 'undefined')
Going the extra mile:
If you care about readability but don't want to rely on numeric incidences you could add a first()-function to Array.prototype by defining it with Object.defineProperty() which mitigates the pitfalls of modifying the built-in Array object prototype directly (explained here).
Performance is pretty good (find() stops after the first element) but it isn't perfect or universally accessible (ES6 only). For more background read #Selays answer.
Object.defineProperty(Array.prototype, 'first', {
value() {
return this.find(e => true) // or this.find(Boolean)
}
})
To retrieve the first element you are now able to do this:
const array = ['a', 'b', 'c']
array.first()
> 'a'
Snippet to see it in action:
Object.defineProperty(Array.prototype, 'first', {
value() {
return this.find(Boolean)
}
})
console.log( ['a', 'b', 'c'].first() )
Element of index 0 may not exist if the first element has been deleted:
let a = ['a', 'b', 'c'];
delete a[0];
for (let i in a) {
console.log(i + ' ' + a[i]);
}
Better way to get the first element without jQuery:
function first(p) {
for (let i in p) return p[i];
}
console.log( first(['a', 'b', 'c']) );
If you want to preserve the readibility you could always add a first function to the Array.protoype:
Array.prototype.first = function () {
return this[0];
};
A then you could easily retrieve the first element:
[1, 2, 3].first();
> 1
If your array is not guaranteed to be populated from index zero, you can use Array.prototype.find():
var elements = []
elements[1] = 'foo'
elements[2] = 'bar'
var first = function(element) { return !!element }
var gotcha = elements.find(first)
console.log(a[0]) // undefined
console.log(gotcha) // 'foo'
array.find(e => !!e); // return the first element
since "find" return the first element that matches the filter && !!e match any element.
Note This works only when the first element is not a "Falsy" : null, false, NaN, "", 0, undefined
In ES2015 and above, using array destructuring:
const arr = [42, 555, 666, 777]
const [first] = arr
console.log(first)
Only in case you are using underscore.js (http://underscorejs.org/) you can do:
_.first(your_array);
I know that people which come from other languages to JavaScript, looking for something like head() or first() to get the first element of an array, but how you can do that?
Imagine you have the array below:
const arr = [1, 2, 3, 4, 5];
In JavaScript, you can simply do:
const first = arr[0];
or a neater, newer way is:
const [first] = arr;
But you can also simply write a function like...
function first(arr) {
if(!Array.isArray(arr)) return;
return arr[0];
}
If using underscore, there are list of functions doing the same thing you looking for:
_.first
_.head
_.take
ES6 Spread operator + .shift() solution
Using myArray.shift() you can get the 1st element of the array, but .shift() will modify the original array, so to avoid this, first you can create a copy of the array with [...myArray] and then apply the .shift() to this copy:
var myArray = ['first', 'second', 'third', 'fourth', 'fifth'];
var first = [...myArray].shift();
console.log(first);
Try alert(ary[0]);.
I prefer to use Array Destructuring
const [first, second, third] = ["Laide", "Gabriel", "Jets"];
console.log(first); // Output: Laide
console.log(second); // Output: Gabriel
console.log(third); // Output: Jets
Method that works with arrays, and it works with objects too (beware, objects don't have a guaranteed order!).
I prefer this method the most, because original array is not modified.
// In case of array
var arr = [];
arr[3] = 'first';
arr[7] = 'last';
var firstElement;
for(var i in arr){
firstElement = arr[i];
break;
}
console.log(firstElement); // "first"
// In case of object
var obj = {
first: 'first',
last: 'last',
};
var firstElement;
for(var i in obj){
firstElement = obj[i];
break;
}
console.log(firstElement) // First;
Just use ary.slice(0,1).pop();
In
var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
console.log("1º "+ary.slice(0,1).pop());
console.log("2º "+ary.slice(0,2).pop());
console.log("3º "+ary.slice(0,3).pop());
console.log("4º "+ary.slice(0,4).pop());
console.log("5º "+ary.slice(0,5).pop());
console.log("Last "+ary.slice(-1).pop());
array.slice(START,END).pop();
Another one for those only concerned with truthy elements
ary.find(Boolean);
Find the first element in an array using a filter:
In typescript:
function first<T>(arr: T[], filter: (v: T) => boolean): T {
let result: T;
return arr.some(v => { result = v; return filter(v); }) ? result : undefined;
}
In plain javascript:
function first(arr, filter) {
var result;
return arr.some(function (v) { result = v; return filter(v); }) ? result : undefined;
}
And similarly, indexOf:
In typescript:
function indexOf<T>(arr: T[], filter: (v: T) => boolean): number {
let result: number;
return arr.some((v, i) => { result = i; return filter(v); }) ? result : undefined;
}
In plain javascript:
function indexOf(arr, filter) {
var result;
return arr.some(function (v, i) { result = i; return filter(v); }) ? result : undefined;
}
Why not account for times your array might be empty?
var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
first = (array) => array.length ? array[0] : 'no items';
first(ary)
// output: first
var ary = [];
first(ary)
// output: no items
When there are multiple matches, JQuery's .first() is used for fetching the first DOM element that matched the css selector given to jquery.
You don't need jQuery to manipulate javascript arrays.
You could also use .get(0):
alert($(ary).first().get(0));
To get the first element of the array.
Declare a prototype to get first array element as:
Array.prototype.first = function () {
return this[0];
};
Then use it as:
var array = [0, 1, 2, 3];
var first = array.first();
var _first = [0, 1, 2, 3].first();
Or simply (:
first = array[0];
The previous examples work well when the array index begins at zero. thomax's answer did not rely on the index starting at zero, but relied on Array.prototype.find to which I did not have access. The following solution using jQuery $.each worked well in my case.
let haystack = {100: 'first', 150: 'second'},
found = null;
$.each(haystack, function( index, value ) {
found = value; // Save the first array element for later.
return false; // Immediately stop the $.each loop after the first array element.
});
console.log(found); // Prints 'first'.
try
var array= ['first', 'second', 'third', 'fourth', 'fifth'];
firstElement = array[array.length - array.length];
https://playcode.io/908187
A vanilla JS code, no jQuery, no libs, no-nothing.. :P.. It will work if array index does not start at zero as well.
var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
console.log(Object.values(ary)[0]);
If you're chaining a view functions to the array e.g.
array.map(i => i+1).filter(i => i > 3)
And want the first element after these functions you can simply add a .shift() it doesn't modify the original array, its a nicer way then array.map(i => i+1).filter(=> i > 3)[0]
If you want the first element of an array without modifying the original you can use array[0] or array.map(n=>n).shift() (without the map you will modify the original. In this case btw i would suggest the ..[0] version.
var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
console.log(Object.keys(ary)[0]);
Make any Object array (req), then simply do Object.keys(req)[0] to pick the first key in the Object array.
var ary = ["first", "second", "third", "fourth", "fifth"];
console.log(ary.shift());
//first
cosnole.log(ary);
// ["second", "third", "fourth", "fifth"]
#NicoLwk You should remove elements with splice, that will shift your array back. So:
var a=['a','b','c'];
a.splice(0,1);
for(var i in a){console.log(i+' '+a[i]);}
Thank you in advance! I'm new to coding and learning how to deal with Arrays. I am trying to remove random items from an array (deck of cards), and populate a new array (called hand). The problem I always seem to have with arrays is taking the results of one and creating a new function/array/ etc.. Currently, I am outputting 2 separate arrays and I can't seem to push them into one.
let deck = ["dA","dQ","dK","dJ","d10","d09","d08",
"d07","d06","d05","d04","d03","d02","hA","hQ","hK",
"hJ","h10","h09","h08","h07","h06","h05","h04","h03"];
var hand = deck.splice(Math.floor(Math.random()*deck.length),1);
console.log(hand)
var hand = deck.splice(Math.floor(Math.random()*deck.length),1);
console.log(hand);
In your code, just you need to push the value returned from splice method rather than directly assigning it.
By this way every time a new value that gets deleted and will be added to the new array called hand. Hope this helps. :-)
let deck = ["dA","dQ","dK","dJ","d10","d09","d08",
"d07","d06","d05","d04","d03","d02","hA","hQ","hK",
"hJ","h10","h09","h08","h07","h06","h05","h04","h03"];
var hand = [];
const getSelectedCard = () => deck.splice(Math.floor(Math.random()*deck.length),1)
let selectedCard = getSelectedCard();
hand.push(...selectedCard) //or hand.push(selectedCard[0])
console.log(hand);
selectedCard = getSelectedCard();
hand.push(...selectedCard)
console.log(hand);
I have two arrays:
GlobalArray:Array(Int,Array[String]) and SpecificArray:Array(Int,Int).
The first Int in both of them is a key and I would like to get the element corresponding to that key from the GlobalArray.
In pseudocode:
val v1
For each element of SpecificArray
Get the corresponding element from GlobalArray to use its Array[String]
If (sum <= 100)
for each String of the Array
update v1
// ... some calculation
sum += 1
println (v1)
I know using .map() I could go through each position of the SpecificArray, but so far I was able to do this:
SpecificArray.map{x => val in_global = GlobalArray.filter(e => (e._1 == x._1))
// I don't know how to follow
}
How about something like below, I would prefer to for comprehension code which has better readability.
var sum:Int = 0
var result:String = ""
for {
(k1,v1) <- SpecificArray //v1 is the second int from specific array
(k2,values) <- GlobalArray if k1 == k2 //values is the second array from global array
value <- values if sum < 100 //value is one value frome the values
_ = {sum+=1; result += s"(${v1}=${value})"} //Update something here with the v1 and value
} yield ()
println(result)
Note needs more optimization
Convert GlobalArray to Map for faster lookup.
val GlobalMap = GlobalArray.toMap
SpecificArray.flatMap(x => GlobalMap(x._1))
.foldLeft(0)((sum:Int, s:String) => {
if(sum<=100) {
// update v1
// some calculation
}
sum+1
})
If not all keys of SpecificArray is present in GlobalMap then use GlobalMap.getOrElse(x._1, Array())
How sum affects the logic and what exactly is v1 is not clear from your code, but it looks like you do search through GlobalArray many times. If this is so, it makes sense to convert this array into a more search-friendly data structure: Map. You can do it like this
val globalMap = GlobalArray.toMap
and then you may use to join the strings like this
println(SpecificArray.flatMap({case (k,v) => globalMap(k).map(s => (k,v,s))}).toList)
If all you need is strings you may use just
println(SpecificArray.flatMap({case (k,v) => globalMap(k)}).toList)
Note that this code assumes that for every key in the SpecificArray there will be a matching key in the GlobalArray. If this is not the case, you should use some other method to access the Map like getOrElse:
println(SpecificArray.flatMap({case (k,v) => globalMap.getOrElse(k, Array()).map(s => (k,v,s))}).toList)
Update
If sum is actually count and it works for whole "joined" data rather than for each key in the SpecificArray, you may use take instead of it. Code would go like this:
val joined = SpecificArray2.flatMap({case (k,v) => globalMap.getOrElse(k, Array()).map(s => (s,v))})
.take(100) // use take instead of sum
And then you may use joined whatever way you want. And updated demo that builds v1 as joined string of form v1 += String_of_GlobalArray + " = " + 2nd_Int_of_SpecificArray is here. The idea is to use mkString instead of explicit variable update.
I have array of objects of my class. My class have variable for name that is unique for every object created. Now, I want to find, say, object in array that has a name "test". I wanted to try something like creating second array with just names as elements and when I create new object in my first array to create object in second array so that they share index number. Something like this:
arrayOfObjects.push(new obj("test"));
arrayOfNames.push("test");
function findIndexNumberOf(name){
for(var i = 0; i < arrayOfNames.length; i++){
if(arrayOfNames[i] === name)
return i;
}
}
But I think that this is pretty robust solution so I'm wondering is there better/smarter/faster way of doing this.
If you want to find the index of an item, it's generally the easiest to use indexOf:
const haystack = ["this", "is", "a", "test"];
const needle = "this";
const result = haystack.indexOf(needle);
However, this will work with primitive types. Assuming you have an array of objects, comparing them will require a different approach. Here are some one-liners:
const haystack = [new String("this"), new String("is"), new String("a"), new String("test")];
const needle = "test";
const result1 = haystack.indexOf(haystack.filter(item => item == needle)[0]);
const result2 = haystack.indexOf(haystack.filter(item => item.toString() === needle.toString())[0]);
const result3 = haystack.map(item => item.toString()).indexOf(needle.toString());
const result4 = haystack.indexOf(haystack.find(item => item.toString() === needle.toString()));
result1 filters the haystack using the == operator, thus ignoring the fact that the compared values are actually different types. The first element of the filtered array is then fed to indexOf. This will allow you to use a primitive string as the needle and search through a haystack of objects.
result2 uses the same approach, but casts both compared values to a primitive string, making sure they're both of the same type. This will allow you to mix and match primitives and String objects liberally, both in the haystack and needle.
result3 maps all haystack values to primitive strings and then uses indexOf on that new array of primitives. I also added toString to the needle to ensure it's also a primitive. This works similar to your approach, but the mapping is run every time you search for a needle. This is probably suboptimal.
result4 uses Array.prototype.find to locate the target object on the haystack and then feeds the result to indexOf. This might be the fastest, but I have no empirical data to back this up.
Now, in case you wanted to find the actual item, not just its index, you're best off using Array.prototype.find:
const result = haystack.find(item => item == needle);
or, in case both are String objects:
const result = haystack.find(item => item.toString() === needle.toString());
You can use the find method of Arrays object:
const myObject = arr.find(o => o.name === 'the_name_you_search');