常用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

发表回复

您的电子邮箱地址不会被公开。