• ES6（ECMASript 6 新特性---Set，Map，class类）

    文章目录

    2.13. Set

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

    1. size 返回集合的元素个数
    2. add 增加一个新元素，返回当前集合
    3. delete 删除元素，返回 boolean 值
    4. has 检测集合中是否包含某个元素，返回 boolean 值
    5. 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    2.14. Map

    ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法：

    1. size 返回 Map 的元素个数
    2. set 增加一个新元素，返回当前 Map
    3. get 返回键名对象的键值
    4. has 检测 Map 中是否包含某个元素，返回 boolean 值
    5. 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>Maptitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    Map 其实就是升级版的对象，原来的key是能是字符串，现在可以把对象作为键去创造元素

    2.15. class 类

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

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

    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);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    实例对象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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    在这里插入图片描述

    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();
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    在这里插入图片描述

    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();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    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 和 settitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

  • 相关阅读:
    WordPress子主题怎么保留修改的代码来避免升级覆盖？
    安道亮相深圳国际全触与显示展，展示最新商显研发成果！
    python学习记录
    JVM监控工具jstat使用介绍
    24、四大函数式接口（有函数型接口和断定型接口（都是函数式接口））
    【花雕动手做】有趣好玩的音乐可视化系列小项目（15）--横排LED方管灯
    Flutter高仿微信-第44篇-群聊
    SAR ADC教程系列5——FFT频谱泄露以及相干采样
    Windows11下载安装vscode并编写第一个页面
    Ubuntu - 查看系统信息
  • 原文地址：https://blog.csdn.net/weixin_51249285/article/details/126594059