ES6总结——Set、Map、class

于 2022-07-15 14:19:47 发布
阅读量237 收藏
点赞数
分类专栏： es6 文章标签： es6 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47155623/article/details/125797535
版权

一、Set

ES6提供了新的数据结构——Set（集合）。它类似于数组，但成员的值都是唯一的，Set实现了iterator（迭代器）接口，所以可以使用【扩展运算符】和【for  of】进行遍历。

初识Set

      //声明一个Set
      let s = new Set();

      console.log(s, typeof s);  // Set(0) {size: 0}    'object'

除了创建一个新的集合之外，还可以在里面传入一个初始参数（可接收可迭代数据，一般是传入一个数组）

      let s2 = new Set([
        "大事儿",
        "小事儿",
        "好事儿",
        "坏事儿",
        "小事儿",
        "大事儿",
      ]);
      console.log(s2);  Set(4) {'大事儿', '小事儿', '好事儿', '坏事儿'}

      可以自动实现数组去重

Set集合的属性和方法有以下这些

1）size  返回集合的元素个数

      let s2 = new Set([
        "大事儿",
        "小事儿",
        "好事儿",
        "坏事儿",
        "小事儿",
        "大事儿",
      ]);
      console.log(s2.size);  // 4

2）add  增加一个新元素，返回当前集合

      let s2 = new Set([
        "大事儿",
        "小事儿",
        "好事儿",
        "坏事儿",
        "小事儿",
        "大事儿",
      ]);
      s2.add("喜事儿");
      console.log(s2);   //Set(5) {'大事儿', '小事儿', '好事儿', '坏事儿', '喜事儿'}

3）delete  删除元素，返回boolean值

      let s2 = new Set([
        "大事儿",
        "小事儿",
        "好事儿",
        "坏事儿",
        "小事儿",
        "大事儿",
      ]);
      s2.delete("坏事儿");
      console.log(s2);  //Set(3) {'大事儿', '小事儿', '好事儿'}

4）has  检测集合中是否包含某个元素，返回boolean值

      let s2 = new Set([
        "大事儿",
        "小事儿",
        "好事儿",
        "坏事儿",
        "小事儿",
        "大事儿",
      ]);
      let aaa = s2.has("坏事儿");
      console.log(aaa);  //true

5) clear 清空集合

      let s2 = new Set([
        "大事儿",
        "小事儿",
        "好事儿",
        "坏事儿",
        "小事儿",
        "大事儿",
      ]);
      s2.clear();
      console.log(s2);   //Set(0) {size: 0}

Set集合实践

1）数组去重

      let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];

      let result = [...new Set(arr)];  //new Set(arr) 是一个集合，不是数组，所以需要扩展运算符展开

      console.log(result);   //[1, 2, 3, 4, 5]

2）交集

      let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];

      let arr2 = [4, 5, 6, 5, 6];
      let result = [...new Set(arr)].filter((item) => {
        let s2 = new Set(arr2);
        if (s2.has(item)) {
          return true;
        } else {
          return false;
        }
      });
      console.log(result);   //  [4, 5]

3）并集

      let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];

      let arr2 = [4, 5, 6, 5, 6];
      let union = [...new Set([...arr, ...arr2])];
      console.log(union);  //[1, 2, 3, 4, 5, 6]

4）差集

      let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];

      let arr2 = [4, 5, 6, 5, 6];

      let diff = [...new Set(arr)].filter((item) => !new Set(arr2).has(item));

      console.log(diff);   // [1, 2, 3]

 二、Map

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

初识Map

      //声明Map
      let m = new Map();

      //添加元素
      m.set("name", "尚硅谷");
      m.set("change", function () {
        console.log("学习前端");
      });
      console.log(m);

      //声明Map
      let m = new Map();

      let key = {
        school: "ATGUIGU",
      };

      m.set(key, ["北京", "上海", "深圳"]);

      console.log(m);

  

Map的属性和方法：

1）size  返回Map的元素个数

2）set  增加一个新元素，返回当前Map

3)  get  返回键名对象的值

4）has  检测Map中是否包含某个元素，返回boolean值

5）clear  清空集合，返回undefined

三、class

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

知识点：

1）class声明类

2）constructor 定义构造函数初始化

3）extends 继承父类

4）super调用父级构造方法

5）static定义静态方法和属性

6）父类方法可以重写

class初步体验

      //用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);  // Phone {brand: '华为', price: 5999}
      //用es6  class来实现
      class Phone {
        //构造方法  名字不能修改  当我们使用 new+类名的时候，就会自动执行构造方法
        constructor(brand, price) {
          this.brand = brand;
          this.price = price;
        }
        //添加方法  方法必须这样写 方法名+（）+{}
        call() {
          console.log("我可以打电话");
        }
      }

      let onePlus = new Phone("1+", 1999);
      console.log(onePlus);        //Phone {brand: '1+', price: 1999}

 class静态成员static

      //构造函数对象与实例对象的属性是不通的，实例对象的属性和构造函数原型对象是通的
      function Phone() {}
      Phone.name = "手机";
      Phone.change = function () {
        console.log("我可以改变世界");
      };
      Phone.prototype.size = "5.5inch";

      let nokia = new Phone();
      // console.log(nokia.name); // undefined
      // nokia.change();   // 报错：nokia.change is not a function
      console.log(nokia.size);  //5.5inch

