ES6 - คอลเลกชัน

ES6 แนะนำโครงสร้างข้อมูลใหม่ 2 แบบ ได้แก่ แผนที่และชุด

• Maps - โครงสร้างข้อมูลนี้ช่วยให้สามารถแมปคีย์กับค่าได้

• Sets- ชุดจะคล้ายกับอาร์เรย์ อย่างไรก็ตามชุดไม่สนับสนุนให้ซ้ำกัน

แผนที่

วัตถุแผนที่เป็นคู่คีย์ / ค่าอย่างง่าย คีย์และค่าในแผนที่อาจเป็นแบบดั้งเดิมหรือวัตถุ

ต่อไปนี้เป็นไวยากรณ์สำหรับสิ่งเดียวกัน

new Map([iterable])

พารามิเตอร์ที่ทำซ้ำได้แสดงถึงออบเจ็กต์ที่ทำซ้ำได้ซึ่งองค์ประกอบประกอบด้วยคู่คีย์ / ค่า แผนที่ได้รับการจัดลำดับกล่าวคือพวกเขาสำรวจองค์ประกอบตามลำดับการแทรก

คุณสมบัติแผนที่

ซีเนียร์ No	คุณสมบัติและคำอธิบาย
1	Map.prototype.size คุณสมบัตินี้ส่งคืนจำนวนคู่คีย์ / ค่าในวัตถุแผนที่

การทำความเข้าใจการใช้งานแผนที่พื้นฐาน

ฟังก์ชัน set () กำหนดค่าสำหรับคีย์ในวัตถุแผนที่ ฟังก์ชัน set () รับพารามิเตอร์สองตัวคือคีย์และค่า ฟังก์ชันนี้จะส่งคืนวัตถุแผนที่

ฟังก์ชัน has () ส่งคืนค่าบูลีนที่ระบุว่าพบคีย์ที่ระบุในวัตถุแผนที่หรือไม่ ฟังก์ชันนี้ใช้คีย์เป็นพารามิเตอร์

var map = new Map(); 
map.set('name','Tutorial Point'); 
map.get('name'); // Tutorial point

ตัวอย่างข้างต้นสร้างวัตถุแผนที่ แผนที่มีเพียงองค์ประกอบเดียว คีย์องค์ประกอบแสดงโดยname. คีย์ถูกจับคู่กับค่าTutorial point.

Note- แผนที่แยกความแตกต่างระหว่างค่าที่คล้ายกัน แต่มีประเภทข้อมูลที่แตกต่างกัน กล่าวอีกนัยหนึ่งคือinteger key 1 ถือว่าแตกต่างจากไฟล์ string key “1”. พิจารณาตัวอย่างต่อไปนี้เพื่อทำความเข้าใจแนวคิดนี้ให้ดีขึ้น

var map = new Map(); 
map.set(1,true); 
console.log(map.has("1")); //false 
map.set("1",true); 
console.log(map.has("1")); //true

เอาต์พุต

false 
true

set()วิธีการยัง chainable ลองพิจารณาตัวอย่างต่อไปนี้

var roles = new Map(); 
roles.set('r1', 'User') 
.set('r2', 'Guest') 
.set('r3', 'Admin'); 
console.log(roles.has('r1'))

เอาต์พุต

True

ตัวอย่างข้างต้นกำหนดวัตถุแผนที่ ตัวอย่างเชื่อมโยงฟังก์ชัน set () เพื่อกำหนดคู่คีย์ / ค่า

get() ฟังก์ชันใช้เพื่อดึงค่าที่สอดคล้องกับคีย์ที่ระบุ

ตัวสร้างแผนที่ยังสามารถส่งผ่านอาร์เรย์ได้ ยิ่งไปกว่านั้นแผนที่ยังรองรับการใช้ตัวดำเนินการกระจายเพื่อแสดงอาร์เรย์

ตัวอย่าง

var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);  
console.log(roles.get('r2'))

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

Guest

Note - ฟังก์ชัน get () จะส่งคืนค่าที่ไม่ได้กำหนดหากคีย์ที่ระบุไม่มีอยู่ในแผนที่

set () จะแทนที่ค่าของคีย์หากมีอยู่แล้วในแผนที่ ลองพิจารณาตัวอย่างต่อไปนี้

