ES2015入门系列1-初识ES2015

最新推荐文章于 2024-10-19 23:16:35 发布

weixin_34041003

最新推荐文章于 2024-10-19 23:16:35 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端 ViewUI

原文链接：https://segmentfault.com/a/1190000009970041

本文介绍了ECMAScript 2015 (ES6) 的一些关键特性，包括模块化开发、面向对象的新语法糖、默认参数、新的变量声明方式以及属性的简洁写法等，适合已有ES5基础的开发者进阶学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

先来看两段代码：

Human.js

export default class Human {

}

main.js

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不一样的语法：

import 和 export

模块化开发，在此之前也有很多的方案，AMD, CMD等，但从使用上来说，ES2015的模块化开发还是很简单和强大的。

class

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

参数有默认值了

不用再使用:

a = a || 'default';

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

const 和 let 关键字

var 终于不再一家独大了，来了2个小伙伴一起玩耍。

属性简洁写法

如果对象的属性名称和变量名称一致，那么可以使用下面的简洁写法：

let manObject = {
    man
}

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

怎么样，相比ES5，是不是更现代化了呢？

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