ES6 |收藏

ES6 是添加到 JavaScript 中的一系列新特性。在 ES6 版本中包含了新的数据类型集合，因此不再需要使用对象，并且更容易以简单的方式实现事物。
在 ES6 版本中，JavaScript 中引入了两个新东西。

• 地图
• 套

Maps： Maps 是任何类型的键和值的集合，简单来说， Map是键值对的集合。它就像 JavaScript 中的对象一样工作。它返回一个新的或空的地图。
句法：

var map = new Map();

Methods	Description
map.size()	It determines the number of key or values in the map.
map.set()	It sets the value for the key .It takes two parameters, key and the value for the key.
map.has()	It checks whether a key is present in the map or not then its returns true.
map.get()	It takes a value associated with a key .If the value is not available then its undefined.
map.keys()	It returns an iterator for all the keys in the map.
map.entries()	It returns a new iterator array of which contains key-value pair for each element by insertion order.
map.values()	It returns an iterator for each of the values in the map.
map.delete()	It is used to delete an entry.
map.clear()	It clears all key-value pairs from the map.
map.forEach()	It executes the callback function once. This function executed for each element in the map.

for...of 循环： for..of是一个循环，它提供了一种非常简洁的语法来迭代各种可迭代对象和可枚举对象。 for...of 迭代可迭代对象。此循环迭代 Array、String、类数组对象、TypedArray、Map 和任何用户定义的可迭代对象。

• 例子：
  

javascript

// Simple JavaScript program to illustrate for...of loop

var arr = ['a', 3 , 'b', 2 , 'c', 1 ,'d'];
document.write("array elements are : ");
for (let ele of arr) {
  document.write(ele+' ');
}

• 输出：
  

array elements are : a 3 b 2 c 1 d

地图示例：

• 方案一：实现map.size()、map.set()方法
  

javascript

// Simple JavaScript program to implement Map.size

var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
document.write(m.size);
                    

• 输出：
  

size of the map is : 3

• 方案二：实现map.set()、map.get()、map.delete()、map.clear()、map.has()方法
  

javascript

/ Simple JavaScript program with Map
var map = new Map(); 
map.set("website ", "Geeksforgeeks"); 
document.write("Website is - " +map.get("website "));
// Use "get()" function
  
map.set("Subject1", "JavaScript"); //use "set()" function
map.set("Subject2", "C++");
map.set("Subject3", "python");
document.write("<br>Is it contains JavaScript ? - "+map.has("Subject1"));
document.write("<br>Is it contains C++ ? - "+map.has("Subject2"));
document.write("<br>Is it contains python ? - "+map.has("Subject3"));
// Use "has()" function
  
map.delete("subject2");
document.write("<br>Delete C++");
// Use "delete()" function
document.write("<br>Is it contains C++ now ? - "+map.has("C++")); //false
  
map.clear();//use "clear()" function
document.write("<br>Delete whole map");
document.write("<br> Is it has any value now? - "+map.has("Subject1"));
  
  

• 输出：
  

Website is - Geeksforgeeks
Is it contains JavaScript ? - true
Is it contains C++ ? - true
Is it contains python ? - true
Delete C++
Is it contains C++ now ? - false
Delete whole map
Is it has any value now? - false

• 程序 3：实现 map.forEach() 方法
  

javascript

// Simple JavaScript program to implement <b>Map.forEach()</b>
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
m.forEach((k, v)=>document.write(`key: ${k} value: ${v} <br>`));

• 输出：
  

key: 1 value: a
key: 2 value: b
key: 3 value: c

• 程序 4：实现 map.keys() 方法
  

javascript

// Simple JavaScript program to implement Map.keys()
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
var i = m.keys();
document.write("value : "+ i.next().value+"<br>");//"a"
document.write("value : "+ i.next().value+"<br>");//"b"
document.write("value : "+ i.next().value+"<br>");//"c"
document.write("value : "+ i.next().value+"<br>");//undefined
// Because the map contains only 4 elements

• 输出：
  

value : a
value : b
value : c
value : undefined

• 程序：5实现 map.entries() 方法
  

javascript

// Simple JavaScript program to implement Map.entries()
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
var i = m.entries();
document.write("value : "+ i.next().value+"<br>");//"a,1"
document.write("value : "+ i.next().value+"<br>");//"b,2"
document.write("value : "+ i.next().value+"<br>");//"c,3"
document.write("value : "+ i.next().value+"<br>");//undefined
// Because the map contains only 4 elements
    

