Aquí no entiendo por qué ESlint no permite esta asignación, por favor ayuda.
Vi este fragmento de código aquí: https://styled-system.com/responsive-styles
export const breakpoints = [512, 768, 1024, 1280] breakpoints.sm = breakpoints[0] breakpoints.md = breakpoints[1] breakpoints.lg = breakpoints[2] breakpoints.xl = breakpoints[3]Puedes desestructurarlo así.
const breakpoints = [{ id: 1, size: 512 }, {id: 2, size: 768}, { id: 3, size: 1024 }, { id: 4, size: 1280}] const breakpointsOriginal = [512, 768, 1024, 1280] const [sm, md, lg, xl] = breakpoints; // You can use it like sm.size and the sm.size value is = 512 const [small, medium, large, extra_large] = breakpointsOriginal; // You can use small and the small value = 512export const breakpoints = [512, 768, 1024, 1280]; [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints;Lo probé en JSFiddle con este código:
const breakpoints = [512, 768, 1024, 1280]; [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints; console.log(breakpoints.sm); console.log(breakpoints.md); console.log(breakpoints.lg); console.log(breakpoints.xl); Funcionó bien para mí. Tenga en cuenta que necesitaba eliminar la export en JSFiddle y también necesitaba agregar punto y coma para que funcionara correctamente.
Editar:
No puedo juzgar su escenario real, pero personalmente trataría de evitar extender un objeto de matriz con tales propiedades adicionales, a menos que realmente necesite acceder a esos puntos de interrupción tanto por nombre de propiedad como por índice de matriz, según el escenario.
Dado que normalmente solo quiero una única estrategia (ya sea índices de matriz o propiedades de objeto), crearía un objeto "regular" y le agregaría cuatro propiedades.
Podría inicializar esas propiedades con la desestructuración de la matriz:
const bpArr = [512, 768, 1024, 1280]; const breakpoints = {}; [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = bpArr;Pero si no hubiera una matriz de origen con los valores numéricos de los puntos de interrupción, simplemente usaría un objeto literal para los puntos de interrupción, que es mucho más simple y fácil de leer:
const breakpoints = { sm: 512, md: 768, lg: 1024, xl: 1280 };En última instancia, depende de usted mantener el código lo más claro y simple posible y hacerlo tan complejo como sea necesario. ;)
[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints;Esto no funcionará ya que no puede mezclar la deconstrucción y la asignación.
Prueba esto:
[sm, md, lg, xl] = breakpoints;