初探ECMAScript6

基础变化

1. String类型新增了三个方法，不必使用indexOf来判断一个字符串是否在另一个字符串内

   //String changes
   var a = "Hello world";
       var b = "Hello";
       var c = "world";
       function includes(source, dest) {
         return source.indexOf(dest) > -1;
       }
       function startsWith(source, dest) {
         return source.slice(0, dest.length) === dest;
       }
       function endsWith(source, dest) {
         return source.slice(source.length - dest.length, source.length) === dest;
       }
   
   var msg = "Hello world!";
   
       console.log("msg startsWith Hello: ", msg.startsWith("Hello"));       // true
       console.log("msg endsWith !: ", msg.endsWith("!"));             // true
       console.log("msg includes o:  ", msg.includes("o"));             // true
       
       console.log("msg startsWith o: ", msg.startsWith("o"));           // false
       console.log("msg endsWith world!: ", msg.endsWith("world!"));        // true
       console.log("msg includes x:  ", msg.includes("x"));             // false

2. Object.is方法用来判断两个参数是否相等，与全等（===）类似只是在+0和-0上以及NaN与NaN的判断上与全等不同

   console.log(+0 == -0);              // true
   console.log(+0 === -0);             // true
   console.log(Object.is(+0, -0));     // false
   
   console.log(NaN == NaN);            // false
   console.log(NaN === NaN);           // false
   console.log(Object.is(NaN, NaN));   // true
   
   console.log(5 == 5);                // true
   console.log(5 == "5");              // true
   console.log(5 === 5);               // true
   console.log(5 === "5");             // false
   console.log(Object.is(5, 5));       // true
   console.log(Object.is(5, "5"));     // false

3. let声明，let与var的作用相同，只是以let声明的变量的作用域在当前的{}块内

   function getValue(condition) {
   
       if (condition) {
           let value = "blue";
   
           // other code
   
           return value;
       } else {
   
           // value doesn't exist here
   
           return null;
       }
   
       // value doesn't exist here
   }

4. const关键字用来声明常量，常量一旦赋值就无法改变，其他的赋值表达式都会被忽略
5. 解构赋值，引入解构赋值可以方便的从复杂的对象中取得所需的属性值

   var options = {
           repeat: true,
           save: false,
           rules: {
               custom: 10,
           }
       };
   
   // later
   
   var { repeat, save, rules: { custom }} = options;
   
   console.log(repeat);        // true
   console.log(save);          // false
   console.log(custom);        // 10

    

 

类

1. 类声明语法，目前许多前端框架比如dojo、extJs使用辅助设计使得Javascript看起来支持“类”，基于以上目的ES6引入类体系；目前在Chrome使用class关键字必须使用严格模式

   //class declaration
   function PersonType(name) {
           this.name = name;
       }
       
       PersonType.prototype.sayName = function() {
           console.log(this.name);
       };
       
       let person = new PersonType("Nicholas");
       person.sayName();   // outputs "Nicholas"
       
       console.log(person instanceof PersonType);      // true
       console.log(person instanceof Object);      // true
   
   (function(){
   'use strict';
   class PersonClass {
           constructor(name) {
               this.name = name;
           }
           sayName() {
               console.log(this.name);
           }
       }
       
       let person = new PersonClass("Nicholas");
       person.sayName();   // outputs "Nicholas"
       
       console.log(person instanceof PersonClass);     
       console.log(person instanceof Object);  
   })()

2. 属性访问器，通过使用get和set关键字来声明属性（Attribute），在ES5中需要借助Object.defineProperty来声明属性访问器

   //Accessor Properties
   (function(){
         'use strict';
         class PersonClass {
           constructor(name) {
               this.name = name;
           }
           get Name(){
             return this.name;
           }
           set Name(value){
             this.name = value;
           }
         }
       
         let person = new PersonClass("Nicholas");
         console.log('person.Name: ', person.Name)   // outputs "Nicholas"
       })()

3. 静态成员，ES5或者之前的代码通过在构造函数中直接定义属性来模拟静态成员；ES6则只需要在方法名前面加上static关键字

   //ES5
   function PersonType(name) {
       this.name = name;
   }
   
   // static method
   PersonType.create = function(name) {
       return new PersonType(name);
   };
   
   // instance method
   PersonType.prototype.sayName = function() {
       console.log(this.name);
   };
   
   var person = PersonType.create("Nicholas");
   
   //ES6
   //Static Members
   (function(){
         'use strict';
         class PersonClass {
           constructor(name) {
             this.name = name;
           }
             
           sayName() {
             console.log(this.name);
           }
           
           static create(name) {
             return new PersonClass(name);
           }
         }
         
         let person = PersonClass.create("Nicholas");
         console.log(person);
       })()

4. 继承，ES5中需要借助prototype属性而ES6中引入extends关键字来实现继承

   //Handling Inheritance
   (function(){
         'use strict';
         class PersonClass {
           constructor(name) {
             this.name = name;
           }
         }
         
         class Developer extends PersonClass {
           constructor(name, lang) {
             super(name);
             this.language = lang;
           }
         }
         
         var developer = new Developer('coder', 'Javascript');
         console.log("developer.name: ", developer.name);
         console.log("developer.language: ", developer.language);
       })()

    

模块机制

　　当前关于JS的模块化已有两个重要的规范CommonJs和AMD，但毕竟不是原生的模块化，所以ES6中引入模块化机制，使用export和import来声明暴露的变量和引入需要使用的变量

　　

 

Iterator和Generator

　　Iterator拥有一个next方法，该方法返回一个对象，该对象拥有value属性代表此次next函数的值、done属性表示是否拥有继续拥有可返回的值；done为true时代表没有多余的值可以返回此时value为undefined；Generator函数使用特殊的声明方式，generator函数返回一个iterator对象，在generator函数内部的yield关键字声明了next方法的值

//Iterator & Generator
// generator
    function *createIterator() {
        yield 1;
        yield 2;
        yield 3;
    }
    
    // generators are called like regular functions but return an iterator
    var iterator = createIterator();
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());

 

Promise

　　ES6引入原生的Promise对象，Promise构造函数接受一个方法作为参数，该方法中可以调用resolve和reject方法，分别进入fulfill状态和fail状态

// Promise
var getJSON = function(url) {
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.send();

    function handler() {
      if (this.readyState !== 4) {
        return;
      }      
      if (this.status === 200) {
      debugger;
        resolve(this.responseText);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });

  return promise;
};

getJSON("https://gis.lmi.is/arcgis/rest/services/GP_service/geocode_thjonusta_single/GeocodeServer?f=json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('Error： ', error);
});

 

Proxy

　　顾名思义用来作为一个对象或函数的代理。Proxy构造函数接受两个参数：target用来被封装的对象或函数、handler拥有一系列方法，重写这些方法以便当调用这些操作时会进入重写的方法中

•handler.getPrototypeOf

•handler.setPrototypeOf

•handler.isExtensible

•handler.preventExtensions

•handler.getOwnPropertyDescriptor

•handler.defineProperty

•handler.has

•handler.get

•handler.set

•handler.deleteProperty

•handler.enumerate

•handler.ownKeys

•handler.apply

•handler.construct

handler.getPrototypeOf
handler.setPrototypeOf
handler.isExtensible
handler.preventExtensions
handler.getOwnPropertyDescriptor
handler.defineProperty
handler.has
handler.get
handler.set
handler.deleteProperty
handler.enumerate
handler.ownKeys
handler.apply
handler.construct

 

参考资料：

Understanding ECMAScript 6

ECMAScript 6 入门