iOS Safari中classList.forEach无法运行的问题求助

嘿，这个问题我太熟悉了！旧版本的iOS Safari（比如iOS 9及更早）里，classList所属的DOMTokenList接口并没有实现forEach方法，这就是你碰到报错的根源。给你几个兼容性拉满的解决办法：

方案1：将classList转换为数组后使用forEach #

把DOMTokenList转换成数组，就能用数组原生的forEach方法了，兼容性也很好。你可以用Array.prototype.slice.call()（支持所有旧版Safari）或者更现代的Array.from()（iOS 9+支持）：

修改后的核心代码： #

// 兼容性最好的转换方式（适配所有老旧Safari版本）
const bodyClasses = Array.prototype.slice.call(document.body.classList);
bodyClasses.forEach(function(e){
  let pageName = e;
  if(Routes.hasOwnProperty(pageName)){
    new Routes[pageName]();
  }
});

或者用更简洁的现代写法（iOS 9+支持）：

Array.from(document.body.classList).forEach(e => {
  if(Routes.hasOwnProperty(e)){
    new Routes[e]();
  }
});

方案2：使用传统for循环遍历 #

如果要兼容极端老旧的iOS版本，传统for循环是最稳妥的选择，直接通过索引访问classList的每一项：

修改后的核心代码： #

const bodyClassList = document.body.classList;
for(let i = 0; i < bodyClassList.length; i++){
  const pageName = bodyClassList.item(i);
  if(Routes.hasOwnProperty(pageName)){
    new Routes[pageName]();
  }
}

额外优化：简化body元素获取 #

建议用document.body代替document.getElementsByTagName("body")[0]，代码更简洁高效，两者效果完全一致。

完整修改后的代码： #

import Header from './Components/Header'; 
import Shelf from './Components/Shelf'; 
import Home from './Pages/Home'; 
import Category from './Pages/Category'; 
import Product from './Pages/Product'; 
import NossasLojas from './Pages/NossasLojas'; 
import Checkout from './Pages/Checkout'; 

const Routes = { 
  "home": Home, 
  "single-product": Product, 
  "page-template-nossas-lojas": NossasLojas, 
  "archive": Category, 
  "woocommerce-cart": Checkout 
}; 

export default class Pages { 
  constructor(){ 
    new Header(); 
    new Shelf(); 
    try { 
      // 这里采用方案1的兼容性写法
      const bodyClasses = Array.prototype.slice.call(document.body.classList);
      bodyClasses.forEach(function(e){ 
        let pageName = e; 
        if(Routes.hasOwnProperty(pageName)){ 
          new Routes[pageName](); 
        } 
      }); 
    } catch (err) { 
      alert(err); 
    } 
  } 
}

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