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>