es6新特性

常用es6新特性列举

• Default Parameters（默认参数） in ES6
• Template Literals （模板文本）in ES6
• Multi-line Strings （多行字符串）in ES6
• Destructuring Assignment （解构赋值）in ES6
• Enhanced Object Literals （增强的对象文本）in ES6
• Arrow Functions （箭头函数）in ES6
• Promises in ES6
• Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
• Classes（类） in ES6

1.默认参数

var link = function(height = 50, color = 'red', url = 'http://azat.co') {     ...   }
// 参数预格式化

2.模板对象，以及多行字符串（“）

var name = 'Your name is ${first} ${last}.';
var url = 'http://loalhost:3000/api/messages/${id}';

//  自动换行
let str = `You have the ${right} to be you.n  
    You can only be you when you do your best.`; 

3.解构赋值

let {name,age} = {name:'帅哥',age: 18,height: 180} //对象
let [a,b,c] = [a:'1',b:'2',c:'3',d:'4'] || {a:'1',b:'2',c:'3',d:'4',length:4} || ...{a:'1',b:'2',c:'3',d:'4'} //数组类数组取值

4.增强的对象字面量

Object.create({serviceBase: 'asdad'})  // 类似于深拷贝，改变内存区块
Object.keys({name: 'asdad'}) // 返回key值数组

5.箭头函数

const sayname = (name) => console.log(name) // 同一行不需要{},return,
箭头函数的this指的是定义区间的的this
上边的案例this指的是sayname

6.promise

let fetch = (name) => {
return new Promise((resolve, reject) => {
  if (name == '美女')  {
    resolve(name)
  } else {
    reject({error: 'name不是美女，我拒绝'})
  }
})
}

// tips  async 和 await  只能配合promise使用

7.块作用域和构造let和const

//这里顺带讲一下，声明提前，暂时性假死

// var 声明变量最大的一个特点是存在变量提升。原因就是es5声明提前，javascript默认是按顺序先将声明排在js解析的最上边，一次压入执行栈执行内存的分配，执行完之后马上弹出执行下一个栈，当直接执行console.log(a)的时候，js会自动通过LHS(赋值查找)||RHS（源查找），去查询这个a的值，当在作用域内没有找到a的值，会自动向父级查找，查找不到就默认是window的键a的值为赋值，所以打印出来的a是undefined
console.log(a); // undefined
var a = 1;
console.log(a); // 1

// 暂时性假死是因为let造成的，let是块级作用域，他不会向父级查找

/**
* 这上面都属于变量 a 的暂时性死区
* console.log(a) // => Reference Error
*/
let a = 1;
console.log(a); // => 1

即声明 a 之前，不能够访问 a，而直接报错。

而暂时性死区的出现又引出另外一个问题，即 typeof 不再安全。你可以参考这篇文章http://es-discourse.com/t/why-typeof-is-no-longer-safe/15

不好意思跑题了

8.Classes （类）

// 创建初始  类

class baseModel {  
    constructor(options, data) {// class constructor， 注意我们对options 和data使用了默认参数值。
        this.name = 'Base';  
        this.url = 'http://azat.co/api';  
        this.data = data;  
        this.options = options;  
   }  
    getName() { // class method  
        console.log(`Class name: ${this.name}`);  
    } 
    getUrl() { // class method  
         console.log(`Url: ${this.url}`);  
    }
}

// 扩展class 子类
class childclass extends baseModel {
   constructor(opts, data) {
     super({private: true}// 设置私有值, [1，2] || {0：1,1:2} // 设置私有data)
     this.url = opts.url
   }
getaccountsData() {
        return this.data;  
    }
}

let test = new childclass('任意参数')
test.getName() // base
test.getaccountsData() // [1，2] || {0：1,1:2}
//子类必须在constructor方法中调用super方法，否则新建实例时会报错。
//这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。
//如果不调用super方法，子类就得不到this对象。

9.Modules （模块导入、导出）

// 导出
export var port = 3000;
export function getAccounts(url) { ...}

import {port, getAccounts} from 'module';
console.log(port); // 300