访问与数组中的项同名的对象——Javascript答案

【问题标题】：Access Object with Same Name as Item in Array -- Javascript访问与数组中的项同名的对象——Javascript
【发布时间】：2019-09-24 12:01:32
【问题描述】：

请查看下方更新

我有一个包含以下值的数组：

tablet, desktop, widescreen, fullhd

我也有同名的对象。我正在尝试创建一个forEach 循环，它将使用数组中的不同名称来访问具有相同名称的对象上的某些属性。像这样的：

  ['tablet', 'desktop', 'widescreen', 'fullhd'].forEach(type => {
      css`@media screen and (min-width: ${breakpoints[type]}) {
        color: ${type[color]};
        background-color: ${type[bg]};
      }
    `;
  })}

问题是当我尝试访问type[color] 或type[bg] 时。在这种情况下，我尝试使用type 来引用名为tablet 或desktop 等的对象。但是，我尝试使用字符串tablet、desktop 等来执行此操作。- - 这不起作用。

所以，这是我的问题...

如何重写我的代码，以便循环遍历数组的值来访问同名对象的相关属性？

更新

这是我的完整代码。不过，在展示代码之前，我应该注意，在这个特定的示例中，我使用的是 ReactJS 和 Styled Components。然而，据我所知，这个问题与 React 或 Styled Components 无关——这是一个纯 Javascript 问题：

首先，一个断点对象：

const breakpoints = {
  tablet: "769px",
  desktop: "1024px",
  widescreen: "1216px",
  fullhd: "1408px"
};

其次，我根据该对象的键创建一个数组：

const breakpointKeys = Object.keys(breakpoints);

第三，我创建了一个函数，它使用该数组来尝试访问另一个对象（更多内容见下文）：

const gridCSS = ({ bg, color, tablet }) => css`
  background-color: ${bg};
  color: ${color};
  ${breakpointKeys.forEach(key => {
    css`
      @media screen and (min-width: ${breakpoints[key]}) {
        color: ${key[color]};
        background-color: ${key[bg]};
      }
    `;
  })}

第四，我创建了一个使用该功能的样式化组件 (${gridCSS})：

const Grid = styled.div(
  ({ color, bg, desktop, tablet }) => css`
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  ${gridCSS}
`
);

第五，我创建了一个带有许多 props 的 React 组件（注意，特别是 tablet 和 desktop 的 props）：

function App() {
  return (
    <Grid
      color="orange"
      bg="lightgreen"

      tablet={{
        color: "green",
        bg: "orange"
      }}

      desktop={{
        color: "yellow",
        bg: "purple"
      }}
    >
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </Grid>
  );
}

道具tablet 和desktop 是我试图从breakpointsKeys 数组中访问的对象。

【问题讨论】：

您应该像这样访问该对象的值，object[type][bg] 吗？您能展示一下您的对象的外观吗？
用eval获取对象怎么样。类似于：让 obj = eval(type);
例如有一个具有这些名称的属性的对象，它充当索引。 const index = { tablet, desktop, widescreen, fullhd }; index[type][color];
那么为什么没有一个包含对象的数组呢？要么代替字符串，要么与该数组并排。这样，传入.forEach() 回调的索引值可用于访问实际对象。
${key[color]} 无效。为断点对象添加颜色并使用tablet: { "bp":"769px", "color":"red",...} 执行${breakpoints[key].color} 等操作

标签： javascript arrays object javascript-objects

【解决方案1】：

我想出了一个可行的解决方案。代码如下：

const gridCSS = ({ bg, textColor, ...props }) => {
  let mediaQueryCSS = breakpointKeys.map(key => {
    let mediaQuery = breakpoints[key].value + breakpoints[key].unit;

    return css`
      @media screen and (min-width: ${mediaQuery}) {
        color: ${props[key] && props[key].textColor};
        background-color: ${props[key] && props[key].bg};
      }
    `;
  });

  return css`
    background-color: ${bg};
    color: ${textColor};
    ${mediaQueryCSS};
  `;
};

从forEach 更改为map 与样式化组件有关。

我认为这样做的原因是因为我没有破坏 props 对象的道具，而是引用 props，然后引用 key 关闭 props（如 cmets 中的“代码”所述） Maniac'。这样，我不是用字符串调用对象，而是用字符串调用对象的属性。

无论哪种方式，它都有效。

【讨论】：

【解决方案2】：

你可以使用eval():

eval(type).color
eval(type).bg

【讨论】：