جمع البيانات وتكرارها بطريقة ES6

Jeff Posnick

على الرغم من أنّ مواصفات 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. إنّ التوفّر الأصلي مع مكتبات polyfill مثل es6-collections أو es6-shim يعني أنّه يمكن لمطوّري JavaScript البدء في الإنشاء باستخدام أنواع المجموعات الجديدة هذه اليوم. لا تتوفّر أيّ polyfills لعبارة for...of (على الرغم من أنّه من الممكن تحويل الرمز البرمجي إلى رمز قابل للتنفيذ من خلال Traceur)، ولكنّ التوافق الأصلي متاح حاليًا في Chrome وFirefox.

تعديل، أيلول (سبتمبر) 2014: تم ربطه بخيار polyfill إضافي، وهو es6-shim