Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Array objects as key for ES6 Map

I am trying to update my code to ES6 as I am using Node 4.0 and really like its features so far. However I have problems with the new ES6 Map data structure as it behaves differently to {} when using Array as a key. I am using it as a counter map.

I run this code and I would like to know how I can use arrays as keys for the Map.

"use strict";  var a = new Map(); a.set(['x','y'], 1); console.log(a.get(['x','y']));  var b = {}; b[['x','y']] = 1;  console.log(b[['x','y']]); 

It prints out the following and the first line should be 1 and not undefined:

undefined 1 

The original JS map stringifies the key and I am not wanting to do the same type of stringify hack with the new ES6 Map.

What can I do to use arrays as keys reliably for a ES6 Map?

like image 353
jimjampez Avatar asked Sep 18 '15 20:09

jimjampez


People also ask

Can JavaScript map have object as key?

A key of an object must be a string or a symbol, you cannot use an object as a key. An object does not have a property that represents the size of the map.

How do you map data from an array of objects in JavaScript?

The syntax for the map() method is as follows: arr. map(function(element, index, array){ }, this); The callback function() is called on each array element, and the map() method always passes the current element , the index of the current element, and the whole array object to it.

Can you use an array as a key in JavaScript?

To convert an array's values to object keys: Declare a new variable and set it to an empty object. Use the forEach() method to iterate over the array. On each iteration, assign the array's element as a key in the object.


2 Answers

Understand that ES2015 Map keys are compared (almost) as if with the === operator. Two array instances, even if they contain the same values, do not ever compare as === to each other.

Try this:

var a = new Map(), key = ['x', 'y']; a.set(key, 1); console.log(a.get(key)); 

Since the Map class is intended to be usable as a base class, you could implement a subclass with an overriding .get() function, maybe.

(The "almost" in the first sentence is to reflect the fact that Map key equality comparison is done via Object.is(), which doesn't come up much in daily coding. It's essentially a third variation on equality testing in JavaScript.)

like image 57
Pointy Avatar answered Sep 19 '22 02:09

Pointy


I also had this need, so I wrote an ISC-licensed library: array-keyed-map. You can find it on npm. I think the source is quite clear, but here's how it works anyway, for posterity:


Maintain a tree of Map objects. Each tree stores:

  • Under an internally-declared Symbol key: The value at that point in the tree (if any). The Symbol guarantees uniqueness, so no user-provided value can overwrite this key.

  • On all its other keys: all other so-far set next-trees from this tree.

For example, on akmap.set(['a', 'b'], true), the internal tree structure would be like—

'a':   [value]: undefined   'b':     [value]: true 

Doing akmap.set(['a'], 'okay') after that would just change the value for the path at 'a':

'a':   [value]: 'okay'   'b':     [value]: true 

To get the value for an array, iterate through the array while reading the corresponding keys off the tree. Return undefined if the tree at any point is non-existent. Finally, read the internally declared [value] symbol off the tree you've gotten to.

To delete a value for an array, do the same but delete any values under the [value]-symbol-key, and delete any child trees after the recursive step if they ended up with a size of 0.


Why a tree? Because it's very efficient when multiple arrays have the same prefixes, which is pretty typical in real-world use, for working with e.g. file paths.

like image 33
Anko Avatar answered Sep 18 '22 02:09

Anko