• 输出：
  

value : a,1
value : b,2
value : c,3
value : undefined

• 程序 6：实现 map.values() 方法。
  

javascript

// Simple JavaScript program to implement Map.values()
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
var i = m.values();
document.write("value : "+ i.next().value+"<br>");//"1"
document.write("value : "+ i.next().value+"<br>");//"2"
document.write("value : "+ i.next().value+"<br>");//"3"
document.write("value : "+ i.next().value+"<br>");//undefined
// Because the map contains only 4 elements
    

• 输出：
  

value : 1
value : 2
value : 3
value : undefined

弱贴图：弱贴图类似于普通贴图。弱映射用于将弱对象引用存储为键，即键必须是对象。弱映射不能被清除，键的值可以是垃圾值。

• 例子：
  

javascript

  
// Simple JavaScript program to implement WeakMap()
var gfg = new WeakMap(); 
var gg = {};
  
//"gg" is a object
// Works as key
gfg.set(gg,"c++");
document.write(gfg.has(gg));//true
document.write("<br>"+gfg.get(gg));//c++
gg=null;//"gg" becomes null
document.write("<br>"+gfg.get(gg));//undefined

• 输出：
  

true
c++
undefined

Set：是ES6版本中引入的数据结构。 Set是值的集合，例如数组，但它不包含任何重复项。它是可变的，因此我们的程序可以随时添加和删除值。它返回设置对象。

Methods	Description
set.size()	It returns the total number of values present in the set.
set.add()	It adds a value to the set if the value was not already in the set.
set.clear()	It removes all values from the set
set.delete(v)	It removes one value from the set, the value is passed as argument.
set.has(v)	If the passed value “v” is in the set, then this method returns true.
set.entries()	It returns an iterator object which contains an array having the entries of the set.
set.values() and set.keys()	They both are returns all the values from the Set, similar to map.values().
set.forEach() method	It same as map.forEach() ,it executes the callback function once. This function executed for each element in the set.

• 句法：
  

var s = new Set("val1","val2","val3")

• 例子：
  

javascript

// Simple JavaScript program with Set
  
var st = new Set(); 
  
st.add("JavaScript").add("C++").add("python"); //use "add()" function
  
document.write("<br>Is it contains JavaScript ? - "+st.has("JavaScript"));
document.write("<br>Is it contains C++ ? - "+st.has("C++"));
document.write("<br>Is it contains python ? - "+st.has("python"));
// Use "has()" function
  
st.delete("C++");
document.write("<br>Delete C++");
  
// Use "delete()" function
document.write("<br>Is it contains C++ now ? - "+st.has("C++")); //false
  
st.clear();//use "clear()" function
document.write("<br>Delete whole set");
document.write("<br> Is it has any value now? - "+st.has("JavaScript"));
  
                    

• 输出：
  

Is it contains JavaScript ? - true
Is it contains C++ ? - true
Is it contains python ? - true
Delete C++
Is it contains C++ now ? - false
Delete whole set
Is it has any value now? - false

迭代器： Set 中的迭代器允许一次访问一个对象的集合。它与 next() 方法一起使用，当调用 next() 时，一次打印一个集合的值，并在成功读取集合的值后返回属于done属性的布尔值“true” 。这件事发生在控制台窗口中。在输出的情况下，如果我们使用关键字“value”后跟 next()，则只显示值，例如iterator.next().value

• 例子：
  

javascript

// Simple JavaScript program with Set iterator
var  s = new Set(['a','b','c']); //set elements 
var itr = s.values(); 
document.write(itr.next().value+"<br>");
document.write(itr.next().value+"<br>");
document.write(itr.next().value+"<br>");
document.write(itr.next().value);//undefined
    

• 输出：
  

a
b
c
undefined

Weak Set：与Weak Map类似，也用于存储对象的集合。它类似于普通集合，所以它不能存储重复。它可能包含垃圾值。集合和弱集的唯一区别是弱集包含对象。

• 例子：
  

javascript

var gfg = new WeakSet 
var gg1 = {};//"gg1" is a object
var gg2 = {};//"gg2" is a object
   
gfg.add(gg1);
gfg.add(gg2);
document.write(gfg.has(gg1));//true
gfg.delete(gg1);//delete "gg1"
document.write("<br>"+gfg.has(gg1));//undefined
    

• 输出：
  

true
false