Die Spezifikation ECMAScript 6 befindet sich zwar noch in der Entwurfsform, bietet aber viele spannende neue Tools, die JavaScript-Programmierer ergänzen können. Neue Klassen wie Set und Map bieten native Lösungen für die Arbeit mit bestimmten Arten von Sammlungen. Die for...of-Anweisung bietet eine elegante Alternative zu herkömmlichen Methoden der Iteration über Daten.
Set bieten eine Möglichkeit, den Überblick über eine Sammlung von Elementen zu behalten, in denen jedes Element höchstens einmal vorkommen kann. Map-Objekte bieten mehr Funktionen als bisher mit Objects zum Verknüpfen von Schlüsseln mit Werten – bei einem Map müssen Ihre Schlüssel keine Strings sein und Sie müssen nicht versehentlich einen Schlüsselnamen auswählen, der mit den Methodennamen einer Object in Konflikt steht. Lookup-Vorgänge auf nativen Maps und Sets werden in konstanter Zeit ausgeführt, was eine Effizienzsteigerung gegenüber simulierten Implementierungen bietet.
Im folgenden Beispiel wird die Konstruktion einer Set und die Verwendung von for...of zum Iterieren der Elemente veranschaulicht:
<pre id="log"></pre>
<script>
function log() {
document.querySelector('#log').textContent += Array.prototype.join.call(arguments, '') + '\n';
}
log('Creating, using, and iterating over a Set:');
var randomIntegers = new Set();
// Generate a random integer in the range [1..10] five times,
// and use a Set to keep track of the distinct integers that were generated.
for (var i = 0; i < 5; i++) {
randomIntegers.add(Math.floor(Math.random() * 10) + 1);
}
log(randomIntegers.size, ' distinct integers were generated.');
log('The number 10 was ', randomIntegers.has(10) ? '' : 'not ', 'one of them.');
log('Here\'s all of them:');
// Use for...of to iterate over the items in the Set.
// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-iteration-statements
// The Set iterator yields a single value corresponding to each entry in the Set.
for (var item of randomIntegers) {
log(item);
}
</script>
Hier ist ein entsprechendes Beispiel, das die Verwendung und Iteration über eine Map veranschaulicht:
<script>
log('\nCreating and iterating over a Map:');
// Maps can be initialized by passing in an iterable value (https://people.mozilla.org/~jorendorff/es6-draft.html#sec-map-iterable)
// Here, we use an Array of Arrays to initialize. The first value in each sub-Array is the new
// Map entry's key, and the second is the item's value.
var typesOfKeys = new Map([
['one', 'My key is a string.'],
['1', 'My key is also a string'],
[1, 'My key is a number'],
[document.querySelector('#log'), 'My key is an object']
]);
// You can also call set() to add new keys/values to an existing Map.
typesOfKeys.set('!!!!', 'My key is excited!');
// Use for...of to iterate over the items in the Map.
// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-iteration-statements
// There are several types of Map iterators available.
// typesOfKeys.keys() can be used to iterate over just the keys:
log('Just the keys:');
for (var key of typesOfKeys.keys()) {
log(' key: ', key);
}
// typesOfKeys.values() can be used to iterate over just the values:
log('Just the values:');
for (var value of typesOfKeys.values()) {
log(' value: ', value);
}
// The default Map iterator yields an Array with two items; the first is the Map entry's key and the
// second is the Map entry's value. This default iterator is equivalent to typesOfKeys.entries().
log('Keys and values:');
// Alternative, ES6-idiomatic syntax currently supported in Safari & Firefox:
// for (var [key, value] of typesOfKeys) { … }
for (var item of typesOfKeys) {
log(' ', item[0], ' -> ', item[1]);
}
</script>
Einige Browser wie Chrome, Internet Explorer und Firefox bieten bereits Unterstützung für Set und Map. Die native Unterstützung, ergänzt durch Polyfill-Bibliotheken wie es6-collections oder es6-shim, ermöglicht es JavaScript-Entwicklern, diese neuen Sammlungstypen zu nutzen. Für die for...of-Anweisung sind keine Polyfills verfügbar. Die Unterstützung kann jedoch über Traceur transpiliert werden. Native Unterstützung ist jedoch ab sofort in Chrome und Firefox verfügbar.
Aktualisierung, September 2014: Mit der zusätzlichen Polyfill-Option es6-shim verknüpft