ES2015入门系列1-初识ES2015

EcmaScript 实际上是一种语言规范,常见的 JavaScript, ActionScript 等都是其具体实现,平时使用中通常能够将其和Javascript对等称呼,本系列教程主要讲述 EcmaScript2015(ES6) 为JavaScript带来的新的特性,并初步掌握如何利用其进行开发。javascript

本系列面向有必定基础知识的ES5使用者,不适合初学者。java

先来看两段代码:后端

Human.js模块化

export default class Human {

}

main.jsthis

import Human from './Human';

class Man extends Human {

  constructor(name = 'unnamed') {
    super();
    this.gender = 'male';
    this.name = name;
  }

  static create(name = 'unamed') {
      return new Man(name);
  }

  getGender() {
      return this.gender;
  }

  getName() {
      return this.name;
  }

}

const man = new Man('Jack');

let manObject = {
    man
}

console.log(man.getName());
console.dir(manObject);

上面的代码为咱们展现了和ES5不同的语法:code

  • importexport模块化开发

模块化开发,在此以前也有不少的方案,AMD, CMD等,但从使用上来讲,ES2015的模块化开发仍是很简单和强大的。对象

  • class教程

语意化的的面向对象语法,不过不要惊讶,这其实只是语法糖,在其背后,依然是编译器按照ES5的方式去执行的,不过对于后端开发者来讲,接受起来就不会那么难受了。class中定义方法无需function关键字, 这些会在后面的章节进一步讲解。ip

  • 参数有默认值了

不用再使用:

a = a || 'default';

这种方式处理默认值啦,其实这也是语法糖,可是带来的便利不言而喻。

  • constlet 关键字

var 终于再也不一家独大了,来了2个小伙伴一块儿玩耍。

  • 属性简洁写法

若是对象的属性名称和变量名称一致,那么可使用下面的简洁写法:

let manObject = {
    man
}

//等同于
let manObject = {
    man: man
}

怎么样,相比ES5,是否是更现代化了呢?

固然ES6带来的新语法岂止这几点,但这足以让咱们对JavaScript更感兴趣了。

相关文章
相关标签/搜索