【ES6+】007-ES6新特性：Set集合、Map集合、class类

﹏ヽ暗。殇╰゛Y 2023-10-05 16:13 24阅读 0赞

# **目录** #

一、Set集合

1、概述

2、基本使用

代码实现：

运行结果：

3、Set集合实践

代码实现：

运行结果：

二、Map集合

1、概述

2、Map 的属性和方法

3、简单使用

代码实现：

运行结果：

三、class类

1、概述

2、知识点

3、class初体验

代码实现：

运行结果：

4、class静态成员

代码实现：

运行结果：

5、ES5构造函数实现继承

代码实现：

运行结果：

6、ES6class类继承

代码实现：

运行结果：

7、子类对父类方法重写

代码实现：

运行结果：

8、class中的getter和setter设置

代码实现：

运行结果：

--------------------

# 一、Set集合 #

## 1、概述 ##

ES6 提供了新的数据结构 Set（集合）。**它类似于数组，但成员的值都是唯一的**，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：

1.  size 返回集合的元素个数；
2.  add 增加一个新元素，返回当前集合；
3.  delete 删除元素，返回 boolean 值；
4.  has 检测集合中是否包含某个元素，返回 boolean 值；
5.  clear 清空集合，返回 undefined；

## 2、基本使用 ##

### 代码实现： ###

<!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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

## 3、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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

# 二、Map集合 #

## 1、概述 ##

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键；

Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历；

## 2、Map 的属性和方法 ##

1.  size 返回 Map 的元素个数；
2.  set 增加一个新元素，返回当前 Map；
3.  get 返回键名对象的键值；
4.  has 检测 Map 中是否包含某个元素，返回 boolean 值；
5.  clear 清空集合，返回 undefined；

## 3、简单使用 ##

### 代码实现： ###

<!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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

# 三、class类 #

## 1、概述 ##

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已；

## 2、知识点 ##

1.  class 声明类；
2.  constructor 定义构造函数初始化；
3.  extends 继承父类；
4.  super 调用父级构造方法；
5.  static 定义静态方法和属性；
6.  父类方法可以重写；

## 3、class初体验 ##

### 代码实现： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>class类</title>
    	</head>
    	<body>
    		<script>
    			// 手机 ES5写法
    			// function Phone(brand,price){
    			// 	this.brand = brand;
    			// 	this.price = price;
    			// }
    			// // 添加方法
    			// Phone.prototype.call = function(){
    			// 	console.log("我可以打电话！");
    			// }
    			// // 实例化对象
    			// let HuaWei = new Phone("华为",5999);
    			// HuaWei.call();
    			// console.log(HuaWei);
    			
    			// ES6写法
    			class Phone{
    				// 构造方法，名字是固定的
    				constructor(brand,price) {
    				    this.brand = brand;
    				    this.price = price;
    				}
    				
    				// 打电话，方法必须使用该方式写
    				call(){
    					console.log("我可以打电话！");
    				}
    			}
    			let HuaWei = new Phone("华为",5999);
    			HuaWei.call();
    			console.log(HuaWei);
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

## 4、class静态成员 ##

### 代码实现： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>class静态成员</title>
    	</head>
    	<body>
    		<script>
    			// class静态成员
    			// ES5写法
    			// function Phone(){}
    			// Phone.name = "手机";
    			// Phone.change = function(){
    			// 	console.log("我可以改变世界！");
    			// }
    			// let nokia = new Phone();
    			// console.log(nokia.name); // undefined
    			// // nokia.change();
    			// // 报错：Uncaught TypeError: nokia.change is not a function
    			// Phone.prototype.color = "黑色";
    			// console.log(nokia.color); // 黑色
    			// console.log(Phone.name);
    			// Phone.change();
    			// 注意：实例对象和函数对象的属性是不相通的
    			
    			// ES6写法
    			class Phone{
    				// 静态属性
    				static name = "手机";
    				static change(){
    					console.log("我可以改变世界！");
    				}
    			}
    			let nokia = new Phone();
    			console.log(nokia.name);
    			console.log(Phone.name);
    			Phone.change();
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

