不使用for...of消费URLSearchParams迭代器的IE兼容首选语法

嘿，这个场景我之前做兼容的时候刚好碰到过！针对IE这种不支持for...of语法的环境，直接操作Iterator的原生next()方法是最稳妥的方案——毕竟这是Iterator接口的核心，你用的polyfill肯定会实现它。

先回顾下你原来的ES6写法： #

var paramsString = "Name=Fiona&Type=Hippo";
var urlParams = new URLSearchParams(paramsString);
var entries = urlParams.entries();
for(pair of entries) {
  console.log(pair[0], pair[1]);
}

兼容IE的首选写法：用while循环配合next() #

Iterator对象的核心就是next()方法，每次调用它会返回一个包含两个属性的对象：

• done: 布尔值，表示是否已经遍历完所有元素
• value: 当前遍历到的元素（这里就是[key, value]的数组）

我们可以用while循环持续调用next()，直到done变为true：

var paramsString = "Name=Fiona&Type=Hippo";
var urlParams = new URLSearchParams(paramsString);
var entries = urlParams.entries();
var iteratorResult;

// 循环调用next()，直到遍历完成
while (!(iteratorResult = entries.next()).done) {
  var pair = iteratorResult.value;
  console.log(pair[0], pair[1]); // 输出 Name Fiona，然后 Type Hippo
}

额外方案：用forEach（需polyfill支持） #

有些URLSearchParams的polyfill会给实例添加forEach方法，用法更简洁，但要注意参数顺序是value在前，key在后，和entries()返回的顺序相反：

var paramsString = "Name=Fiona&Type=Hippo";
var urlParams = new URLSearchParams(paramsString);

urlParams.forEach(function(value, key) {
  console.log(key, value); // 同样输出 Name Fiona，Type Hippo
});

不过还是更推荐第一种while + next()的写法，因为这是Iterator的标准用法，不管你的polyfill有没有额外扩展方法，都能稳定工作，兼容性拉满。

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