Finding the index of an element in an array in TypeScript/JavaScript

Question

Finding the index of an element in an array in TypeScript/JavaScript

UPDATE: Despite being labeled as a duplicate, this question showcases @ssube's clever and efficient solution.

UPDATE2: A new method has been suggested by @Grungondola in the comments.

I'm currently working with Typescript.

This first code snippet works like a charm:

var array1 = [];
array1.push(5);
array1.push(6);
console.log("a", array2.indexOf(6));

However, the second snippet encounters an issue. The array2.indexOf returns -1, signifying that the item was not found:

var array2 = [];
array2.push({aa:5,bb:5});
array2.push({aa:6,bb:6});
console.log(array2.indexOf({aa:6,bb:6}));

It appears that indexOf does not support Objects. Are there alternative methods within TypeScript to tackle this problem? Thank you.

javascript typescript

Answer 1

Answer №1

It's not a problem with the Object itself, but rather that you're creating distinct objects.

The syntax for object literals ({foo: 'bar'}) creates an object on-the-fly. Each time this syntax is used, a new object is generated, resulting in multiple objects being created.

You can confirm this by comparing {foo: 3} === {foo: 3}. Despite evaluating to false, these are separate objects and not references to the same one.

When utilizing the indexOf method, it searches for a specific object, string, number, etc., within an array. By passing a new object, it won't be found in the array.

If you have a reference to the object, using that will enable indexOf to function correctly:

var foo = {aa:5,bb:5}, bar = {aa:6,bb:6};
var array2 = [];
array2.push(foo);
array2.push(bar);
console.log(array2.indexOf(foo));

This will display the correct index since it's referring to the exact instance.

An alternative approach is to utilize filter or find along with a predicate for deep searching:

function deepIndexOf(arr, obj) {
  return arr.findIndex(function (cur) {
    return Object.keys(obj).every(function (key) {
      return obj[key] === cur[key];
    });
  });
}

var array2 = [];
array2.push(foo);
array2.push(bar);
console.log(deepIndexOf(array2, foo));

This method won't delve into nested objects but serves the purpose of comparing two objects and their immediate fields for equivalence.

Answer 2

It's not a problem with the Object itself, but rather that you're creating distinct objects.

The syntax for object literals ({foo: 'bar'}) creates an object on-the-fly. Each time this syntax is used, a new object is generated, resulting in multiple objects being created.

You can confirm this by comparing {foo: 3} === {foo: 3}. Despite evaluating to false, these are separate objects and not references to the same one.

When utilizing the indexOf method, it searches for a specific object, string, number, etc., within an array. By passing a new object, it won't be found in the array.

If you have a reference to the object, using that will enable indexOf to function correctly:

var foo = {aa:5,bb:5}, bar = {aa:6,bb:6};
var array2 = [];
array2.push(foo);
array2.push(bar);
console.log(array2.indexOf(foo));

This will display the correct index since it's referring to the exact instance.

An alternative approach is to utilize filter or find along with a predicate for deep searching:

function deepIndexOf(arr, obj) {
  return arr.findIndex(function (cur) {
    return Object.keys(obj).every(function (key) {
      return obj[key] === cur[key];
    });
  });
}

var array2 = [];
array2.push(foo);
array2.push(bar);
console.log(deepIndexOf(array2, foo));

This method won't delve into nested objects but serves the purpose of comparing two objects and their immediate fields for equivalence.

Finding the index of an element in an array in TypeScript/JavaScript

Answer №1

Similar questions

Is there a way to transfer the getJSON output into an input field?

Why is it that a website is loading at a snail's pace on Angular?

Intermittent issue with div background switching feature on Firefox

How can curly braces be utilized in an array reduce method?

Display Bootstrap Modal using Typescript in Angular

How can you utilize data captured through a JavaScript onchange event in conjunction with another event?

Issue with Kaltura thumbnail video not rendering within a script tag in React, resulting in blank space instead

Activate the action using the onclick interaction

jQuery mobile enhancing user experience with dynamic background images

Mastering the art of manipulating the Document Object Model in Vue.js

Guidelines on specifying the type for a component that is a union type

Converting image bytes to base64 in React Native: A step-by-step guide

Exploring the properties of individual Vue components on a single page with v-for loop

What could be the reason that changing document.body would impact its future accessibility?

What is the best way to remove the underline in Material-UI while still keeping the selection feature intact in Autocomplete?

Reset input fields while retaining placeholder text

Effortless jQuery Parallax

Tips on using regular expressions to divide strings based on the pattern of "{{variableValue}}" surrounded by spaces

MySQL Entry Update Failure

Efficiently communicating updates to clients after executing multiple HTTP requests simultaneously in RxJS