zoukankan      html  css  js  c++  java
  • ES6十大常用特性

    1.   .   Default Parameters(默认参数) in ES6     

      2.    Arrow Functions (箭头函数)in ES6

      3.    Block-Scoped Constructs Let and Const(块作用域构造Let and Const

      4.    Template Literals (模板文本)in ES6

      5.    Multi-line Strings (多行字符串)in ES6

      6.    Destructuring Assignment (解构赋值)in ES6 

      7.   Classes(类) in ES6

      8.    Modules(模块) in ES6

      9.    Promises in ES6

      10.  Enhanced Object Literals (增强的对象文本)in ES6

      前三个特性已在上一篇博客中讲过,现在从第四个开始

      4.Template Literals(模板对象) in ES6

      在其它语言中,使用模板和插入值是在字符串里面输出变量的一种方式。因此,在ES5,我们可以这样组合一个字符串: 

      //ES5
       var first="sun";
       var last='menghua';
       var name='My name is '+first +' '+last+'.';
      console.log(name); 
      //My name is sun menghua.

      在ES6中,我们可以使用新的语法$ {NAME},并把它放在反引号

      var first="sun";
       var last='menghua';
       var name=`My name is ${first}  ${last}.` ;
      console.log(name); 
      //My name is sun menghua.

      5.Multi-line Strings (多行字符串)in ES6

      ES5中,我们不得不使用以下方法来表示多行字符串:

      var poem=' wo shi yi zhi xiao qing long,
      '
       +'xiao qing long,
       '
       +'wo you yi ge xiao mi mi,
      '
      + 'xiao mi mi.'
      console.log(poem);
      /*
       wo shi yi zhi xiao qing long,
      xiao qing long,
       wo you yi ge xiao mi mi,
      xiao mi mi.
      */ 

      在ES6中,仅仅用反引号就可以解决了:

      var poem=`wo shi yi zhi xiao qing long,
       xiao qing long,
       wo you yi ge xiao mi mi,
      xiao mi mi.`
      console.log(poem);
      /*
      wo shi yi zhi xiao qing long,
       xiao qing long,
       wo you yi ge xiao mi mi,
      xiao mi mi.  */

           6. Destructuring Assignment (解构赋值)in ES6

    数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息,ES6新增了解构,这是将一个数据结构分解为更小的部分的过程 

    const people = {
            name: 'lux',
            age: 20
        }
        const name = people.name
        const age = people.age
        console.log(name + ' --- ' + age)
    //lux --- 20

    在ES6之前我们就是这样获取对象信息的,一个一个获取。现在,解构能让我们从对象或者数组里取出数据存为变量,例如

    {
    //对象
        const people = {
            name: 'lux',
            age: 20
        }
        const { name, age } = people   
    //必须为name,age,即原属性名;其顺序可以改变 console.log(`${name}
    --- ${age}`) // lux --- 20 //数组 const color = ['red', 'blue'] const [first, second] = color console.log(first) //'red' console.log(second) //'blue' }

     https://www.cnblogs.com/sunmarvell/p/9109650.html

    7.Class(类) in ES6      class,extends,super

    ES5中有几个令人头疼的属性,事实上,js实际上并没有“类“的说法,由于过于不方便,我们用原型,原型链的形式添加了类似可以实现继承的方法。实际上这种写法由于和大多数后端语言java c#等编程语言相差甚远并且语法复杂,this指向混乱,这让很多习惯写后端语言的大神们并不习惯,终于在ES6里提供了更接近传统语言的写入引用了CLASS。

    class Parents {
        constructor(){
            this.type = 'parents'
        }
        says(say){
            console.log(this.type + ' says ' + say)
        }
    }
    
    let parent = new Parents ()
    parent .says('hello') // parents says hello
    
    class Kid extends Parents {
        constructor(){
            super()
            this.type = 'kid'
        }
    }
    
    let kid = new Kid()
    kid .says('hi') //kid says hi

    从上面的代码可以看出这种“类”的形式已经很接近传统意义了。首先定义一个类名为Parent的类,constructor(){}为构造方法,在构造方法内定义的方法与属性都是实例本身的,而constructor外的方法与属性是大家共享的。

    两个类之间可以用extends来实现继承,通过extends来继承可以直接继承其要继承的类中(Parents)所有属性和方法。

    supper();指父类的实例,在新建实例时子类必须在constructor(){}中调用super();由于子类没有自己的this对象,只能通过继承父类的this来进行操作,如若不调用super(),则子类无this对象。

        8.    Modules(模块) in ES6

    http://www.cnblogs.com/sunmarvell/p/8819537.html

       9.    Promises in ES6

     https://segmentfault.com/a/1190000007685095

     

  • 相关阅读:
    初始化项目结构
    Django基础2
    Django基础
    Linux(9~)
    Linux(8~)
    redis案例
    Jedis连接池
    Jedis入门
    redis持久化
    redis命令操作
  • 原文地址:https://www.cnblogs.com/sunmarvell/p/8743756.html
Copyright © 2011-2022 走看看