无法在函数内获取变量的值

Question

编辑1:根据评论,我更改了代码.编辑2:我得到了代码的错误.我想知道我怎么能让它发挥作用？

我想创建一个通用函数来生成样式,如下所示.这是在ES6中.

const PADDING = [0, 1, 2, 3, 4];
const MARGIN = [0, 8, 16 ];


const generateStyle = (type) => {
  const styles = {};
  const upperCase = type.toUpperCase();

  upperCase.forEach((item) => {
    styles[`${type}-${item}`] = {
      [type]: `${item}px !important`,
    };
  });
  return styles;
};


generateStyle('padding');

此代码提供以下错误:"TypeError:upperCase.forEach不是函数.当我记录大写时,其值为'PADDING'.

但是当我硬编码PADDING而不是大写时,它工作正常.

我究竟做错了什么？

如何使函数通用,以便我也可以使用generateStyle('margin').

Answer 1

`${type}`.toUpperCase()是字符串"PADDING",而不是变量PADDING.您需要将这些变量(PADDING和MARGIN)的内容放在可用于按名称查找它们的结构中,如对象:

const values = {
  padding: [0, 1, 2, 3, 4],
  margin: [0, 8, 16],
};

const generateStyle = (type) => {
  const styles = {};

  values[type].forEach((item) => {
    styles[`${type}-${item}`] = {
      [type]: `${item}px !important`,
    };
  });
  return styles;
};


console.log(generateStyle('padding'));