CODEWITHSUNDEEP
javascriptloopsiterator
KyleMit
KyleMit

Reputation: 30147

Proper consumption of iterator without using for...of

I'm using URLSearchParams which will return an iterator object, but isn't supported in IE. I added a polyfill, but now IE doesn't have any native support for the returned iterator object as it doesn't implement the for...of syntax.

What is the preferred syntax for calling an iterator object without for..of?

Here's the ES6 for...of syntax:

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]); 
}


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]); 
}
<script src="https://cdn.rawgit.com/WebReflection/url-search-params/v0.10.0/build/url-search-params.js"></script>

I'd love to find a canonical source that implements the calling syntax for iterator objects back to older browsers without relying on transpiling for...of.

Upvotes: 3

Views: 524

Answers (4)

dmitrydwhite
dmitrydwhite

Reputation: 826

I'm not entirely sure what your constraints are, but you could also use the spread operator on your entries variable, if that's available to you.

var paramsString = "Name=Fiona&Type=Hippo";
var urlParams = new URLSearchParams(paramsString);
var entries = [...urlParams.entries()]; // Use spread operator here

// Now entries is just an array with all the normal array methods on it.
entries.forEach(pair => console.log(pair[0], pair[1]));

Upvotes: 1

Taki
Taki

Reputation: 17654

Why not good old forEach ?

a console.log(urlParams); shows that the object returned has the forEach method but surprisingly it's not mentioned among the methods in the MDN 

urlParams.forEach(function(value, key){ 
    console.log(key + ' : ' + value)
});


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

urlParams.forEach(function(value, key){ 
  console.log(key + ' : ' + value)
});

Proto Methods of UrlSearchParams in each browser:

enter image description here

Upvotes: 2

xianshenglu
xianshenglu

Reputation: 5369

if you are nervous about while(true),you can try this:

var paramsString = "Name=Fiona&Type=Hippo";
var urlParams = new URLSearchParams(paramsString);
var entries = urlParams.entries();
var iterator = entries.next();
while(!iterator.done) {  
  if (iterator.value) {
console.log(iterator.value[0] + ": " +
            iterator.value[1])
  }
  iterator=entries.next();
}
<script src="https://cdn.rawgit.com/WebReflection/url-search-params/v0.10.0/build/url-search-params.js"></script>

Upvotes: 1

KyleMit
KyleMit

Reputation: 30147

Here's my attempt at an iterator implementation, but the while(true) makes me nervous. Any other sources / implementations welcome.

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

while(true) {
  var iterator = entries.next()
  if (iterator.value) {
    console.log(iterator.value[0] + ": " +
                iterator.value[1])
  }
  if (iterator.done) {
    break;
  }
}
<script src="https://cdn.rawgit.com/WebReflection/url-search-params/v0.10.0/build/url-search-params.js"></script>

Upvotes: 0

Related Questions