Adjusting ES2015 Map to accommodate the expected functionality

Question

Adjusting ES2015 Map to accommodate the expected functionality

Exploring the capabilities of ES2015 Maps has been quite exciting, as I'm starting to see its potential. However, I've encountered a use case that has me stumped on whether Maps can handle it.

Let's take a look at my class:

class A {
     constructor(public a:number) {}
     public equals(obj: A): boolean {
         return this.a === obj.a;
     }
 }

From what I understand, ES2015 Maps utilize the === equality operator (with some exceptions). This raises the question - is it possible to customize the equality comparison and make Maps use the A object's equals(...) method if applicable?

My end goal is simple:

var map = new Map();
map.set(new A(8), 7)
map.get(new A(8))      // should return 7 instead of undefined

Do you believe that creating a custom Map class is necessary to achieve this behavior, where it checks if both objects are instances of A and then calls the equals(...) method?

javascript typescript ecmascript-6

Answer 1

Answer №1

To customize the behavior of the get method, you can create a subclass like this:

class MapByEquals extends Map {
  get(key) {
    for(var k of this.keys()) {
      if(key.equals(k)) {
        return super.get(k);
      }
    }
    return super.get(key);
  }
}

"use strict";
class A {
  constructor(a) {
    this.a = a;
  }
  equals(b) {
    return this.a === b.a;
  }
}

class MapByEquals extends Map {
  get(key) {
    for(var k of this.keys()) {
      if(key.equals(k)) {
        return super.get(k);
      }
    }
    return super.get(key);
  }
}

var map = new MapByEquals();
map.set(new A(8), 7)
console.log(map.get(new A(8)))

Note that Babel does not support native classes extension. However, most modern browsers (Chrome 42+, Firefox 45+) do support classes natively, so this code should work fine.

Answer 2

To customize the behavior of the get method, you can create a subclass like this:

class MapByEquals extends Map {
  get(key) {
    for(var k of this.keys()) {
      if(key.equals(k)) {
        return super.get(k);
      }
    }
    return super.get(key);
  }
}

"use strict";
class A {
  constructor(a) {
    this.a = a;
  }
  equals(b) {
    return this.a === b.a;
  }
}

class MapByEquals extends Map {
  get(key) {
    for(var k of this.keys()) {
      if(key.equals(k)) {
        return super.get(k);
      }
    }
    return super.get(key);
  }
}

var map = new MapByEquals();
map.set(new A(8), 7)
console.log(map.get(new A(8)))

Note that Babel does not support native classes extension. However, most modern browsers (Chrome 42+, Firefox 45+) do support classes natively, so this code should work fine.

Adjusting ES2015 Map to accommodate the expected functionality

Answer №1

Similar questions

What is the best way to modify the color of a table cell in Typescript with *ngFor loop?

Exploring the power of AngularJS in manipulating Google Maps polygons with the help of ng-repeat

How to trigger a force reload on a VueJS route with a different query parameter?

Ways to retrieve the date of the chosen <td> cell in a calendar

Avoiding cross-site scripting vulnerabilities, an AJAX response will return an HTML response

Module not found: vueform.config

The magic of jQuery when chaining AJAX callback functions

What is the best way to activate a JQ function with my submit button?

Is there a way in jQuery Validation to apply a rule to the entire form rather than just individual elements within the form?

Implementing bi-directional data binding between sibling components in Vue.js

Revisiting the Issue: Jquery Hover Effect Fails to Function in Internet Explorer

Stripping the prefix from a string using the .split function leads to an error message stating "Unexpected

Tips for streamlining code using switch statements in vue.js

Oops! We encountered an issue in locating the Entry Module. The error message is indicating that it cannot find the specified source file

Spinning image on button click with seamless animation in Javascript

Guidelines for transmitting form information to a web API using Angular

Show and hide menu items without automatically scrolling the user back to the top of the page

The Textfield component in Material UI now automatically sets the default date to the current date when using the "date" type

define a variable within a v-for loop

Leveraging the AngularJS promise/defer feature alongside the Quickblox framework, learn how to efficiently upload images and subsequently upload public URLs to a custom