如何简化为网页断点生成CSS变量的JavaScript代码？

现有一段JavaScript代码，用于生成对应网页断点的CSS变量字符串，功能正常但代码冗余，希望优化得更简洁紧凑，同时保持输出结果不变。

原代码 #

const sizes = {
  xs: 0.9,
  md: 2,
  lg: 2.5,
  xl: 4
};

function getCssVar(size) {
  var varStr = "";

  const defaultBPs = ["xs", "sm", "md", "lg", "xl"];

  defaultBPs.forEach(bp => {
    const bpi = defaultBPs.indexOf(bp);
    var nextHigherIndex = defaultBPs.indexOf(Object.keys(size)[getNextHighestIndex(Object.keys(size).map(bp => (defaultBPs.indexOf(bp))), defaultBPs.indexOf(bp))]);

    if (getNextHighestIndex(Object.keys(size).map(bp => (defaultBPs.indexOf(bp))), defaultBPs.indexOf(bp)) === Object.keys(size).length) {
      nextHigherIndex = defaultBPs.length;
    }

    if (size[bp]) {
      defaultBPs.forEach(bp2 => {
        const bp2i = defaultBPs.indexOf(bp2);
        const generateVar = " --size-" + bp2 + ":" + size[bp] + ";";

        if (bp2i >= bpi && bp2i < nextHigherIndex) {
          varStr += generateVar;
        }
        
      })
    };

  });
  return varStr;
}

function getNextHighestIndex(arr, value) {
  var i = arr.length;
  while (arr[--i] > value);
  return ++i; 
}


console.log(getCssVar(sizes));

原输出结果 #

--size-xs:0.9; --size-sm:0.9; --size-md:2; --size-lg:2.5; --size-xl:4;

优化后的代码 #

const sizes = {
  xs: 0.9,
  md: 2,
  lg: 2.5,
  xl: 4
};

const getCssVar = (sizeMap) => {
  const defaultBPs = ["xs", "sm", "md", "lg", "xl"];
  // 预处理已定义的断点，按默认顺序整理成带索引的数组
  const definedBreakpoints = defaultBPs
    .filter(bp => bp in sizeMap)
    .map(bp => ({ index: defaultBPs.indexOf(bp), value: sizeMap[bp] }));
  
  // 为每个断点匹配对应的生效值并生成变量字符串
  return defaultBPs.map(bp => {
    const currentIndex = defaultBPs.indexOf(bp);
    // 找到最后一个索引不大于当前断点的已定义项
    const matchedValue = definedBreakpoints
      .filter(item => item.index <= currentIndex)
      .pop().value;
    return ` --size-${bp}:${matchedValue};`;
  }).join('');
};

console.log(getCssVar(sizes));

优化说明 #

• 简化逻辑：移除嵌套多层的forEach循环和复杂的索引计算，改用数组链式调用（filter/map/pop），逻辑更直观
• 减少重复计算：提前预处理已定义的断点及其索引，避免多次重复调用indexOf和自定义的getNextHighestIndex函数
• 提升可读性：变量命名更语义化，代码结构拆分清晰，降低理解成本
• 保持输出一致：优化后的代码生成的CSS变量字符串与原代码完全相同

内容的提问来源于stack exchange，提问作者Jonas Q.