ในขณะที่ข้อกำหนด ECMAScript 6 ยังอยู่ในรูปแบบฉบับร่าง ก็เป็นตัวอย่างด้วยเครื่องมือใหม่ที่น่าตื่นเต้นอีกมากมายที่จะเพิ่มเข้ามาในสายของโปรแกรมเมอร์ JavaScript ชั้นเรียนใหม่ เช่น Set และ Map มีโซลูชันแบบเนทีฟสำหรับทำงานกับคอลเล็กชันบางประเภท คำสั่ง for...of ก็เป็นทางเลือกที่ดีแทนวิธีดั้งเดิมในการทำซ้ำข้อมูล
Set ให้วิธีติดตามคอลเล็กชันของรายการต่างๆ ที่แต่ละรายการจะปรากฏได้สูงสุด 1 ครั้ง 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 สามารถเริ่มสร้างคอลเล็กชันประเภทใหม่ได้แล้ววันนี้ ไม่มี Polyfill สำหรับคำสั่ง for...of (แต่สามารถแปลงการสนับสนุนผ่าน Traceur ได้) แต่ปัจจุบันการสนับสนุนของระบบมีให้ใช้งานแล้วใน Chrome และ Firefox
อัปเดตเดือนกันยายน 2014: ลิงก์กับตัวเลือก Polyfill เพิ่มเติมอย่าง es6-shim