var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);  
console.log(`value of key r1 before set(): ${roles.get('r1')}`) 
roles.set('r1','superUser') 
console.log(`value of key r1 after set(): ${roles.get('r1')}`)

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

value of key r1 before set(): User 
value of key r1 after set(): superUser

วิธีการแผนที่

ซีเนียร์ No	วิธีการและคำอธิบาย
1	Map.prototype.clear () ลบคู่คีย์ / ค่าทั้งหมดออกจากวัตถุแผนที่
2	Map.prototype.delete (คีย์) ลบค่าใด ๆ ที่เกี่ยวข้องกับคีย์และส่งคืนค่าที่ Map.prototype.has (คีย์) จะส่งคืนก่อนหน้านี้ Map.prototype.has (คีย์) จะส่งคืนเท็จในภายหลัง
3	Map.prototype.entries () ส่งคืนอ็อบเจ็กต์ Iterator ใหม่ที่มี an array of [คีย์ค่า] สำหรับแต่ละองค์ประกอบในวัตถุแผนที่ตามลำดับการแทรก
4	Map.prototype.forEach (callbackFn [, thisArg]) โทร callbackFnหนึ่งครั้งสำหรับแต่ละคู่คีย์ - ค่าที่มีอยู่ในวัตถุแผนที่ตามลำดับการแทรก หากพารามิเตอร์ thisArg ถูกระบุให้กับ forEach พารามิเตอร์นี้จะถูกใช้เป็นค่า "this" สำหรับการเรียกกลับแต่ละครั้ง
5	Map.prototype.keys () ส่งคืนอ็อบเจ็กต์ Iterator ใหม่ที่มี keys สำหรับแต่ละองค์ประกอบในวัตถุแผนที่ตามลำดับการแทรก
6	Map.prototype.values ​​() ส่งคืนอ็อบเจ็กต์ Iterator ใหม่ที่มี an array of [คีย์ค่า] สำหรับแต่ละองค์ประกอบในวัตถุแผนที่ตามลำดับการแทรก

สำหรับ…ของ Loop

ตัวอย่างต่อไปนี้แสดงการข้ามแผนที่โดยใช้ for … of loop

'use strict' 
var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);
for(let r of roles.entries()) 
console.log(`${r[0]}: ${r[1]}`);

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

r1: User 
r2: Guest 
r3: Admin

แผนที่อ่อนแอ

แผนที่ที่อ่อนแอจะเหมือนกับแผนที่โดยมีข้อยกเว้นต่อไปนี้ -

• กุญแจของมันต้องเป็นวัตถุ

• คีย์ในแผนที่ที่อ่อนแอสามารถเก็บขยะได้ Garbage collection เป็นกระบวนการล้างหน่วยความจำที่ครอบครองโดยอ็อบเจ็กต์ที่ไม่ได้อ้างถึงในโปรแกรม

• แผนที่ที่อ่อนแอไม่สามารถทำซ้ำหรือล้างได้

ตัวอย่าง: แผนที่อ่อนแอ

'use strict' 
let weakMap = new WeakMap(); 
let obj = {}; 
console.log(weakMap.set(obj,"hello"));  
console.log(weakMap.has(obj));// true

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

WeakMap {} 
true

ชุด

ชุดคือโครงสร้างข้อมูล ES6 คล้ายกับอาร์เรย์โดยมีข้อยกเว้นว่าไม่สามารถมีรายการที่ซ้ำกันได้ กล่าวอีกนัยหนึ่งคือช่วยให้คุณสามารถจัดเก็บค่าที่ไม่ซ้ำกันได้ ชุดรองรับทั้งค่าดั้งเดิมและการอ้างอิงวัตถุ

เช่นเดียวกับแผนที่ชุดต่างๆจะเรียงลำดับเช่นกันกล่าวคือองค์ประกอบจะวนซ้ำตามลำดับการแทรก ชุดสามารถเริ่มต้นได้โดยใช้ไวยากรณ์ต่อไปนี้

ตั้งค่าคุณสมบัติ

ซีเนียร์ No	คุณสมบัติและคำอธิบาย
1	Set.prototype.size ส่งคืนจำนวนค่าใน Set object

ตั้งค่าวิธีการ

