标签：ES6 Set console log brand 第三天 let new
ES6第三天
一.set
ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯
一的，集合实现了 iterator 接口，所以可以使用扩展运算符和for…of…进
行遍历.
集合的属性和方法：
- size 返回集合的元素个数
- add 增加一个新元素，返回当前集合
- delete 删除元素，返回 boolean 值
- has 检测集合中是否包含某个元素，返回 boolean 值
- clear 清空集合，返回 undefined
//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());
二.Map
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”
的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
Map 也实现了iterator 接口，所以可以使用扩展运算符和for…of…进行遍历。
Map 的属性和方法：
- size 返回 Map 的元素个数
- set 增加一个新元素，返回当前 Map
- get 返回键名对象的键值
- has 检测 Map 中是否包含某个元素，返回 boolean 值
- clear 清空集合，返回 undefined
//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
['name','重庆大学'],
['slogon','勤学业 爱国家']
]);
//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());
三.class
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对
象的模板。通过 class 关键字，可以定义类。
基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
- class 声明类
- constructor 定义构造函数初始化
class phone {
constructor(brand, price) {
this.brand = brand;
this.price = price;
}
call() {
console.log('我可以打电话');
}
}
let xiaomi = new phone('小米', 1999);
console.log(xiaomi);
- extends 继承父类
- super 调用父级构造方法
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('拍照');
}
}
const xiaomi = new smartphone('小米', 1999, 'blue', '5inch');
console.log(xiaomi)
- static 定义静态方法和属性
- 父类方法可以重写
四.模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
4.1模块化的好处
- 防止命名冲突
- 代码复用
- 高维护性
4.2模块化规范产品
ES6 之前的模块化规范有：
- CommonJS => NodeJS、Browserify
- AMD => requireJS
- CMD => seaJS
4.3模块化语法
模块功能主要由两个命令构成：export 和 import。
⚫ export 命令用于规定模块的对外接口
⚫ import 命令用于输入其他模块提供的功能
五.案例
5.1set实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr1 = [1, 2, 2, 3, 4, 5, 5, 6];
let arr2 = [2, 4, 6, 8];
//1.数组去重
let result1 = [...new Set(arr1)];
console.log(result1);
//2.交集
let result2 = [...new Set(arr1)].filter(iteam => new Set(arr2).has(iteam));
console.log(result2);
// 3.并集
let result3 = [...new Set([...arr1, ...arr2])];
console.log(result3);
//4.差集
let result4 = [...new Set(arr1)].filter(item => !(new Set(arr2).has(item)))
console.log(result4);
</script>
</body>
</html>
标签：ES6,Set,console,log,brand,第三天,let,new 来源： https://blog.csdn.net/I_love_bc/article/details/117091456
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。