美文网首页
JavavScript--ES5和ES6(下)

JavavScript--ES5和ES6(下)

作者: 蒜泥捣莓 | 来源:发表于2022-08-12 18:52 被阅读0次

    一、Map

    基于set和array之上构建的一个集合

    1、Map的声明

    使用 new 关键字和 Map 构造函数
    let  m = new Map();
    
    通过二维数组声明
    var arr = [[1,2],[3,4]]
    var map = new Map(arr) //通过二维数组构建的
    

    2、Map的方法和属性

    • set()
    • get()
    • has()
    • delete()
    • clear()
    • size
      初始化之后,可以使用 set()方法再添加键/值对。另外,可以使用 get()和 has()进行查询,可以通过 size 属性获取映射中的键/值对的数量,还可以使用 delete()和clear()删除值。
    const m = new Map(); 
    
    alert(m.has("firstName")); // false 
    alert(m.get("firstName")); // undefined 
    alert(m.size); // 0 
    
    m.set("firstName", "Matt") 
     .set("lastName", "Frisbie"); 
    alert(m.has("firstName")); // true 
    alert(m.get("firstName")); // Matt 
    alert(m.size); // 2 
    
    m.delete("firstName"); // 只删除这一个键/值对
    
    alert(m.has("firstName")); // false 
    alert(m.has("lastName")); // true 
    alert(m.size); // 1 
    
    m.clear(); // 清除这个映射实例中的所有键/值对
    
    alert(m.has("firstName")); // false 
    alert(m.has("lastName")); // false 
    alert(m.size); // 0
    

    Map 实例会维护键值对的插入顺序,因此可以根据插入顺序执行迭代操作。
    可以
    通过 entries()方法(或者 Symbol.iterator 属性,它引用 entries())取得这个迭代器。
    keys()和 values()分别返回以插入顺序生成键和值的迭代器

    const m = new Map([
     ["key1", "val1"], 
     ["key2", "val2"], 
     ["key3", "val3"] 
    ]); 
    for (let key of m.keys()) { 
     alert(key); 
    } 
    // key1 
    // key2 
    // key3 
    for (let key of m.values()) { 
     alert(key); 
    } 
    // value1 
    // value2 
    // value3
    

    weakMap基于weakSet上面构建map 也就是他的key是对象 只能是对象

    二、解构

    var obj = {username:'jack',password:'123'}
    // obj.username
    // obj.password
    //解构来取 (通过key来解构对应的obj) {key} = {key:123}
    var {password,username} = obj
    console.log(username);
    console.log(password);
    //快速提取对象里面数据
    var {age} = {age:18}
    console.log(age);
    //解构取数组里面的内容 按照位置来取对应的值
    var [o,p] = ['a','b']
    console.log(o);
    // 快速读取值
    var {sex} = {username:'jack',password:"123",age:'18',sex:"女"}
    console.log(sex);
    

    三、扩展运算符

    ...打开数组拿出里面的内容

    //扩展运算符
    var arr = [1,3,5]
    var arr1 = [2,4,6]
    console.log(...arr); //解除数组的包装 把他暴露出来 1 3 5
    //如果你的方法里面需要,隔开他会默认给你加上一个,
    console.log( 'abc'.concat(1,2,3,4,5));
    console.log( 'abc'.concat(...arr,...arr1)); //默认加上,
    

    四、类

    他是用于对象构建的 (类只是一个构建对象的容器 )调用这个class要使用new关键词。

    //类名首字母必须大写
    class Person{
    constructor(){ //构造器
    //this必须在构造器里面使用
    this.age = 18 //类的属性
    this.sayHello = function(){ //类的方法
    console.log('hello')
    }
    }
    }
    //构建对象
    var person = new Person()
    console.log(person.age); //18
    person.sayHello() //hello
    
    //类名首字母必须大写 class不能被重复定义
    class Person1{
    //constrctor调用 new的过程 每一次new 里面的内容都会重新声明
    constructor(age=18,name='jack'){ //构造器
    //this必须在构造器里面使用 this是指向实例化的对象
    this.age = age //类的属性
    this.name = name
    this.sayHello = function(){ //类的方法
    console.log('hello')
    }
    }
    run(){//在函数里面可以访问对应的this
    console.log(this.name+'跑');
    }
    }
    //使用new 调用的对应构造器的时候 就是在实例化的过程 而产生的对象被称为实例化对象
    var person = new Person1(18,'jack')
    console.log(person); // age:18 name:jack sayHello:fn
    var person1 = new Person1()
    console.log(person1);
    person1.run()
    console.log( person1.sayHello == person.sayHello);//false
    console.log( person1.run == person.run);//true
    

    注意事项

    • class 修饰的类 类名首字母必须大写
    • class 不允许重复声明
    • class 里面this只能存在于constructor(构造器)里面
    • class 里面this指向当前实例化对象
    • 在实例化的过程 new的过程的 调用的constructor函数 跟其他函数无关(所以当前在constructor都会重新声明一次)

    extends关键词

    extends 用于继承 他会拥有父类所有的非私有的属性及方法

    class Person{
    constructor(){
    this.age = 18
    }
    run(){
    console.log('跑');
    }
    }
    //extends 关键词声明以后 在对应的constructor里面想要使用this 必须先写super()
    class Son extends Person{
    constructor(){
    super()//指向父类Person的构造器constructor
    this.name = 'jack'
    }
    }
    var son = new Son()
    console.log(son);//获取不到run的
    

    注意事项

    • 在子类构造里面如果想要使用this 必须先要使用super()
    • super指向父类的构造器
    • 子类无法获取构造器之外的函数

    相关文章

      网友评论

          本文标题:JavavScript--ES5和ES6(下)

          本文链接:https://www.haomeiwen.com/subject/gxcfgrtx.html