ES6新数据类型&设计模式

500 阅读5分钟

Map 和 Set

Map 和 Set 是 ES6 新增的两个数据类型 都是属于内置构造函数 使用 new 的方式来实例化使用

  • Set

      const s = new Set()
      console.log(s)
      就是一个数据集合
      我们可以在 new 的时候直接向内部添加数据
      // 实例化的时候直接添加数据要以数组的形式添加
      const s = new Set([1, 2, 3, {}, function () {}, true, 'hwllo'])
      console.log(s)
      看上去是一个类似数组的数据结构,但是不是,就是 Set 数据结构     
    
    • 常用方法和属性

      • size : 用来获取该数据结构中有多少数据的

      • add : 用来向该数据类型中追加数据

      • delete : 是删除该数据结构中的某一个数据

      • clear : 清空数据结构中的所有数据

      • forEach : 用来遍历 Set 数据结构的方法

      • 获取 Set 结构里面的数据需要借助一个 ... 展开运算符

    • Set 数据类型特点

         //Set 不允许存储重复的数据
        const s = new Set([1,2,3])
        s.add(4) //此时size是4
        s.add(1) //此时size是4
        s.add(2) //此时size是4
        s.add(3) //此时size是4
    
    • 实例 - 数组去重
         let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
         let set = new Set(array);
         console.log(set);
         // => Set {1, 2, 3, 4, 5}
    
  • Map

    • 是一个数据集合,是一个很类似于 对象 的数据集合
        const m = new Map()
        console.log(m)
    
    • 值 = 值 的数据类型

      [ ['admin',100],['true',20] ]

    • 常用方法和属性

      • size : 用来获取该数据类型中数据的个数

      • delete : 用来删除该数据集合中的某一个数据

      • set : 用来向该数据集合中添加数据使用

      • get : 用来获取该数据集合中的某一个数据

      • clear : 清除数据集合中的所有数据

      • clear : 清除数据集合中的所有数据

      • has : 用来判断数据集合中是否存在某一个数据

   function test4(){
       let map = new Map([[true,1],['hello',{name:'admin'}]])
       console.log(map);
       console.log(map.size);
       map.set(100,'200')
       console.log(map.get('hello'));
       console.log( map.has('world') );
   }

Symbol类型

  • ES5中包含5种原始类型:字符串、数字、布尔值、null和undefined。ES6引入了第6种基本数据类型——Symbol

  • ES6引入Symbol的原因: ES5的对象属性名都是字符串,很容易造成属性名冲突。 比如,使用了一个他人提供的对象,想为这个对象添加新的方法,新方法的名字就有可能与现有方法产生冲突。 如果有一种机制,保证每个属性的名字都是独一无二的,这样就从根本上防止了属性名冲突。

  • 用法:

    直接使用Symbol()创建新的symbol类型,并用一个可选的字符串作为其描述.

  • 类型检测

         let symbol = Symbol("test symbol");
         console.log(typeof symbol); // "symbol"
    
  • 共享体系

    • 在不同的代码中共享同一个Symbol

      例如,在应用中有两种不同的对象类型,但是希望它们使用同一个Symbol属性来表示一个独特的标识符。 一般而言,在很大的代码库中或跨文件追踪Symbol非常困难而且容易出错,出于这些原因, ES6提供了一个可以随时访问的全局Symbol注册表

      Symbol.for()

      QQ图片20220317203124.png

设计模式

  • 什么是设计模式

设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。 设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。 这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

总共有 23 种经典设计模式。这些模式可以分为三大类:创建型模式(Creational Patterns)、结构型模式(Structural Patterns)、行为型模式(Behavioral Patterns)

  • 设计模式分类

    创建型模式

    这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式, 而不是使用 new运算符直接实例化对象。 这使得程序在判断针对某个给定实例需要创建哪些对象时更加灵活。

    结构型模式

    这些设计模式关注类和对象的组合。 继承的概念被用来组合接口和定义组合对象获得新功能的方式。

    行为型模式

    这些设计模式特别关注对象之间的通信。

  • 单例模式 单例模式(Singleton Pattern)是 最简单常用的设计模式之一。 这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。

这种模式确保整个应用中只有单个对象存在。

     class Person {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            //获取实例对象
            //static: 声明的方法是静态方法,类方法,可以通过类名直接调用
            static getInstance(name,age) {
                if (!this.person) {
                    this.person = new Person(name, age)
                }
                return this.person
            }
        }

        // let p1 = new Person('jack',20)
        // let p2 = new Person('jack',20)

        let p1 = Person.getInstance('jack', 20)
        let p2 = Person.getInstance('jack', 20)

        console.log( p1 === p2);


  • 组合模式

组合模式,就是把几个构造函数的启动方式组合再一起

然后用一个 ”遥控器“ 进行统一调用

组合模式构造函数把前面的几个功能组合起来

    class GetHome{
            init(){
                console.log('到家1');
            }
        }
        
        class OpenComputer{
            init(){
                console.log('打开电脑1');
            }
        }

        class PlayGame{
            init(){
                console.log('玩游戏1');
            }
        }

        // let getHome = new GetHome()
        // let openComputer = new OpenComputer()
        // let playGame = new PlayGame()
        // getHome.init()
        // openComputer.init()
        // playGame.init()

        //组合类
        class Compose{
            constructor(){
                this.taskList = []
            }
            add(task){
                this.taskList.push(task)
            }
            start(){
                this.taskList.forEach(item=>{
                    item.init()
                })
            }
        }

        let compose = new Compose()
        compose.add(new GetHome())
        compose.add(new OpenComputer())
        compose.add(new PlayGame())

        compose.start()
  • 观察者

观察者模式,通常也被叫做 发布-订阅模式 或者 消息模式 英文名称叫做 Observer 官方解释: 当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新,解决了主体对象与观察者之间功能的耦合,即一个对象状态改变给其他对象通知的问题

   /*
          主体(被观察者) 
        */
        class Subject {
            constructor(name) {
                this.name = name
                this.list = []
            }
            /**
             * 添加观察者,提供观注功能
            */
            add(o) {
                this.list.push(o)
            }
            /*
              发通知
            */
            updateNotifiy(message){
                this.list.forEach(item=>{
                    item.notify(message)
                })
            }
        }

        /**
         * 观察者
        */
        class Observer {
            constructor(name){
                this.name = name
            }
            notify(message){
                console.log(this.name,' 收到明星发的消息 :',message);
            }
        }

        let zsf = new Subject('张三丰')
        let fs1 = new Observer('小明')
        let fs2 = new Observer('小丽')
        let fs3 = new Observer('小王')

        zsf.add(fs1)
        zsf.add(fs2)
        zsf.add(fs3)

        zsf.updateNotifiy('二阶段学习大功告成')

addEventListener 标准的 观察者模式