這里我不明白為什么ESlint不允許這個賦值，請幫忙。
我在這里看到了這段代碼：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]
uj5u.com熱心網友回復：
export const breakpoints = [512, 768, 1024, 1280];
[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints;
使用以下代碼在JSFiddle中對其進行了測驗：
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);
對我來說效果很好。請注意，我需要洗掉exportJSFiddle 中的 ，并且還需要添加分號以使其正常作業。
編輯：
我無法判斷您的實際場景，但我個人會盡量避免使用此類附加屬性擴展陣列物件，除非我確實需要根據場景通過屬性名稱和陣列索引訪問這些斷點。
由于我通常只需要一個策略（陣列索引或物件屬性），因此我會創建一個“常規”物件并向其添加四個屬性。
我可以使用陣列解構來初始化這些屬性：
const bpArr = [512, 768, 1024, 1280];
const breakpoints = {};
[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = bpArr;
但是，如果已經沒有包含斷點數值的源陣列，我將簡單地為斷點使用物件字面量，這更簡單易讀：
const breakpoints = {
sm: 512,
md: 768,
lg: 1024,
xl: 1280
};
最終由您來保持代碼盡可能清晰和簡單，并僅在必要時使其復雜。;)
uj5u.com熱心網友回復：
你可以像這樣解構它。
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 = 512uj5u.com熱心網友回復：
[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints;
這將不起作用，因為您不能混合解構和分配。
嘗試這個：
[sm, md, lg, xl] = breakpoints;
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/347637.html
標籤：javascript 解构