欢迎您访问电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
您现在的位置是：首页 > 编程 > 

【ES6+】007

2025-07-27 02:14:29
【ES6+】007 一、Set集合1、概述ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法： size 返回集合的元素个数； add 增加一个新元素，返回当前集合； delete 删除元素，返回 boolean 值； has 检测集合中是否包含某个

【ES6+】007

一、Set集合

1、概述

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

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

2、基本使用

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Set集合</title>
	</head>
	<body>
		<script>
			// Set集合
			let s = new Set();
			cole.log(s,typeof s);
			let s1 = new Set(["大哥","二哥","三哥","四哥","三哥"]);
			cole.log(s1); // 自动去重
			// 1. size 返回集合的元素个数；
			cole.log(s1.size);
			// 2. add 增加一个新元素，返回当前集合；
			s1.add("大");
			cole.log(s1);
			// . delete 删除元素，返回 boolean 值；
			let result = s1.delete("三哥");
			cole.log(result);
			cole.log(s1);
			// 4. has 检测集合中是否包含某个元素，返回 boolean 值；
			let r1 = s1.has("二");
			cole.log(r1);
			// 5. clear 清空集合，返回 undefined；
			();
			cole.log(s1);
		</script>
	</body>
</html>
运行结果：

、Set集合实践

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Set集合实践</title>
	</head>
	<body>
		<script>
			// Set集合实践
			let arr = [1,2,,4,5,4,,2,1];
			// 数组去重
			let s1 = new Set(arr);
			cole.log(s1);
			// 交集
			let arr2 = [,4,5,6,5,4,];
			// 看来我需要学学数组的一些方法
			let result = [...new Set(arr)].filter(item=>new Set(arr2).has(item));
			cole.log(result);
			// 并集
			// ... 为扩展运算符，将数组转化为逗号分隔的序列
			let union = [...new Set([...arr,...arr2])];
			cole.log(union);
			// 差集：比如集合1和集合2求差集，就是1里面有的，2里面没的
			let result1 = [...new Set(arr)].filter(item=>!(new Set(arr2).has(item)));
			cole.log(result1);
		</script>
	</body>
</html>
运行结果：
二、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；

、简单使用

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!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 的元素个数；
			cole.log(m2.size);
			// 2. set 增加一个新元素，返回当前 Map；
			m.set("皇帝","大哥");
			m.set("丞相","二哥");
			cole.log(m);
			// . get 返回键名对象的键值；
			cole.log(m.get("皇帝"));
			// 4. has 检测 Map 中是否包含某个元素，返回 boolean 值；
			cole.log(m.has("皇帝"));
			// 5. clear 清空集合，返回 undefined；
			();
			cole.log(m);
		</script>
	</body>
</html>
运行结果：
三、class类

1、概述

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

2、知识点

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

、class初体验

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!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. = function(){
			// 	cole.log("我可以打电话！");
			// }
			// // 实例化对象
			// let HuaWei = new Phone("华为",5999);
			// ();
			// cole.log(HuaWei);
			
			// ES6写法
			class Phone{
				// 构造方法，名字是固定的
				ctructor(brand,price) {
				    this.brand = brand;
				    this.price = price;
				}
				
				// 打电话，方法必须使用该方式写
				call(){
					cole.log("我可以打电话！");
				}
			}
			let HuaWei = new Phone("华为",5999);
			();
			cole.log(HuaWei);
		</script>
	</body>
</html>
运行结果：

4、class静态成员

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

5、ES5构造函数实现继承

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!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. = function(){
				cole.log("我可以打电话！");
			}
			// 智能手机
			function SmartPhone(brand,price,color,size){
				(this,brand,price);
				 = color;
				this.size = size;
			}
			
			// 设置子级构造函数的原型
			SmartPhone.prototype = new Phone;
			SmartPhone. = SmartPhone;
			
			// 声明子类的方法
			SmartPhone.prototype.photo = function(){
				cole.log("我可以拍照！");
			}
			
			SmartPhone.prototype.game = function(){
				cole.log("我可以玩游戏！");
			}
			
			ct chuizi = new SmartPhone("锤子",2499,"黑","5.5inch");
			cole.log(chuizi);
			();
			chuizi.photo();
			chuizi.game();
		</script>
	</body>
</html>
运行结果：

6、ES6class类继承

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ES6class类继承</title>
	</head>
	<body>
		<script>
			// ES6class类继承
			class Phone{
				ctructor(brand,price) {
				    this.brand = brand;
				    this.price = price;
				}
				call(){
					cole.log("我可以打电话！");
				}
			}
			class SmartPhone extends Phone{
				// 构造函数
				ctructor(brand,price,color,size) {
				    super(brand,price); // 调用父类构造函数
					 = color;
					this.size = size;
				}
				
				photo(){
					cole.log("我可以拍照！");
				}
				game(){
					cole.log("我可以玩游戏！");
				}
			}
			ct chuizi = new SmartPhone("小米",1999,"黑","5.15inch");
			cole.log(chuizi);
			();
			chuizi.photo();
			chuizi.game();
		</script>
	</body>
</html>
运行结果：

7、子类对父类方法重写

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

8、class中的getter和setter设置

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class中的getter和setter设置</title>
	</head>
	<body>
		<script>
			// class中的getter和setter设置
			class Phone{
				
				get price(){
					cole.log("价格属性被读取了！");
					// 返回值
					return 12;
				}
				
				set price(value){
					cole.log("价格属性被修改了！");
				}
			}
			
			// 实例化对象
			let s = new Phone();
			cole.log(s.price); // 返回值
			s.price = 2999;
		</script>
	</body>
</html>
运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除集合classmapset对象

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1197561.html

相关标签：无
上传时间： 2025-07-23 09:22:28

上一篇：【ES6+】008

下一篇：Word中单页横向排版设置指南

推荐阅读

留言与评论（共有 9 条评论）
注册新账号 登录
本站网友 减肥减肥
13分钟前 发表
"5.5inch"); cole.log(chuizi); (); chuizi.photo(); chuizi.game(); </script> </body> </html>运行结果：6
本站网友 汽车行业分析报告
20分钟前 发表
typeof s); let s1 = new Set(["大哥"
本站网友 男装店面装修效果图
26分钟前 发表
2
本站网友 婴儿过敏性鼻炎
8分钟前 发表
返回 boolean 值； let result = s1.delete("三哥"); cole.log(result); cole.log(s1); // 4. has 检测集合中是否包含某个元素
本站网友 天津合租网
19分钟前 发表
4
本站网友 昆明团购
27分钟前 发表
class类1
本站网友 国产什么奶粉好
8分钟前 发表
"三哥"]); cole.log(s1); // 自动去重 // 1. size 返回集合的元素个数； cole.log(s1.size); // 2. add 增加一个新元素
本站网友 最新美元对人民币汇率
21分钟前 发表
直接覆盖 // 注意：子类无法调用父类同名方法 call(){ cole.log("我可以进行视频通话！"); } photo(){ cole.log("我可以拍照！"); } game(){ cole.log("我可以玩游戏！"); } } ct chuizi = new SmartPhone("小米"