Set概述： ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：
1. size 返回集合的元素个数；
2. add 增加一个新元素，返回当前集合；
3. delete 删除元素，返回 boolean 值；
4. has 检测集合中是否包含某个元素，返回 boolean 值；
5. clear 清空集合，返回 undefined；?
set基本语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set</title>
</head>
<body>
<script>
// Set集合
let s = new Set();
console.log(s,typeof s);
let s1 = new Set(["大","二","三","三"]);
console.log(s1); // 自动去重
// 1. size 返回集合的元素个数；
console.log(s1.size);
// 2. add 增加一个新元素，返回当前集合；
s1.add("大");
console.log(s1);
// 3. delete 删除元素，返回 boolean 值；
let result = s1.delete("三");
console.log(result);
console.log(s1);
// 4. has 检测集合中是否包含某个元素，返回 boolean 值；
let r1 = s1.has("四");
console.log(r1);
// 5. clear 清空集合，返回 undefined；
s1.clear();
console.log(s1);
</script>
</body>
</html>
Set集合实践：去重、交集、并集、差集
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set集合实践</title>
</head>
<body>
<script>
// Set集合实践
let arr = [1,2,3,4,5,4,3,2,1];
// 数组去重
let s1 = new Set(arr);
console.log(s1);
// 交集
let arr2 = [3,4,5,6,5,4,3];
// 看来我需要学学数组的一些方法
let result = [...new Set(arr)].filter(item=>new
Set(arr2).has(item));
console.log(result);
// 并集
// ... 为扩展运算符，将数组转化为逗号分隔的序列
let union = [...new Set([...arr,...arr2])];
console.log(union);
// 差集：比如集合1和集合2求差集，就是1里面有的，2里面没的
let result1 = [...new Set(arr)].filter(item=>!(new
Set(arr2).has(item)));
console.log(result1);
</script>
</body>
</html>
Map概述： ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类 型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和 『for…of…』进行遍历；
Map 的属性和方法：
1. size 返回 Map 的元素个数；
2. set 增加一个新元素，返回当前 Map；
3. get 返回键名对象的键值；
4. has 检测 Map 中是否包含某个元素，返回 boolean 值；
5. clear 清空集合，返回 undefined；?
基本语法实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map集合</title>
</head>
<body>
<script>
// Map集合
// 创建一个空 map
let m = new Map();
// 创建一个非空 map
let m2 = new Map([
['name','白骨精'],
['slogon','长生不老']
]);
// 1. size 返回 Map 的元素个数；
console.log(m2.size);
// 2. set 增加一个新元素，返回当前 Map；
m.set("张三","大哥");
m.set("李四","二哥");
console.log(m);
// 3. get 返回键名对象的键值；
console.log(m.get("张三"));
// 4. has 检测 Map 中是否包含某个元素，返回 boolean 值；
console.log(m.has("张三"));
// 5. clear 清空集合，返回 undefined；
m.clear();
console.log(m);
</script>
</body>
</html>
|