这里如何使用解构？

Question

Here I don't understand why ESlint does not allow this assignment, please help.

I saw this piece of code here : 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]

Answer 1

You can desctructure it like this.

 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 = 512

Answer 2

export const breakpoints = [512, 768, 1024, 1280];

[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints;

Tested it in JSFiddle with this code:

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);

Worked fine for me. Note that I needed to remove the export in JSFiddle and I also needed to add semicolons for it to work properly.

Edit:

I cannot judge your actual scenario, but I would personally try to avoid extending an array object with such additional properties, unless I really need to access those breakpoints both by property name and by array index, depending on the scenario.

Since I normally only want a single strategy (either array indices or object properties), I would create a "regular" object and add four properties to it.

I could initialize those properties with array destructuring:

const bpArr = [512, 768, 1024, 1280];
const breakpoints = {};

[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = bpArr;

But if there would not be a source array with the numeric values of the breakpoints already, I would simply use an object literal for the breakpoints, which is a lot simpler and easier to read:

const breakpoints = {
  sm: 512,
  md: 768,
  lg: 1024,
  xl: 1280
};

Ultimately it's up to you to keep the code as clear and simple as possible and make it only as complex as necessary. ;)

Answer 3

[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints;

This will not work as you cannot mix deconstructing and assigning.

Try this:

[sm, md, lg, xl] = breakpoints;