First item from a Map on JavaScript ES2015
Solution 1
Use the Map.prototype.entries
function, like this
const m = new Map();
m.set('key1', {})
m.set('keyN', {})
console.log(m.entries().next().value); // [ 'key1', {} ]
If you want to get the first key, then use Map.prototype.keys
, like this
console.log(m.keys().next().value); // key1
Similarly if you want to get the first value, then you can use Map.prototype.values
, like this
console.log(m.values().next().value); // {}
The reason why we have to call next()
on the returned values is that, all those functions return iterators. Read more about the iteration protocol here.
Solution 2
For the specific example you are wondering about, destructuring would be perfect.
let m = new Map();
m.set('key1', {});
m.set('key2', {});
let [[, obj]] = m;
e.g.
let [pair] = m;
let [key, obj] = pair;
is one option to destructure and then grab the value, but the easier option would be
let [obj] = m.values();
Solution 3
It could also be done using the spread feature at ES6 and the next versions. Let's declare a new Map variable, then add two values.
After that, we will use ...
to convert the map into array or you can use Array.from
then to get the first element just use [0]
on the gotten array.
const m = new Map();
m.set('key1', 1);
m.set('key2', 2);
console.log([...m][0]); // ['key1', 1] 👍🏼
Or quickly by using distruct feature for javascript array, so that [k, v]
array refers to first item at the map.
const [[k, v]] = m;
console.log(k, v); // 'key1', 1
Solution 4
Also, that is correct for both Set
and Map
: you can convert anything to Array
and then get any element by its index. Something like this:
const m = new Map();
m.set('key1', {});
m.set('key2', {});
console.log(Array.from(m)[0]); // ['key1', {}]
Solution 5
For all iterable objects you can use the iterator object[Symbol.iterator]().
In our case this will point to the entries()
method as explained in the above MDN page :
The map iterator function, which is the entries() function by default.
const m = new Map();
m.set('key1', {})
m.set('keyN', {})
console.log(m[Symbol.iterator]().next().value); // [ 'key1', {} ]
And here is a benchmark of all solutions : https://jsbench.me/9fkpm6q9y0/1
The entries()
version wins but it is very tight to the iterator version. This is logical since [Symbol.iterator]()
calls entries()
.
Philip Loger
Updated on July 05, 2022Comments
-
Philip Loger almost 2 years
I have a
Map
like this:const m = new Map(); m.set('key1', {}) . m.set('keyN' {})
the
Map
can have 1 or many items. Can I get the first item by index, withoutm.get('key1')
and without a iterator loop?like:
m.get()[0]
-
Philip Loger over 8 years@Andrey from Mozilla MDN: "A Map iterates its elements in insertion order, whereas iteration order is not specified for Objects." developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
-
-
Bergi over 8 yearsAny reason you changed the
'keyN'
keys the OP used? -
Alexander Mills almost 6 yearswhat about the last key/value?
-
Eduardo Baitello over 4 yearsCode-only answers are generally frowned upon on this site. Could you please edit your answer to include some comments or explanation of your code? Explanations should answer questions like: What does it do? How does it do it? Where does it go? How does it solve OP's problem? See: How to anwser. Thanks!
-
dota2pro over 4 yearsYou are converting it to an array then showing first element
-
thomas almost 3 yearsThis version is too much expensive since it creates a new array from the map.
-
darKnight almost 3 yearsIs it possible to replace the first entry with another? Like in above example can I replace (not add) the entry
key1 : {}
withkey3: { val: 3}
, without creating a new Map? -
Coderer over 2 yearsI think
.entries().next().value
is easier to read than usingSymbol.iterator
but I upvoted you for actually benchmarking the solution. One thing I noticed:let [pair] = map;
is only 16% slower thanentries
/iterator
whilelet [[key, val]] = map;
is 33% slower -- it must take time to allocate that extra "double-destructured" anonymous array.