在JavaScript中是否有更简洁的方式实现CSS margin简写生成？

当然有更简洁的方式来实现这个功能！我们可以通过解构赋值、链式条件判断或者ES2023的模式匹配来让代码更紧凑且易读，同时完整覆盖CSS margin简写的所有规则（1/2/3/4个值的场景）。

方案1：解构赋值+清晰条件判断 #

这种方式可读性极强，通过解构把四个边的值简化为短变量，然后按CSS简写的优先级依次判断：

const marginDedupe = ({ top = 0, left = 0, right = 0, bottom = 0 }) => {
  const [t, r, b, l] = [top, right, bottom, left];
  
  // 四个值全相等 → 返回单个值
  if (t === r && r === b && b === l) return [t];
  // 上下相等且左右相等 → 返回两个值（上、右）
  if (t === b && r === l) return [t, r];
  // 左右相等 → 返回三个值（上、右、下）
  if (r === l) return [t, r, b];
  // 无匹配模式 → 返回完整四个值
  return [t, r, b, l];
};

方案2：链式三元运算符（更紧凑） #

如果喜欢更紧凑的代码，可以用链式三元运算符，逻辑和上面完全一致，只是写法更简洁：

const marginDedupe = ({ top = 0, left = 0, right = 0, bottom = 0 }) => {
  const vals = [top, right, bottom, left];
  return vals.every(v => v === vals[0]) ? [vals[0]]
    : (top === bottom && right === left) ? [top, right]
    : (right === left) ? [top, right, bottom]
    : vals;
};

方案3：ES2023模式匹配（最直观） #

如果你的运行环境支持ES2023的数组模式匹配（比如Node.js 20+、Chrome 110+），可以用switch语句直接匹配值的模式，代码几乎和CSS简写规则一一对应，非常直观：

const marginDedupe = ({ top = 0, left = 0, right = 0, bottom = 0 }) => {
  switch ([top, right, bottom, left]) {
    // 四个值全相同
    case [a, a, a, a]: return [a];
    // 上下相同、左右相同
    case [a, b, a, b]: return [a, b];
    // 左右相同，上下不同
    case [a, b, c, b]: return [a, b, c];
    // 无重复模式
    default: return [top, right, bottom, left];
  }
};

测试验证 #

几个典型场景的输出都符合预期：

• marginDedupe({top: 10, right:10, bottom:10, left:10}) → [10]
• marginDedupe({top: 10, right:20, bottom:10, left:20}) → [10, 20]
• marginDedupe({top: 10, right:20, bottom:30, left:20}) → [10, 20, 30]
• marginDedupe({top: 10, right:20, bottom:30, left:40}) → [10, 20, 30, 40]

内容的提问来源于stack exchange，提问作者Matt Coady