实例对象和函数对象的属性是不相通的，函数对象的属性是属于函数对象的。对于这样的属性，我们称之为静态成员。对面向对象而言，这个属性是属于类的，而不属于实例对象。 

      class Phone {
        //静态属性
        static name = "手机";
        static change() {
          console.log("我可以改变世界");
        }
      }
      let nokia = new Phone();

      console.log(nokia.name);  //undefined

      console.log(Phone.name);  //手机

对于static标注的属性和方法，它属于类，不属于实例对象 

对象继承

es5是如何利用构造函数实现继承的

      //手机
      function Phone(brand, price) {
        this.brand = brand;
        this.price = price;
      }

      Phone.prototype.call = function () {
        console.log("我可以打电话");
      };
      //子类 智能手机
      function SmartPhone(brand, price, color, size) {
        //用call来实现继承，用this可以继承Phone中的所有方法和属性
        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, "黑色", "5.5inch");
      console.log(chuizi);    //SmartPhone {brand: '锤子', price: 2499, color: '黑色', size: '5.5inch'}

class实现对象继承

      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); //相当于 Phone.call(this,brand,price)
          this.color = color;
          this.size = size;
        }
        photo() {
          console.log("拍照");
        }
        playGame() {
          console.log("玩游戏");
        }
      }

      const xiaomi = new SmartPhone("小米", 588, "白色", "5.6inch");

      console.log(xiaomi);   //SmartPhone {brand: '小米', price: 588, color: '白色', size: '5.6inch'}

父类方法的重写

      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); //相当于 Phone.call(this,brand,price)
          this.color = color;
          this.size = size;
        }
        photo() {
          console.log("拍照");
        }
        playGame() {
          console.log("玩游戏");
        }
        call() {
          console.log("我可以视频通话");
        }
      }

      const xiaomi = new SmartPhone("小米", 588, "白色", "5.6inch");
      console.log(xiaomi);

      xiaomi.call();  //我可以视频通话  *在class语法中子类不可以直接调用父类的同名方法
   
      xiaomi.photo();  //拍照

      xiaomi.playGame();  //玩游戏

class中getter和setter设置

      class Phone {
        get price() {
          console.log("价格属性被读取了");
          return 123;
        }
        set price(newVal) {
          console.log("价格属性被修改了");
        }
      }

      //实例化对象
      let s = new Phone();

      console.log(s.price);  //价格属性被读取了  123

      s.price = 456;   //价格属性被修改了

