数组循环处理DOM元素时首项前项高度的统一优化方案咨询

看起来你想消除代码里的特殊分支，让所有元素的--previousHeight设置逻辑保持一致，这样代码更干净易读对吧？这里有几种优雅的实现方式：

方案一：利用前一个元素的存在性判断（兼容所有JS环境） #

直接通过索引获取前一个元素，不存在时就用0作为默认值，这样就不用单独处理第一项了：

children.forEach((child, i) => {
  const prevChild = children[i - 1];
  // 前一个元素存在就取它的offsetHeight，否则用0
  const previousHeight = prevChild ? prevChild.offsetHeight : 0;
  child.style.setProperty('--previousHeight', `${previousHeight}px`);
});

为什么这样更好？ #

• 移除了if(i > 0)的分支判断，所有元素的处理逻辑完全统一
• 用const声明变量，符合现代JavaScript的最佳实践（避免var带来的变量提升问题）
• 模板字符串${previousHeight}px比字符串拼接更直观

方案二：用可选链+空值合并运算符（ES2020+） #

如果你的运行环境支持ES2020及以上的语法，可以用更简洁的写法：

children.forEach((child, i) => {
  // 可选链处理前一个元素不存在的情况，空值合并运算符兜底为0
  const previousHeight = children[i - 1]?.offsetHeight ?? 0;
  child.style.setProperty('--previousHeight', `${previousHeight}px`);
});

语法说明： #

• children[i - 1]?.offsetHeight：如果children[i - 1]不存在（比如第一项的i=0时），表达式会直接返回undefined，而不会报错
• ?? 0：当左边的值是undefined或null时，就取右边的0作为默认值

这两种方案都完美实现了你想要的height = offsetHeight || 0的逻辑，同时让代码结构更清晰，没有特殊分支，维护起来更轻松。

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