javascript - Valor predeterminado del parámetro de función de asignación de objetos de desestructuración ES6

object ecmascript-6

Question

Hola, estaba analizando ejemplos de uso de desestructuración de objetos al pasar parámetros de funciones aquí Demo de Destrucción de Objetos

function drawES6Chart({size = ''big'', cords = { x: 0, y: 0 }, radius = 25} = **{}**) {
  console.log(size, cords, radius);
 // do some chart drawing
}

 // In Firefox, default values for destructuring assignments are not yet  
 implemented (as described below). 
 // The workaround is to write the parameters in the following way:
   // ({size: size = ''big'', cords: cords = { x: 0, y: 0 }, radius: radius =  
      25} = **{}**)

 drawES6Chart({
    cords: { x: 18, y: 30 },
    radius: 30
});

¿Alguien puede decirme cuál es la razón de usar la asignación de objetos vacíos al final del parámetro de función que he marcado en negrita (incrustado en estrellas dobles) arriba?

Answer 1

Ese es un valor predeterminado para el parámetro de función. Sin usar = {} intérprete de JavaScript arroja un error cuando no se pasa ningún objeto a la función, ya que no puede desestructurar un valor undefined .

Answer 2

La desestructuración con valores predeterminados solo funciona cuando pasa un objeto que no tiene las propiedades respectivas. El valor predeterminado = {} para todo el parámetro permite no pasar un objeto (vacío) en absoluto.

Hace que drawES6Chart() equivalente a drawES6Chart({}) .

Answer 3

Si lo usa y llama a la función sin parámetros, funciona:

function drawES6Chart({size = ''big'', cords = { x: 0, y: 0 }, radius = 25} = {}) {
  console.log(size, cords, radius);
 // do some chart drawing
}

drawES6Chart();

si no, se produce un error:

TypeError: no se puede convertir indefinido a objeto

function drawES6Chart({size = ''big'', cords = { x: 0, y: 0 }, radius = 25}) {
  console.log(size, cords, radius);
 // do some chart drawing
}

drawES6Chart();

Answer 4

Tiene un objeto con sus valores predeterminados, pero ese objeto también es un argumento, por lo que necesita un objeto vacío como valor predeterminado para el primer argumento , que es el objeto con los valores rellenados.

function drawES6Chart({size = ''big'', cords = { x: 0, y: 0 }, radius = 25} = {}) {
}

Eso, en pseudocódigo, sería:

function drawES6Chart({**first argument**} = {**default value for first argument**}) {
}