ES6总结2

ES6总结2,第1张

一、模板字符串

JS定义字符串:‘’,“”,``



例如:
    let obj={
        username:'jack',
        age:20,
        zhuanye:'前端开发'
    }

    //let str='我的名子叫'+obj.username+'我的年龄为'+obj.age+'我的专业为'+obj.zhuanye
    let str=`我的名子叫${obj.username},
                我的年龄${obj.age},
                我所学专业${obj.zhuanye}`
      console.log(str)
二、set和map

1. set: (本质上就是不重复的无序数据集合,类似于数组)

常用方法:

let s1=new Set()
添加:s1.add()
删除:delete()
清空:clear()
遍历:forEach()
长度:size  获取数量
has:判断是否有某个值

应用场景:可以用Set对数组去重 ([...new Set(arr)])

2. map:map数据结构主要为了解决对象的key只能是字符串类型的问题,

有了map,对象的key可以是任意类型

set()
get()
deelete
size
forEach
三、class类 3.1 一堆名词

面向对象:万物批对象,对象包括: 属性和方法
    
    属性:特征,特性  手机:类,品牌,颜色,价格,产地,销量,。。。。。
    方法:功能,打电话,发短信,娱乐(玩游戏,...),移动办公

封装:对一类功能的复用,有入参,出参
继承:对已封装好的模块,进行二次封装
多态:在JS中体现的不明显


function fn1() {}

function fn2() {}

父类:基类
子类:派生类

原型链 __proto__,prototype
原型:prototype,相当于多个实例的共同空间

对象即实例,通过类实例的具体个体
类,即模型

一个类能创造出多个实例
3.2 如何创建一个类

    通过构造函数创建

 //ES5类的创建--通过function来模拟创建类

    function Person(name='无名',age=0) {
        this.name=name
        this.age=age
    }

    Person.prototype.eat=function() {
        console.log(`${this.name}能吃`)
    }

    Person.prototype.sleep=function() {
        console.log(`${this.name}能睡`)
    }

    Person.prototype.work=function() {
        console.log(`${this.name}喜欢工作`)
    }

通过ES6类创建

 //ES6类的创建--通过function来模拟创建类

    class Person {
        //constructor相当于构造器
        constructor(name = '无名', age = 0) {
            this.name = name
            this.age = age
        }

        eat() {
            console.log(`${this.name}能吃`)
        }

        sleep() {
            console.log(`${this.name}能睡`)
        }

        work() {
            console.log(`${this.name}喜欢工作`)
        }


    }
3.3 如何继承一个类

ES5继承

原型链继承

优点:能继承方法

缺点:不能传参

借用构造函数继承

在子类中通过call实现属性的继承,也就是能向父级传参

组合继承

是原型链继承和借用构造函数继承的组合

代码演示:




    
    Document


    ES5继承


ES6继承

extends配合super

3.3 如何实例化一个类

都是通过new 类名()

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/941421.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表(0条)

保存