文章目录
2.13. Set
ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：
- size 返回集合的元素个数
- add 增加一个新元素，返回当前集合
- delete 删除元素，返回 boolean 值
- has 检测集合中是否包含某个元素，返回 boolean 值
- clear 清空集合，返回 undefined
set本质上也是个对象，有一些属性和方法
eg. Set.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>集合</title>
</head>
<body>
<script>
//声明一个 set
let s = new Set();
// 除了创建一个空集合还可以传入一个初始参数，接收一个可迭代数据，数组
let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
//元素个数（数组length，这里是size）
// console.log(s2.size);
//添加新的元素
// s2.add('喜事儿');
//删除元素
// s2.delete('坏事儿');
//检测has(存在返回true不存在返回false)
// console.log(s2.has('糟心事'));
//清空集合
// s2.clear();
// console.log(s2);
for(let v of s2){
console.log(v);
}
</script>
</body>
</html>
eg. Set集合实践
1 数组去重
let arr = [1,2,3,4,5,4,3,2,1];
// 数组去重
// 因为set集合具有唯一性，它会自重复的值去除
// 数组构建成集合new Set(arr),把它变成数组使用拓展运算符...
let result = [...new Set(arr)];
console.log(result);
2 交集
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6]
// 首先数组去重,使用filter方法（返个满足条件的新数组）。判断元素在不在ar里面，在就是交集
let result = [...new Set(arr)].filt(item => {
let s2 = new Set(arr2); // 4 5 6
// 检测集合里面有没有这个元素
if(s2.has(item)){
return true;
}else{
return false;
}
});
console.log(result)
// 代码简化一下
// let result = [...new Set(arr)filter(item => new Set(arr2).h(item));
// console.log(result);
3 并集
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6]
// [...arr,...arr2]合并 new Set去再用[...]转化成数组
let union = [...new Set([...arr,.arr2])];
console.log(union);
4 差集
差集和并集相反，并集取反即可
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
// arr有 arr2里面没有
let diff = [...new Set(arr)].filter
(item => !(new Set(arr2).has(item)));
console.log(diff);
2.14. Map
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法：
- size 返回 Map 的元素个数
- set 增加一个新元素，返回当前 Map
- get 返回键名对象的键值
- has 检测 Map 中是否包含某个元素，返回 boolean 值
- clear 清空集合，返回 undefined
eg. Map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
</head>
<body>
<script>
//声明 Map
let m = new Map();
//添加元素
m.set('name','尚硅谷');
m.set('change', function(){
console.log("我们可以改变你!!");
});
let key = {
school : 'ATGUIGU'
};
m.set(key, ['北京','上海','深圳']);
//size
// console.log(m.size);
//删除
// m.delete('name');
//获取
// console.log(m.get('change'));
// console.log(m.get(key));
//清空
// m.clear();
//遍历
for(let v of m){
console.log(v);
}
// console.log(m);
</script>
</body>
</html>
Map 其实就是升级版的对象，原来的key是能是字符串，现在可以把对象作为键去创造元素
2.15. class 类
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对
象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是
一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象
原型的写法更加清晰、更像面向对象编程的语法而已。
知识点：
- class 声明类
- constructor 定义构造函数初始化
- extends 继承父类
- super 调用父级构造方法
- static 定义静态方法和属性
- 父类方法可以重写
2.15.1 实例化对象
es5 构造函数实例化对象
// 手机
function Phone(brand,price) {
this.brand = brand;
this.price = price;
}
// 添加方法 call
Phone.prototype.call = function() {
console.log("我可以打电话！！");
// 实例化对象
let Huawei = new Phone('华为', 5999);
// 调用方法
Huawei.call();
console.log(Huawei);
}
es6 class语法 实例化对象
// es6 class语法 实例化对象
class Phone {
// 构造方法 constructor 名字固定，特定方法
// new+类名 就自动执行实例对象上的 constructor方法
constructor(brand,price){
this.brand = brand;
this.price = price;
}
// 添加方法 方法必须使用该语法（方法名()） 不能使用 es5 的对象完整形式
call(){
console.log("我可以打电话！！");
}
}
let onePlus = new Phone("1+", 1999);
console.log(onePlus);
2.15.2 class静态成员
// 首先用es5举例
function Phone() {
}
Phone.name = '手机';
Phone.change = function(){
console.log("我可以改变世界");
}
Phone.prototype.size = '5.5inch';
let nokia = new Phone();
console.log(nokia.name);
// nokia.change();
console.log(nokia.size);
实例对象nokia和函数对象Phone是不相通的,Phone.name对于name这样的属性我们把它成为静态成员
class Phone {
// 静态属性 声明关键字是static
// 对于static 标注的属性name和方法
change 它属于类Phone 不属于实例对象
static name = '手机';
static change() {
console.log("我可以改变世界");
}
}
let nokia = new Phone();
console.log(nokia.name);
console.log(Phone.name);
2.15.3 类继承
1 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值 然后执行
// 这个this 指向SmartPhone里面的this SmartPhone的实例对象
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.playGame = function() {
console.log("我可以玩游戏");
}
const chuizi = new SmartPhone('锤子', 2499,'黑色','55inch');
console.log(chuizi);
es5构造函数 和 es6类继承 结果是一样的
2 ES6 类的继承
// 父类 Phone
class Phone{
// 父类构造方法
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
// 父类的成员属性
call() {
console.log("我可以打电话");
}
}
// 声明子类 SmartPhone
// 要求：继承父类里面的属性和方法
// 使用关键字 extends
class SmartPhone extends Phone {
// 构造方法 ()里面包含的子类里面的实例化时的初始化参数
constructor(brand,price,color,size) {
// 调父类的构造方法来初始化 super就是父类constructor方法
super(brand,price); // 同 Phone.call(this,brand,price);
// 把子类里的属性做初始化
this.color = color;
this.size = size;
}
// 添加子类里面一些独有的方法
photo() {
console.log("拍照");
}
playGame() {
console.log("玩游戏");
}
}
// 实例化
const xiaomi = new SmartPhone('小米', 799, '黑色', '4.7inch');
console.log(xiaomi);
// 调用这些方法
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();
2.15.4 子类对父类方法的重写
子类声明一个跟父类同名的方法
根据上面的代码做了一个小的修改
// 父类 Phone
class Phone{
// 父类构造方法
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
// 父类的成员属性
call() {
console.log("我可以打电话");
}
}
// 声明子类 SmartPhone
// 要求：继承父类里面的属性和方法
// 使用关键字 extends
class SmartPhone extends Phone {
// 构造方法 ()里面包含的子类里面的实例化时的初始化参数
constructor(brand,price,color,size) {
// 调父类的构造方法来初始化 super就是父类constructor方法
super(brand,price); // 同 Phone.call(this,brand,price);
// 把子类里的属性做初始化
this.color = color;
this.size = size;
}
// 添加子类里面一些独有的方法
photo() {
console.log("拍照");
}
playGame() {
console.log("玩游戏");
}
call() {
console.log("我可以进行视频通话");
}
}
// 实例化
const xiaomi = new SmartPhone('小米', 799, '黑色', '4.7inch');
// console.log(xiaomi);
// 调用这些方法
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();
js class语法中子类是不能直接去调用父类同名方法 用super也不可以 只能重写
2.15.5 class中的getter和setter设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get 和 set</title>
</head>
<body>
<script>
// get 和 set
// es5 对对象属性进行方法的绑定,比如添加get 对某一个属性进行获得执行get函数
// class 里面也有使用
class Phone{
get price(){
console.log("价格属性被读取了");
return 'iloveyou';
}
set price(newVal){
console.log('价格属性被修改了');
}
}
//实例化对象
let s = new Phone();
// console.log(s.price);
s.price = 'free';
</script>
</body>
</html>
