ES2015入门系列1-初识ES2015

hellowoody 发布于2019-08-20 17:37 / 1268人阅读

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更感兴趣了。

私有云混合云 es6-系列 ES6入门我的2015 2015

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83732.html

2017-06-29 前端日报

摘要：前端日报精选如何在非项目中使用知乎专栏编码规范最常被遗忘的性能优化浏览器缓存个人文章译统一样式语言掘金新的开发者提及最多的个视频众成翻译中文第期在中使用译统一样式语言掘金前端现状答题救不了前端新人相学长怼前端岁以 2017-06-29 前端日报精选如何在非 React 项目中使用 Redux - 知乎专栏Javascript编码规范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 评论0 收藏0
ES2015入门系列9-Babel和Rollup

摘要：虽然够好用，奈何没有浏览器对其可以完全支持，本文书写时间，开发版号称已经支持的特性。开始安装本系列假定读者都有使用经验，如果还没有，赶紧去这里了解并安装吧。到此，我们的已经准备就绪。通过前面章节的讲解，大家对ES2015的一些新语法有了初步的理解，之前我们的测试代码都可以直接放入 Chrome Console 中直接运行，为了更好的学习后面的面向对象和模块开发，我先用一章介绍一下 B...

eccozhou 2019-08-20 17:40 评论0 收藏0
ES2015入门系列11-模块 Modules

摘要：先来介绍下语法官方示例代码模块中对象暴露只需要即可，可以是任何类型的对象。手动导入模块下某个对象，需要和模块中定义的名字对应，顺序无关。看一下官方介绍： Language-level support for modules for component definition. JS在ES2015开始原生支持模块化开发，我们之前也曾借助于诸如： AMD CommonJS 等的模块加载...

HitenDev 2019-08-20 17:40 评论0 收藏0
ES2015入门系列5-解构赋值

摘要：用过的同学肯定见过类似下面的代码这就是为带来的另一个新的语法解构赋值。解构赋值是用来让我们从数组或者对象中提取数据赋值给不同的变量。解构赋值操作不会抛错，如果没有找到，将会用赋值过去。用过ReactNative的同学肯定见过类似下面的代码: import { Text, View } from react-native; 这就是ES2015为JavaScript带来的另一个新的语法：...

chuyao 2019-08-20 17:40 评论0 收藏0
ES2015入门系列3-箭头函数

摘要：箭头函数是用新的语法书写的匿名函数如等同于下面使用的写法可能一开始无法接受，但慢慢的会发现箭头函数带来的快感不言而喻。作为一个后端人士希望也能支持该语法。箭头函数(Arrows), 是用新的 => 语法书写的匿名函数, 如: [1, 2, 3].map(n => n + 1); 等同于下面使用ES5的写法: [1, 2, 3].map(function(n) { return n...

syoya 2019-08-20 17:37 评论0 收藏0