es6总结二

作者: 辛未羊的前端随笔 | 来源:发表于2019-05-13 11:11 被阅读0次

    前面一篇大概说了下let const 数组以及对象的结构解析,以及扩展运算符
    今天主要说一下set map 数据结构,symbol,class,箭头函数,下一篇在专门说一下Promise

    Set

    类似于数组,但值唯一的数据结构
    Set对象的size属性返回Set实例的值的总数

    Set对象的操作方法

    add(value) =>添加某个值,返回Set结构本身
    delete(value) =>删除某个值,返回一个布尔值,表示是否删除成功
    has(value) =>返回一个布尔值,表示该值是否是Set的成员
    clear() =>清除所有值,没有返回值

    Set对象的遍历

    keys() =>返回键名的遍历器
    values() =>返回键值的遍历器
    entries() =>返回键值对的遍历器
    forEach((value,key)=>{}) =>使用回调遍历

    Set数组去重

      let arr = [11,22,33,44,55,11];
      let set = new Set(arr);  
      let newArr = [...set];   //利用扩展运算符转换为数组
      console.log(newArr);//[11, 22, 33, 44, 55]
    

    注:Set只存值,所以key(),value() 返回的值是一样的。

    Map

    类似于对象,但键的返回不限制于字符串,各种数据类型都可以当做键的数据结构
    Map的size属性返回Map实例的键值对总数

    Map对象的操作方法

    set(key,value) =>设置键名key,对应的键值为value。然后返回整个Map结构,如果key已有值,则键值会被更新,否则就新生成该键
    get(key) =>读取key对象的键值,如果找不到对应的key,返回undefined
    delete(key) =>删除某个某个键,返回一个布尔值,表示是否删除成功
    has(key) =>返回一个布尔值,表示该键是否在当前Map中
    clear() =>清除所有键值,没有返回值

    Symbol

    Symbol是一种新的数据类型,标识独一无二的值。
    Symbol值通过Symbol函数生成
    Symbol函数接受一个字符串为参数,标识对Symbol实例的描述
    Symbol的主要作用是标识对象的属性名
    注:Symbol值作为对象属性名时,不能用点运算符,在对象内部也不可以

      let s1 = Symbol()
      let s2 = Symbol()
      colsole.log(s1 == s2 )   //false   说明Symbol是独一无二的值
    
    Symbol遍历
      let s1 = Symbol()
      let s2 = Symbol()
      let obj = {[s1]:'tom'}
      obj[s2] = '张三'
      let keys = Reflect.ownKeys(obj)  //获取所有的key
    

    class

       class Person {
            constructor (name,age){ //接受参数
                this.name = name;
                this.age = age
            }
            showName (){
                console.log(`我的名字是${this.name}`)
            }
            showAge (){
                console.log(`我的年纪是${this.age}`)
            }
            static sayHi(){  //静态方法
                console.log('Hi......')
            }
        }
        let p = new Person('张三',18);
        p.showName();
        p.showAge();
        p.sayHi();   //报错
        Person.sayHi()    //正确
    

    跟后端语音class一样,也拥有继承,使用class 代码会比较清晰

    箭头函数

      let sum = (x,y)=>{  //箭头函数取代function
            console.log(x,y);
            return x+y
        }
        sum(3,7)
    

    箭头函数的this

      function Timer(id) {
            this.id = id;   //this指向time 
            setTimeout(function () {
                //输出undefined    this指向window对象   其原因在于setTimeout挂载在window对象上。当调用setTimeout方法时  是window对象在调用
                console.log(this,this.id)
            },500)
        }
        let time = new Timer('500')
    

    在上面的代码中为啥是输出undefined。 其原因是this的指向。上面代码中的两个this指向不同的对象,第一个this是指向Timer('500')实例 第二个this指向window对象。

    es5中可通过bind改变this指向来完成绑定id

        setTimeout(function () {console.log(this,this.id)  }.bind({id:id}),500)
    

    将上面代码改造为

        function Timer(id) {
            this.id = id;
            setTimeout(()=> {
                console.log(this,this.id)//正常输出500
            },500)
        }
        let time = new Timer('500')
    

    function跟箭头函数的区别
    function 调用的时候 谁调用 this指向谁
    箭头函数 定义的时候 this属于谁,就指向谁。上面代码中是在new Timer的时候被定义

    相关文章

      网友评论

        本文标题:es6总结二

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