Sé que indexOf no se puede usar en una matriz de objetos, por ejemplo, a continuación.
const objs = [ {name: 'darling', age: 28}, {name: 'eliot', age: 29} ] console.log(objs.indexOf({ name: 'eliot', age: 29 })) // print -1 Sin embargo, ¿por qué indexOf puede rastrear el índice de matriz de elementos DOM? por ejemplo, debajo
document.getElementById('slides').addEventListener('click', function (e) { const nodes = document.querySelectorAll('#slides > .slide') const newNodes = [...nodes] console.log(newNodes); console.log(newNodes.indexOf(e.target)) // can print out the index })Cada vez que el intérprete se encuentra con un objeto literal cuando ejecuta una línea, por ejemplo:
const objs = [ {name: 'darling', age: 28}, {name: 'eliot', age: 29} // this line ]o
console.log(objs.indexOf( { name: 'eliot', age: 29 } // this line ))Crea un nuevo objeto con esas propiedades. No son lo mismo.
console.log( // two separate objects, which happen to contain the same value { foo: 'foo' } === { foo: 'foo' } ); Por el contrario, al buscar nodos en el DOM, los nodos son generalmente estáticos: no cambian a menos que se ejecute JavaScript, lo que lo hace explícitamente. El e.target hace referencia a uno de esos nodos estáticos y querySelectorAll devuelve una colección de dichos nodos estáticos.
Entonces son === y .indexOf funciona.
Considere el siguiente comportamiento:
const element = { foo: 1 }; const arr = [{ foo: 1 }, { foo: 2 }, element]; console.log(arr.indexOf({ foo: 1 })); // -1 console.log(arr.indexOf(element)); // 2 console.log(arr.indexOf(arr[0])); // 0 Demuestra claramente cómo indexOf hace coincidir la referencia con un objeto, en lugar de un objeto con las mismas claves y valores.
Para uno { name: 'eliot', age: 29 } es un objeto nuevo y, por lo tanto, no se encuentra en su matriz
Entonces puedes encontrar un objeto si es el mismo objeto real
De lo contrario, búsquelo por el valor de una o más de las entradas.
const objs = [ {name: 'darling', age: 28}, {name: 'eliot', age: 29} ] const objToFind = objs[1] console.log(objs.indexOf(objToFind)) // find the index by name const idxOfEliot = objs.findIndex(({name}) => name==="eliot") console.log(idxOfEliot)