## 5、ES5构造函数实现继承 ##

### 代码实现： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>ES5构造函数继承</title>
    	</head>
    	<body>
    		<script>
    			// ES5构造函数继承
    			// 手机
    			function Phone(brand,price){
    				this.brand = brand;
    				this.price = price;
    			}
    			Phone.prototype.call = function(){
    				console.log("我可以打电话！");
    			}
    			// 智能手机
    			function SmartPhone(brand,price,color,size){
    				Phone.call(this,brand,price);
    				this.color = color;
    				this.size = size;
    			}
    			
    			// 设置子级构造函数的原型
    			SmartPhone.prototype = new Phone;
    			SmartPhone.prototype.constructor = SmartPhone;
    			
    			// 声明子类的方法
    			SmartPhone.prototype.photo = function(){
    				console.log("我可以拍照！");
    			}
    			
    			SmartPhone.prototype.game = function(){
    				console.log("我可以玩游戏！");
    			}
    			
    			const chuizi = new SmartPhone("锤子",2499,"黑色","5.5inch");
    			console.log(chuizi);
    			chuizi.call();
    			chuizi.photo();
    			chuizi.game();
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

## 6、ES6class类继承 ##

### 代码实现： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>ES6class类继承</title>
    	</head>
    	<body>
    		<script>
    			// ES6class类继承
    			class Phone{
    				constructor(brand,price) {
    				    this.brand = brand;
    				    this.price = price;
    				}
    				call(){
    					console.log("我可以打电话！");
    				}
    			}
    			class SmartPhone extends Phone{
    				// 构造函数
    				constructor(brand,price,color,size) {
    				    super(brand,price); // 调用父类构造函数
    					this.color = color;
    					this.size = size;
    				}
    				
    				photo(){
    					console.log("我可以拍照！");
    				}
    				game(){
    					console.log("我可以玩游戏！");
    				}
    			}
    			const chuizi = new SmartPhone("小米",1999,"黑色","5.15inch");
    			console.log(chuizi);
    			chuizi.call();
    			chuizi.photo();
    			chuizi.game();
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6][]

## 7、子类对父类方法重写 ##

### 代码实现： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>ES6class类继承</title>
    	</head>
    	<body>
    		<script>
    			// ES6class类继承
    			class Phone{
    				constructor(brand,price) {
    				    this.brand = brand;
    				    this.price = price;
    				}
    				call(){
    					console.log("我可以打电话！");
    				}
    			}
    			class SmartPhone extends Phone{
    				// 构造函数
    				constructor(brand,price,color,size) {
    				    super(brand,price); // 调用父类构造函数
    					this.color = color;
    					this.size = size;
    				}
    				
    				// 子类对父类方法重写
    				// 直接写，直接覆盖
    				// 注意：子类无法调用父类同名方法
    				call(){
    					console.log("我可以进行视频通话！");
    				}
    				
    				photo(){
    					console.log("我可以拍照！");
    				}
    				game(){
    					console.log("我可以玩游戏！");
    				}
    			}
    			const chuizi = new SmartPhone("小米",1999,"黑色","5.15inch");
    			console.log(chuizi);
    			chuizi.call();
    			chuizi.photo();
    			chuizi.game();
    			
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7][]

## 8、class中的getter和setter设置 ##

### 代码实现： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>class中的getter和setter设置</title>
    	</head>
    	<body>
    		<script>
    			// class中的getter和setter设置
    			class Phone{
    				
    				get price(){
    					console.log("价格属性被读取了！");
    					// 返回值
    					return 123;
    				}
    				
    				set price(value){
    					console.log("价格属性被修改了！");
    				}
    			}
    			
    			// 实例化对象
    			let s = new Phone();
    			console.log(s.price); // 返回值
    			s.price = 2999;
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201220194020558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201220194114750.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201220194328335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201220194521946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201220194611572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201220194653684.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201220194750624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201220194835182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201220194919753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70