【ES6】03-Set + Map

本文介绍两种集合 set map 的操作和方法。

目录

1. Set

1.1 set基本使用

1.2 add

1.3 delete

1.4 has

1.5 size

1.6 set转换为数组

1.7 拓展运算符

1.8 for...of

1.9 forEach

1.10 set给数组去重

2. Map

2.1 创建map集合

2.2 set添加元素

2.3 delete删除元素

2.4 has

2.5 size

2.6 map转换为数组

2.7 拓展运算符...

2.8 for...of对map集合遍历

2.9 forEach遍历

2.10 清空map集合

---

1. Set

1.1 set基本使用

        // 1.set基本使用// 创建set集合let fruits = new Set(['apple','banana','orange']);console.log(fruits);  //Set(3)

---

1.2 add

        // 2.add添加fruits.add('mango');console.log(fruits);  //Set(4)

---

1.3 delete

        // 3.deletefruits.delete('banana');  // 指定删除元素console.log(fruits);

---

1.4 has

        // 4.has判断是否有这个元素console.log(fruits.has('apple'));  //trueconsole.log(fruits.has('banana'));  //false

---

1.5 size

        // 5.size表示Set集合的大小console.log(fruits.size);  //3

---

1.6 set转换为数组

        // 6.将set集合转化为数组let arr = Array.from(fruits);console.log(arr);  // 数组类型

---

1.7 拓展运算符

        // 7.拓展运算符...展开可迭代对象let web = 'baidu.com';  // 中文也能逐字展开// 将上面的内容变为数组let webArr = [...web];console.log(webArr);  // 每一个元素都进行了展开 并存入数组let webArr1 = [...fruits];  // 将set集合展开 每一个元素存入数组console.log(webArr1);   // ['apple', 'orange', 'mango']

---

1.8 for...of

        // 8.for...of循环遍历 set集合for(let item of fruits){console.log(item);  // 所有的元素打印}

---

1.9 forEach

        // 9.forEach循环// set集合名.forEach(参数) => {函数体}fruits.forEach((value) => {console.log(value);})// set使用forEach时无法用index打印索引，index打印出来还是他自己本身

---

1.10 set给数组去重

        // 10.利用set 给 数组 去重let arr1 = [1,1,2,3,3,5,6];  // 有重复数字let set1 = new Set(arr1);  // 将数组转换为set集合console.log(set1);  // 已经去重

---

2. Map

2.1 创建map集合

        // 1.创建map集合// ([ [],[],[] ])  根据数据类型考虑是否加引号let teacher = new Map([['name','zzz'],['gender','男'],['web','baidu.com']])console.log(teacher);// Map(3) {'name' => 'zzz', 'gender' => '男', 'web' => 'baidu.com'}

---

2.2 set添加元素

        // 2.set增加元素teacher.set('height',185);console.log(teacher);// Map(4) {'name' => 'zzz', 'gender' => '男', 'web' => 'baidu.com', 'height' => 185}// !!注意：在map中每个键都是唯一的，如果添加的键值对和某个已有的键重复了，则会替换原来的值

---

2.3 delete删除元素

        // 3.delete删除元素teacher.delete('gender');  // 只删除键即可console.log(teacher);// Map(3) {'name' => 'zzz', 'web' => 'baidu.com', 'height' => 185}

---

2.4 has

        // 4.has检测是否有对应的键值// 只检测键即可console.log(teacher.has('gender'));  //falseconsole.log(teacher.has('web'));  // true

---

2.5 size

        // 5.size获取map集合大小console.log(teacher.size);  // 3个键值对

---

2.6 map转换为数组

        // 6.将map集合转换为数组// 类似set：Array.from(集合名)let arr = Array.from(teacher);  console.log(arr);

---

2.7 拓展运算符...

        // 7.拓展运算符...将map集合转换为数组let arr1 = [...teacher];console.log(arr1);

---

2.8 for...of对map集合遍历

        // 8.for...of对map集合的遍历for(let value of teacher){console.log(value);// 遍历了三次 每次打印一个键值对}// 还可以利用解构的方式 从数组或对象中获取值并赋值给变量// [key,value] 是一种解构语法，将map数组中的键值对解构为 key和value 两个变量for(let [key,value] of teacher){console.log(key,value);}

---

2.9 forEach遍历

        // 9.forEach遍历// 箭头函数形式teacher.forEach((value,key) => {   // 键/索引在后，值在前console.log(key,value);  // 打印时 键在前 值在后});

---

2.10 清空map集合

        // 10.清空map集合teacher.clear();console.log(teacher);// 清空set集合也可以用这种方法

---

本文介绍两种集合 set map 的操作和方法。