角落里的老鼠是谁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es6 set（集合）、Map、class（类）（es6学习笔记05）
sandy_star
02-02 435
一、集合介绍与API 1.1 Set Set（集合）是es6提供的新的数据结构。类似于数组，但成员的值都是唯一的，集合实现了Iterator接口，所以可以使用扩展运算符和for...of...进行遍历。 结合的属性和方法： size：返回集合的元素个数 add：增加一个新元素，返回当前集合 delete：删除元素，返回Boolean值 has：检测集合中是否包含某个元素，返回Boolean值 clear：清空集合里所有的元素 //声明一个集合 let h = new Set();
石川es6总结复习
08-28
在石川的ES6总结复习中，我们可以期待深入理解以下几个核心知识点：** 1. **箭头函数**： 箭头函数是ES6中的一种简洁的函数定义方式，其语法更紧凑，没有自己的`this`值，而是继承自父级作用域。箭头函数可以用于...
聊聊Es6中的Set
于鹏的博客
03-17 946
基本用法 Set是Es6中的一种新的数据结构。它类似于数组，但是它的成员值都是唯一的。 我们可以用构造函数Set生成Set数据结构。 const s = new Set(); [2,3,5,4,5,2,3].forEach(item=>s.add(item)); for(let i of s){ console.log(i);// 2,3...
ES6 基本语法2（class、Set和Map数据结构）
小葵坤_易安的博客
03-20 429
五、class的基本语法 1.类 （1）ES6通过class关键字，可定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 说明： 定义了一个“类”，可以看到里...
es6中 使用class里面的set和get 用法
young_sam的博客
06-15 4762
在一些项目中，如果一个字段，后端只返回0或1的时候，但是你业务逻辑中要将0和1对应转换成true或者false的时候，如果直接转的话，保存的时候转后端又要写一次，非常麻烦。 export class person{ public active: number; // 用户状态是不是激活 1是激活,0是没有 public constructor (obj?: object) { Object.assign(this, obj) } public get activeToBoolea
es6中set用法
whilewhite的博客
09-29 4309
//定义从var变为let 不可重复定义 let a=[1,2,3,4,5]; // Set 它类似于数组，但是成员的值都是唯一的，没有重复的值。 let set=new Set(); Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。 add(value)：添加某个值，返回 Set 结构本身。 delete(value)：删...
ES6总结及面试题集合
10-12
- ES6引入了基于原型的面向对象编程的`class`语法糖，使得类的定义更加清晰。 - `extends`关键字实现类的继承，`super`关键字调用父类的构造函数和方法。 6. **模块系统**： - `import`和`export`关键字引入和...
ES6_es6_
09-30
本总结将详细介绍ES6的关键知识点。 1. **变量声明与作用域** - **let 和 const**：替代了传统的 var 声明，let 具有块级作用域，而 const 声明常量，一旦赋值不可改变。 - **解构赋值**：允许我们从数组或对象中...
es6 阮一峰
02-07
4. **类与继承**：ES6引入了基于原型的类概念，通过class关键字定义，但实质上仍然是基于原型的对象创建模式。同时支持继承、super关键字和构造函数。 5. **模块系统**：通过import和export关键字实现模块导入导出...
es6学习资料.zip
07-21
**Set和Map**是新的数据结构，Set存储不重复值，Map则以键值对形式存储数据，它们提供了更灵活的数据管理方式。 **默认参数、剩余参数和扩展运算符**是函数参数处理的改进。默认参数允许我们在函数定义时为参数提供...
ES6中Set(集合)、Map以及class类
1900's 88 keys的博客
12-18 528
目录Set(集合)常用的属性和方法sizeadd()delete()has()clear()for...of遍历Set 实践数组去重交集A ∩ B并集A U B差集A - BMapMap常用属性和方法sizeset()get()delete()has()clear()for...of遍历class类class申明类static 定义静态方法和属性extends继承父类getter和setter Set(集合) ES6提供了新的数据结构Set(集合)。 类似于数组，但是成员的值都是唯一的 集合实现了iter
【ES6+】007-ES6新特性：Set集合、Map集合、class类
訾博（ZiBo）的博客
12-20 226
目录 一、Set集合 1、概述 2、基本使用 代码实现： 运行结果： 3、Set集合实践 代码实现： 运行结果： 二、Map集合 1、概述 2、Map 的属性和方法 3、简单使用 代码实现： 运行结果： 三、class类 1、概述 2、知识点 3、class初体验 代码实现： 运行结果： 4、class静态成员 代码实现： 运行结果： 5、ES5构造函数实现继承 代码实现： 运行结果： 6、ES6class类继承 代码实现： 运行结果： 7、子类对
es6 javascript的class类中的 get和set
_
04-06 3327
在 Es6 中，在 Class 内部可以使用 get 和 set 关键字， 对某个属性设置存值函数和取值函数， 拦截该属性的存取行为。 class HelloWorld { constructor() { this.name_ = '' } get name() { return 'get name: '+this.name_; } set name(value) { console.log('set name: ' + value); this.name_ = val
es6中class的get和set的快速使用教程
weixin_38724114的博客
11-19 2554
//先声明一个类 class Fruit { constructor(name='香蕉',size='10斤') { this.name = name this.size = size } get getName(){ return this.name } set setName(value){ this.name = value } } //s...
ES6中class对get和set设置
weixin_43899452的博客
04-17 560
<!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>Doc
ES6详解三：class
热门推荐
言川的博客
09-17 3万+
class是es6引入的最重要特性之一。在没有class之前，我们只能通过原型链来模拟类。基本用法如果你用过java这样的纯面向对象语言，那么你会对class的语法非常熟悉。class People { constructor(name) { //构造函数 this.name = name; } sayName() { console.
ES6中class的使用+继承
汉堡请不要欺负面条
04-27 6406
一.Class 介绍+基本语法(1).介绍通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。(2).Class 的基本语法//definedClasses.js //定义类 class Person{ // 构造 constru...
ES6中class的getter和setter在继承中踩坑
开心大表哥
09-19 6510
在 Class 内部可以使用get和set关键字， 对某个属性设置存值函数和取值函数， 拦截该属性的存取行为。 在 Class 内部的get、set用法，看起来比较舒服，而且可以写同名函数了。 class MyClass { constructor() {} get prop() { return 'getter'; } set prop(value) { console.log(...
ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解
pcaxb的专栏
12-21 1万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解 ES6的Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要简单很多,这也是平常大多数面向对象语言的方式。 1.类的super方法 子类必须在constructor方
es6 map set
最新发布
08-18
ES6中的Map是一种键值对的集合，类似于对象，但有一些不同之处。Map使用set()方法来添加或更新一个键值对。使用get()方法可以获取指定键的值。Map还具有其他与Set不同的方法，如clear()、has()、size和delete()。Map...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值