相对URL锚点访问实现方案优化咨询：当前JS写法是否最优？

嘿，针对你的问题，我来梳理下更优的解决方案～先直接回应你的两个疑问：

1. 你当前的实现肯定不是最优解——代码冗余度高，路径处理逻辑可以大幅简化；
2. 把代码合并成单行是可行的，但完全没必要：JS执行效率上的差异可以忽略不计，反而会让代码变得难以维护，后续改起来超麻烦。

为什么当前代码可以优化？ #

你的路径处理部分绕了大弯，其实浏览器自带了更简洁的API来获取路径信息：

• window.location.pathname 可以直接拿到当前页面的路径（不带域名和查询参数），根本不需要手动拆分href；
• 另外，重复创建anchor1到anchor4、逐个获取DOM元素赋值，这种重复代码完全可以用循环批量处理，减少冗余。

优化后的JS实现 #

// 简化路径处理：拆分路径并获取目标层级的片段
const pathSegments = window.location.pathname.split('/').filter(seg => seg); // 过滤掉拆分后出现的空字符串
const targetSegment = pathSegments[2]; // 对应你原来的pathIndexToGet=3（因为split后索引从0开始，splice(1,...)后的原数组第3个元素对应索引2）

// 用数组批量管理所有链接的ID和锚点
const linkConfigs = [
  { id: 'seclink1', anchor: '#sec1' },
  { id: 'seclink2', anchor: '#sec2' },
  { id: 'seclink3', anchor: '#sec3' },
  { id: 'seclink4', anchor: '#sec4' }
];

// 循环赋值，一次搞定所有链接
linkConfigs.forEach(config => {
  const linkElement = document.getElementById(config.id);
  if (linkElement) { // 加个判断，避免元素不存在时报错
    linkElement.href = `../${targetSegment}${config.anchor}`;
  }
});

这个版本的好处：

• 路径处理更直观，用pathname替代手动拆分href，减少出错概率；
• 用数组+循环批量处理链接，后续新增或修改链接，只需要在linkConfigs里改，不用重复写相同的赋值代码；
• 增加了元素存在性判断，避免页面上某个链接ID写错时，JS直接报错影响其他功能。

更优的非JS方案（如果你的模板支持） #

如果你是用服务器端模板引擎（比如Jekyll、Hugo、PHP、Node.js模板这类工具）来搭建30个页面的模板，那完全可以在模板层面直接生成相对路径，根本不需要依赖JS：
举个Jekyll的例子，你可以直接在模板里写：

<a href="../{{ page.url | split: '/' | slice: 3 | first }}#sec1">Section 1</a>
<a href="../{{ page.url | split: '/' | slice: 3 | first }}#sec2">Section 2</a>

这种方案的优势是链接在页面加载时就已经生成好了，不会有JS执行延迟导致的链接暂时不可用的问题，用户体验更好，也更符合静态页面的最佳实践。

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