美文网首页
ES6入门学习

ES6入门学习

作者: 西兰花伟大炮 | 来源:发表于2017-04-28 19:38 被阅读12次

    学到哪写到哪,就是不从let开始

    ES6, 7知识点列表

    • let, const
    • 对象与数组解构
    • Class继承的语法糖
    • 模板字符串
    • 箭头函数
    • Set,Map数据结构
    • Symbol数据类型
    • 模块化import/export
    • promise与async/await
    • 同名对象字面了缩写
    • for of循环迭代

    (1)模板字符串
    <body>
       <div class="box"></div>
       <script>
       var name = "德玛西亚";
           var str = `
               <ul>
                   <li>${name}</li>
               </ul>`;
           var getbox = document.querySelector('.box');
           getbox.innerHTML = str;
       </script>
    </body>
    

    (是以tab键上那个键作为分隔)
    向页面插入一个一个无序列表

    • 德玛西亚

    (2)清晰明白的字符串新增方法
    es6字符串.PNG

    startsWith() 是否以某个字符串开头


    endsWith() 是否以某个字符串结尾


    includes() 是否包含某个字符串


    repeat( n ) 将字符串重复多少遍

    都是见名知其意的函数


    (3)Set

    new一个Set赋值给变量,在圆括号传入数组,进行一些增删查操作,特点是会对传入的数组进行去重,元素是唯一的


    set.PNG

    (4)箭头函数

    箭头函数与普通函数还有一个区别,那就是箭头函数中不能使用arguments
    对象。可以使用 rest 参数和参数默认值


    es6之前的function有一个特点:函数内部的上下文并不是由该函数写在那里决定的,而是由谁调用决定的,谁调用函数内部的this就指向谁。然后我们有些时候并不想让他这样,但又没办法,只能通过先保存this,或者call/apply,或者bind来调整上下文。箭头函数的出现解决了这个宁人苦恼的问题,因为箭头函数内的上线文(this)是由函数所处的对象来决定的,无论被哪个对象调用,上下文都不会改变


    箭头函数的this指向
    默认指向在定义它时,它所处的对象(宿主对象),而不是执行时的对象


    箭头函数还可以简化return返回值

    Array.from( [ ] , function(item){ return item });
    (7)增强的对象字面量

    对象中直接定义方法

    var obj = {
          printName(){
                  //code
          }
    }
    obj.printName();
    
    (8)let与const
    • const声明的常量不得改变值,声明后必须立即初始化
    • const的作用域与let相同,只在声明的块级作用域内有效
    • let与const都没有变量提升,都不可以重复声明

    (9)promise
    image.png
    image.png
    (10)函数默认值
    image.png
    image.png
    (11)可变参数

    image.png
    (12)Es6构造函数class
    (13)如果是导出数组,引入要加{ 数组名 }
    (14)
    image.png

    相关文章

      网友评论

          本文标题:ES6入门学习

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