如何使用JavaScript reduce()方法找出最宽的DOM元素？

你判断的错误原因完全正确：reduce回调每次返回的是Math.max计算出的数值，而非DOM节点。下一轮迭代时，参数a变成了这个数值，调用get_elementWidth(a)自然会报错——数值没有getBoundingClientRect方法。

解决方案1：让reduce始终返回DOM节点 #

修改get_widestElemet函数，在回调中比较两个节点的宽度，保留更宽的那个DOM节点：

function get_elementWidth(ELEMENT) {
  const DOMrect = ELEMENT.getBoundingClientRect();
  return DOMrect.width;
}

function get_widestElemet(ELEMENTS) {
  return ELEMENTS.reduce((prevEl, currEl) => {
    const prevWidth = get_elementWidth(prevEl);
    const currWidth = get_elementWidth(currEl);
    // 返回宽度更大的节点
    return prevWidth > currWidth ? prevEl : currEl;
  });
}

const elements = document.querySelectorAll('.ElementGroup__element');
const widestElement = get_widestElemet([...elements]);
console.log('最宽的DOM节点:', widestElement);
console.log('其宽度:', get_elementWidth(widestElement));

解决方案2：先提取宽度数组再找最大值 #

这种方式更直观，避免reduce中的类型混淆：

function get_elementWidth(ELEMENT) {
  const DOMrect = ELEMENT.getBoundingClientRect();
  return DOMrect.width;
}

function get_widestElemet(ELEMENTS) {
  // 先把所有元素的宽度转换成数值数组
  const widthList = ELEMENTS.map(el => get_elementWidth(el));
  // 展开数组找最大值
  return Math.max(...widthList);
}

const elements = document.querySelectorAll('.ElementGroup__element');
console.log('最大宽度数值:', get_widestElemet([...elements]));

完整可运行代码示例 #

<div class="ElementGroup">
  <span class="ElementGroup__element">Short Element</span>
  <span class="ElementGroup__element">Short Element</span>
  <span class="ElementGroup__element">Looooooooooong Element</span>
</div>

<style>
.ElementGroup {
  display: flex;
  flex-direction: column;
}
</style>

<script>
function get_elementWidth(ELEMENT) {
  const DOMrect = ELEMENT.getBoundingClientRect();
  return DOMrect.width;
}

function get_widestElemet(ELEMENTS) {
  return ELEMENTS.reduce((prevEl, currEl) => {
    const prevWidth = get_elementWidth(prevEl);
    const currWidth = get_elementWidth(currEl);
    return prevWidth > currWidth ? prevEl : currEl;
  });
}

const elements = document.querySelectorAll('.ElementGroup__element');
const widestEl = get_widestElemet([...elements]);
console.log('最宽元素:', widestEl);
console.log('宽度:', get_elementWidth(widestEl));
</script>

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