ES6集合,Set集合,Map集合,以及for .... of遍历

集合

1.什么是集合

1.无序

2.不重复

2.Set

ES6的新的数据结构，类似于数组，但是元素是唯一的，而且没有顺序。

创建set

let s = new Set();

添加元素的两种方式

<script>
    //### 添加元素的两种方式
    let s = new Set([30, 40]);
    s.add(10)
    s.add(20)
</script>

下面例子:10和10重复了,故只输出一个10;
两个对象看似重复了,其实没有,(这时两个内存地址不同的对象,只是值相同了,本质是不同的)

let s = new Set([30,40]);
s.add(10)
s.add(20)
s.add(10)
s.add(true)
s.add("10")
s.add("10")
s.add(new String("hello"));
s.add(new String("hello"));
console.log(s);
//30,40,10,20,tue,"10",String,String

set集合属性和方法

size属性

返回该set集合中的元素的个数。

set.size();

<script>
    //### size属性    返回该set集合中的元素的个数。
    var arr = [2, 3, 4, 5];
    let s = new Set(arr);
    console.log(s.size); //4
</script>

add(value)

往set集合中添加一个元素，返回Set本身。

<script>
    //#### add(value)   往set集合中添加一个元素，返回Set本身。
    let s = new Set( [2, 3, 4, 5]);
    s.add(9);
    console.log(s); //{
    
    2, 3, 4, 5, 9}
    console.log(s.add(9));//{
    
    2, 3, 4, 5, 9}   从这里输出值可以看出返回值是set本身
    //-------------
    s.add(9).add(10);//因为返回值是本身,所以我们添加元素可以这样写
    console.log(s);//{
    
    2, 3, 4, 5, 9, 10}
</script>

delete(value)

删除指定的值，返回一个布尔值，表示删除是否成功。

var arr = ["wo", "shi", "wo", 5];
    let s = new Set(arr);
  console.log(delete(s.wo));//true
  console.log(s); 

has(value)

判断指定的值是否在set中存在，返回一个布尔值。

   let s = new Set([30, 40]);
    s.has(30);//判断有没有30
    console.log( s.has(30));//true

clear()

清除所有的元素。没有返回值

 let s = new Set([30, 40]);
    s.clear();
    console.log(s);//{
    
    }

set集合转为数组的方法

Array.from方法可以将Set集合转为数组。

const arr = Array.from(s);

rest参数 三个点

const arr2 = [...s];

 <script>
     let s = new Set([30,40]);
        s.add(10).add(20) 
        const arr = Array.from(s);
        console.log(arr);//[30, 40, 10, 20]

         const arr2 = [...s];
         console.log(arr2);//[30, 40, 10, 20]
</script> 

给数组去重(因为集合内元素是唯一的)

var arr = [10,20,20,30,50,30];//10,20,30,50
var set = new Set(arr);
arr = Array.from(set);
console.log(arr);

//封装成一个数组去重的方法
 var arr = [2, 3, 45, 2];
    function noDupli(array) {
    
    
        return Array.from(new Set(array));
    }
    console.log(noDupli(arr));//[2, 3, 45]

遍历操作

keys()

返回键名遍历器

values()

返回键的值的遍历器

entries()

返回键值对的遍历器

/这里是 for   of 遍历的知识
    var set = new Set([2, 3, 4, 5]);
    //下面是四种方法
    for (const item of set.keys()) {
    
    
        console.log(item);
    }
    for (const item of set.values()) {
    
    
        console.log(item);
    }
    for (const item of set.entries()) {
    
    
        console.log(item);
    }
    for (const item of set) {
    
    
        console.log(item);
    }

3.Map集合

是键值对的集合。与对象中的属性与属性值很类似，但是对象中的属性名只能是字符串。值–值的对应，字符串–值的对应。

创建Map

let map = new Map();

添加元素的方式

