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

最新推荐文章于 2024-02-05 08:56:57 发布
最新推荐文章于 2024-02-05 08:56:57 发布
阅读量223 收藏
点赞数
分类专栏： Web 文章标签： js javascript 面向对象编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/111461404
版权

目录

一、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>

 

运行结果：

 

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 的属性和方法

  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>

 

运行结果：

 

三、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>

 

运行结果：

 

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>

 

运行结果：

 

 

 

 

 

 

 

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
demo-iojs-es6:以 mocha 测试的形式展示 io.js Ecmascript 6 语言特性
06-03
io.js Ecmascript 6 语言特性 npm install npm test 您还可以运行单独的测试： npm run test-let npm run test-const npm run test-function-in-blocks npm run test-map npm run test-set npm run test-...
ES6新特性之Set和Map
Leon_Jinhai_Sun的博客
12-07 399
ES6提供了Set和Map的数据结构。 Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。和java中的Set集合非常相似。 <script> let set = new Set(); set.add(1); set.add(2); set.add(5); s...
ES6之路第九篇：Set和Map数据结构
weixin_30662011的博客
07-19 68
set 基本用法 ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。 1 const s = new Set(); 2 3 [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); 4 5 for (let i of s) { 6 c...
es6中Set与Map的简单总结
weixin_44823384的博客
03-11 238
Set 基本用法 ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。 集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进 行遍历 let arr = [1,2,3,4,5,4,3,2,1]; //1. 数组去重 let result = [...new Set(arr)]; //因为[...]， 所以
ES6 新特性 set map promise
binlety
08-07 612
# **数组中 ** #                find()  找出第一个符合条件的数组成员  没有  返回undefined             findIndex()找出第一个符合条件的数组成员的下标  没有返回-1  可以发现NaN  弥补indexof的不足              rest参数   创建数组      该变量将多余的参数放入数组中              ...
ES6新特性之Map和Set
红岸基地
08-15 608
今天写一下关于面试中反反复复被问到的一个知识点，map和set的数据结构，文章内容会很短，方便大家快速查看，废话不说，直接讲以上就是关于set和map的使用总结，总体来说不难，只是需要我们熟练的使用即可，因为是新特性所以开发的过程中使用的时候需要注意一些写法的兼容性。.........
ES6教学视频
11-09
.ECMAScript 6 Fundamentals基本介绍：数值扩展，函数扩展，字符串扩展，set和map数据结构，class基本语法等
深入浅出ES6 简体中文
06-22
其它的新特性也相当诱人，熟练掌握可以大幅度提升开发效率：迭代器Iterator、生成器Generators、不定参数Rest、默认参数Default、解构Destructuring、生成器Generator、代理Proxy，以及几种新类型：Set、Map、...
ES6核心语法
06-21
本课程4小时带你快速运用ES6的核心用法，其中包括: let和const命令、 箭头函数、解构、扩展的对象和数组、Symbol/Set/Map新数据类型、强大的迭代器和生成器、Promise和async解决 异步操作、class类 的使用以及ES6的...
ES6从入门到精通
06-19
本课程4小时带你快速运用ES6的核心用法，其中包括：let和const命令、箭头函数、解构、扩展的对象和数组、Symbol/Set/Map新数据类型、强大的迭代器和生成器、Promise和async解决异步操作、class类的使用以及ES6的模块...
es6新特性-Set和Map数据结构
kimihiro_41的博客
06-28 385
Set和Map数据结构 Set 本身是一个构造函数，用来生成 Set 数据结构。Set 结构不会添加重复的值。 Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。// 例一 const set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4]// 例二 const items = new Set([1, 2, 3, 4,
Day48/100（ES6新特性） Map&Set
xinghuowuzhao的博客
09-18 96
写在前面的话 新的特性，会在底层影响着我们的写代码的日常。 而学习新语法，就像学习新的武功招式一样~ 今儿不早了，写个简单的 （一）Map Map是类似Object的一种键值对集合，区别在于Map的键不仅限于是字符串，其他各种类型的值包括对象都可以成为Map的键 var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); m.forEach(function (value, key, map) { alert(value); }); ..
【学习笔记51】ES6的新增属性Set和Map
yizhiyang
11-28 740
ES6的新增属性Set和Map
ES 6 的Set集合
qq_40133235的博客
01-27 837
ES 6 之前只有一种数组的数据结构，现在增加了Set和Map两种集合 而Set集合是一种无重复元素的列表。 创建set集合 let 变量 = new Set()； 也可以通过构造函数创建集合： let 变量 = new Set([参数，参数，参数，…])； 三种常用的方法： Set.has（参数）；查照指定参数是否存在再该集合中 Set.delete(参数）；删除指定参数 Set.clear()；清楚所有集合参数 使用…将set集合转换成数组，也可以去掉重复的值 let 变量 = new Set([1,2
ES6的Set详解
最新发布
qq_44741577的博客
02-05 1470
这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。上面代码中，entries方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等。Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。
ES6新特性总结（3）Set集合、Map集合
橘猫吃不胖的博客
12-17 767
ES6新特性（3）Set集合、Map集合1 Set集合1.1 操作方法1.2 遍历方法1.3 WeakSet2 Map集合2.1 Map概述2.2 基本方法和属性2.3 遍历方法2.4 转为数组2.5 Map的遍历和过滤2.6 forEach()2.7 WeakMap 1 Set集合 Set集合：是一种数据结构，结构类似于数组，且没有重复的值。主要用于数组去重，字符串去重。 1.1 操作方法 方法 含义 add() 添加值，返回Set结构本身 delete() 删除值，返回一个boole
ES6 set 的用法
weixin_52688746的博客
03-24 4159
1. Set是什么？ Set 是 ES6 提供的新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成Set数据结构。 2. Set 使用情形 用于数组去重 let arr = [3, 5, 2, 2, 5, 5]; let setArr = new Set(arr) // 返回set数据结构 Set(3) {3, 5, 2} //方法一 es6的...解构 let unique1 = [...setArr ]; //去重转数
ES6的Set结构用法总结
gw1105430831的博客
06-09 2503
关于ES6的Set结构的总结
ES6-ES12新特性
07-20
以下是一些ES6到ES12的新特性的示例： ES6（2015年）： 1. 箭头函数：简化了函数的语法。 2. 模板字面量：使用反引号(`)来创建多行字符串和插入变量。 3. 解构赋值：从对象或数组中提取值并赋给变量。 4. let和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值