Para asignar una matriz de números en cadena a Números reales, simplemente puedo pasar la función Número:
let arr = ["0", "1", "-2.5"]; console.log(arr.map(Number)); Ahora me gustaría usar el mismo enfoque con document.getElementById para asignar una lista de cadenas de id a sus nodos DOM correspondientes:
let arr = ["a", "b"]; console.log(arr.map(document.getElementById)); <div id="a">a <span id="b">b</span></div>que me da
"TypeError: 'getElementById' called on an object that does not implement interface Document."¿Alguien puede explicar el error?
Puede encontrar una explicación de lo que está sucediendo aquí :
Cuando se lanza este error, se llama a una función (en un objeto dado) con un
thisque no corresponde al tipo esperado por la función.Este problema puede surgir cuando se usan los métodos
Function.prototype.call()oFunction.prototype.apply()y se proporciona un argumentothisque no tiene el tipo esperado.Este problema también puede ocurrir cuando se proporciona una función que se almacena como una propiedad de un objeto como argumento para otra función . En este caso, el objeto que almacena la función no será el destino de
thisfunción cuando sea llamado por la otra función. Para solucionar este problema, deberá proporcionar un lambda que realiza la llamada o usar laFunction.prototype.bind()para forzarthisargumento al objeto esperado.
También agrego mi solución alternativa: hay una sobrecarga del map de métodos que le permite establecer el contexto en el segundo parámetro :
let arr = ["a", "b"]; console.log(arr.map(document.getElementById, document)); <div id="a">a <span id="b">b</span></div>Experimentando, parece estar relacionado con this que ya no apunta al contexto correcto (que sería document ) al pasar document.getElementById como una devolución de llamada al map , por lo que pasar explícitamente un getElementById enlazado hace el truco:
let arr = ["a", "b"]; console.log(arr.map(document.getElementById.bind(document))); <div id="a">a <span id="b">b</span></div>Desafortunadamente, esto también anula el propósito del enfoque, que sería la concisión, ya que esto se puede acortar de
arr.map(document.getElementById.bind(document)) // to arr.map(id=>document.getElementById(id))