Сбор и итерация в стиле ES6

Спецификация ECMAScript 6, хотя она все еще находится в черновой форме , обещает добавить множество новых интересных инструментов в пояс программиста JavaScript. Новые классы, такие как Set и Map предлагают собственные решения для работы с определенными типами коллекций, а оператор for...of представляет собой элегантную альтернативу традиционным способам перебора данных.

Set предлагают способ отслеживания коллекции элементов, в которой каждый элемент может появляться не более одного раза. Map предлагают больше функциональности, чем это было возможно ранее, за счет использования Object для связывания ключей со значениями — с Map ваши ключи не обязательно должны быть строками, и вам не придется беспокоиться о случайном выборе имени ключа, которое конфликтует с Имена методов Object . Операции поиска в собственных Map и Set выполняются за постоянное время , что обеспечивает повышение эффективности по сравнению с смоделированными реализациями.

В следующем примере показано создание Set и использование for...of для перебора его элементов:

<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>

Вот соответствующий пример , иллюстрирующий использование и перебор Map :

<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>

Некоторые браузеры, такие как Chrome , Internet Explorer и Firefox , уже добавили поддержку Set и Map . Встроенная поддержка, дополненная библиотеками полифилов, такими как es6-collections или es6-shim, означает, что разработчики JavaScript могут начать работу с этими новыми типами коллекций уже сегодня. Для оператора for...of нет полифилов (хотя можно передать поддержку через Traceur ), но встроенная поддержка сегодня доступна в Chrome и Firefox .

Обновление, сентябрь 2014 г .: связано с дополнительной опцией полифила, es6-shim.