¿Puede alguien ayudarme a entender qué está pasando con {target = document.body} = {}
la función a continuación?
¿Parece que está pasando un objeto como parámetro con un valor predeterminado de un objeto vacío? Pero target = document.body
no parece una sintaxis de objeto válida.
const replaceOnDocument = (pattern, string, {target = document.body} = {}) => { // Handle `string` — see the last section [ target, ...target.querySelectorAll("*:not(script):not(noscript):not(style)") ].forEach(({childNodes: [...nodes]}) => nodes .filter(({nodeType}) => nodeType === document.TEXT_NODE) .forEach((textNode) => textNode.textContent = textNode.textContent.replace(pattern, string))); };
En la lista de parámetros de una función, {target = document.body} = {}
significa:
{target}
es la desestructuración de parámetros . Significa "tomar la propiedad de target
del objeto proporcionado como argumento y ponerlo en el parámetro target
". Esto se llama un parámetro desestructurado .= document.body
es un valor predeterminado de desestructuración . Significa que si no hay una propiedad de target
en el objeto (o su valor no está undefined
), target
debería obtener el valor document.body
.= {}
después del cierre }
de la desestructuración es un valor por defecto del parámetro . Significa que si no hay ningún argumento para ese parámetro (o el argumento no está undefined
), use {}
como valor predeterminado para el parámetro. Después de lo cual, la desestructuración se aplica al valor predeterminado de ese parámetro. (Más sobre esto en el siguiente ejemplo, puede ser un poco confuso). El resultado es que target
será la propiedad de target
del objeto proporcionado como argumento (si se proporciona y no está undefined
), o document.body
.
Por ejemplo, si llamó a replaceOnDocument
sin ningún tercer argumento, eso activaría el valor del parámetro predeterminado ( {}
); y luego la desestructuración no vería ninguna propiedad de target
, por lo que se usaría el valor predeterminado de desestructuración ( document.body
).
Aquí hay un ejemplo:
function example({target = "a"} = {}) { console.log(`target = ${target}`); } // Calling with no argument at all triggers the default parameter // value (`{}`), which in turn triggers the default destructuring // value since `{}` doesn't have `target`. example(); // "target = a" // Calling with an object that doesn't have `target` just triggers the // default destructuring value example({randomProperty: 42}); // "target = a" // But calling with an object that has `target`, the `target` from // the object gets picked up example({target: "b"}); // "target = b" // Let's see a different value for the default parameter value: function example2({target = "1"} = {target: "2"}) { console.log(`target = ${target}`); } // Calling with no argument at all triggers the default parameter // value (`{}`), which in turn triggers the default destructuring // value since `{}` doesn't have `target`. example2(); // "target = 2" // Calling with an object that doesn't have `target` just triggers the // default destructuring value example2({randomProperty: 42}); // "target = 1" // Calling with an object that has `target`, the `target` from // the object gets picked up example2({target: "3"}); // "target = 3"