<script>
    //map添加元素的方式1
    let map = new Map();
    map.set("郑爽", "TMD烦死了");
    map.set("马老师", "好自为之");
    map.set("罗志祥", "今晚九点，多人运动");
    console.log(map);/*0: {"郑爽" => "TMD烦死了"}
                        1: {"马老师" => "好自为之"}
                         2: {"罗志祥" => "今晚九点，多人运动"}*/
    //map添加元素的方式2
    let map2 = new Map([
        ["name", "周润发"], ["age", "40"]
    ]);
    console.log(map2);  /*0: {"name" => "周润发"}
                        1: {"age" => "40"}*/                
</script>

唯一性

键的唯一，而不是值的唯一。

<script>
    //map集合中也是不能重复的       键的唯一，而不是值的唯一。
    let map = new Map();
    map.set("郑爽", "TMD烦死了");
    map.set("马老师", "好自为之");
    map.set("马老师", "年轻人不讲武德");
    // map.set("浑元形意太极拳掌门","好自为之");//这一条会被写入,因为虽然值相同,但键不同
    map.set("罗志祥", "今晚九点，多人运动");
    console.log(map);//{
    
    "马老师" => "好自为之"}这条没有显示 被下面的 键 马老师 覆盖了(原因:键名相同)
</script>

属性和方法

size

返回map中有多少个键值对。

<script>
    //size 返回map中有多少个键值对。
    let map = new Map();
    map.set("郑爽", "TMD烦死了");
    map.set("马老师", "好自为之");
    console.log(map.size);//2
    console.log(map);
</script>

set(key,value)

往map集合中添加一个key-value的键值对，返回map本身。如果key存在，原值会被覆盖。

<script>
    //set(key,value)。  往map集合中添加一个key-value的键值对，返回map本身。如果key存在，原值会被覆盖。
    let map = new Map();
    map.set("郑爽", "TMD烦死了");
    map.set("马老师", "好自为之");
    console.log(map);
</script>

delete(key)

通过键查找对应的键值对，将其删除，返回一个布尔值，表示删除是否成功。

<script>
    //#### delete(key)  通过键查找对应的键值对，将其删除，返回一个布尔值，表示删除是否成功。
    let map = new Map();
    map.set("郑爽", "TMD烦死了");
    map.set("马老师", "好自为之");
    console.log(map.delete ("马老师"));//true
    console.log(map);//此时输出就被删除了一个
</script>

has(key)

判断指定的键是否在map中存在，返回一个布尔值。

<script>
    //#### has(key)   判断指定的键是否在`map`中存在，返回一个布尔值。
    let map = new Map();
    map.set("郑爽", "TMD烦死了");
    map.set("马老师", "好自为之");
    console.log(map.has ("马老师"));//true
    console.log(map.has ("赵子龙"));//false
</script>

clear()

清除所有的元素。没有返回值

<script>
    //#### clear()  清除所有的元素。没有返回值
    let map = new Map();
    map.set("郑爽", "TMD烦死了");
    map.set("马老师", "好自为之");
    map.clear(); //清除了所有元素
    console.log(map); // {
    
    }
</script>

get(key)

读取key对应的键值，如果找不到，返回undefined

<script>
    //#### get(key)   读取key对应的键值，如果找不到，返回`undefined`
    let map = new Map();
    map.set("郑爽", "TMD烦死了");
    map.set("马老师", "好自为之");
    console.log(map.get ("马老师"));//好自为之
    console.log(map.get("赵子龙"));//undefind
</script> 

遍历操作for of

keys()

返回键名遍历器

values()

返回键的值的遍历器

entries()

返回键值对的遍历器

<script>
    //for ... of  遍历方法
    let map = new Map();
    map.set("郑爽", "TMD烦死了");
    map.set("马老师", "好自为之");
    for (const item of map.keys()) {
    
    
        console.log(item); //郑爽  马老师
    }
    for (const item of map.values()) {
    
    
        console.log(item); //TMD烦死了  好自为之
    }
    for (const item of map.entries()) {
    
    
        console.log(item); //["郑爽", "TMD烦死了"] ["马老师", "好自为之"]
    }
    for (const item of map) {
    
     //  这个方法默认了使用了  entries()  方法 
        console.log(item); //["郑爽", "TMD烦死了"] ["马老师", "好自为之"]
    }
</script>