ซีเนียร์ No	วิธีการและคำอธิบาย
1	Set.prototype.add (ค่า) ผนวกองค์ประกอบใหม่ที่มีค่าที่กำหนดให้กับวัตถุ Set ส่งคืนวัตถุ Set
2	Set.prototype.clear () ลบองค์ประกอบทั้งหมดออกจากวัตถุ Set
3	Set.prototype.delete (ค่า) ลบองค์ประกอบที่เกี่ยวข้องกับค่า
4	Set.prototype.entries () ส่งคืนอ็อบเจ็กต์ Iterator ใหม่ที่มี an array of[value, value] สำหรับแต่ละองค์ประกอบใน Set object ตามลำดับการแทรก สิ่งนี้จะถูกเก็บไว้คล้ายกับอ็อบเจ็กต์แผนที่เพื่อให้แต่ละรายการมีค่าคีย์และค่าเท่ากันที่นี่
5	Set.prototype.forEach (callbackFn [, thisArg]) โทร callbackFnหนึ่งครั้งสำหรับแต่ละค่าที่มีอยู่ใน Set object ตามลำดับการแทรก ถ้าathisArg พารามิเตอร์ถูกระบุให้กับ forEach ซึ่งจะถูกใช้เป็นค่า "this" สำหรับการเรียกกลับแต่ละครั้ง
6	Set.prototype.has (ค่า) ส่งคืนบูลีนที่ยืนยันว่าองค์ประกอบมีอยู่พร้อมกับค่าที่กำหนดในออบเจ็กต์ Set หรือไม่
7	Set.prototype.values ​​() ส่งคืนอ็อบเจ็กต์ Iterator ใหม่ที่มี values สำหรับแต่ละองค์ประกอบในวัตถุ Set ตามลำดับการแทรก

ชุดที่อ่อนแอ

ชุดที่อ่อนแอสามารถมีได้เฉพาะวัตถุและวัตถุที่มีอาจเป็นขยะที่เก็บรวบรวมได้ เช่นเดียวกับแผนที่ที่อ่อนแอชุดที่อ่อนแอจะไม่สามารถทำซ้ำได้

ตัวอย่าง: การใช้ชุดที่อ่อนแอ

'use strict' 
   let weakSet = new WeakSet();  
   let obj = {msg:"hello"}; 
   weakSet.add(obj); 
   console.log(weakSet.has(obj)); 
   weakSet.delete(obj); 
   console.log(weakSet.has(obj));

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

true 
false

Iterator

Iterator คืออ็อบเจกต์ที่อนุญาตให้เข้าถึงคอลเลกชันของอ็อบเจ็กต์ทีละรายการ ทั้ง set และ map มีวิธีการที่ส่งคืนตัววนซ้ำ

ตัวทำซ้ำเป็นวัตถุที่มี next()วิธี. เมื่อเรียกใช้เมธอด next () มันจะส่งคืนอ็อบเจ็กต์ด้วย'value' และ 'done'คุณสมบัติ . 'done' เป็นบูลีนซึ่งจะคืนค่าจริงหลังจากอ่านรายการทั้งหมดในคอลเล็กชัน

ตัวอย่างที่ 1: Set และ Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.entries(); 
console.log(iterator.next())

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

{ value: [ 'a', 'a' ], done: false }

เนื่องจากชุดไม่เก็บคีย์ / ค่าอาร์เรย์ค่าจึงมีคีย์และค่าที่คล้ายกัน เสร็จแล้วจะเป็นเท็จเนื่องจากมีองค์ประกอบเพิ่มเติมให้อ่าน

ตัวอย่างที่ 2: Set และ Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.values(); 
console.log(iterator.next());

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

{ value: 'a', done: false }

ตัวอย่างที่ 3: Set and Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.keys(); 
console.log(iterator.next());

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

{ value: 'a', done: false }

ตัวอย่างที่ 4: Map และ Iterator

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.entries(); 
console.log(iterator.next());

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

{ value: [ 1, 'one' ], done: false }

ตัวอย่างที่ 5: Map และ Iterator

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.values(); 
console.log(iterator.next());

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

{value: "one", done: false}

ตัวอย่างที่ 6: Map และ Iterator

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.keys(); 
console.log(iterator.next());

ผลลัพธ์ต่อไปนี้จะแสดงเมื่อดำเนินการตามโค้ดด้านบนสำเร็จ

{value: 1, done: false}