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

訾博ZiBo

发布于 2025-01-06 17:01:41

18200

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、Set集合

1、概述

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

size 返回集合的元素个数；
add 增加一个新元素，返回当前集合；
delete 删除元素，返回 boolean 值；
has 检测集合中是否包含某个元素，返回 boolean 值；
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>

运行结果：

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>

运行结果：

二、Map集合

1、概述

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

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

2、Map 的属性和方法

size 返回 Map 的元素个数；
set 增加一个新元素，返回当前 Map；
get 返回键名对象的键值；
has 检测 Map 中是否包含某个元素，返回 boolean 值；
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>

运行结果：

三、class类

1、概述

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

2、知识点

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

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>

运行结果：

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>

运行结果：

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>

运行结果：

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>

运行结果：

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>

运行结果：

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>