ES6语法框图

（图片来源：菜鸟教程）

ECMAScript 6简介

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript和JavaScript的关系

一个常见的问题是，ECMAScript和JavaScript到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。日常场合，这两个词是可以互换的。

ES6特性总结

变量声明const和let

在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。

function test() {if(flag) {var str = 'hello world';} else {console.log(str);}}

function test() {var str; // 变量提升，函数最顶部if(flag) {str = 'hello man'} else {//此处访问 str 值为 undefinedconsole.log(str)}//此处访问 str 值为 undefined}

两段demo不用关心flag是否为 true or false。实际上，无论如何 test 都会被创建声明。

ES6中，我们通常用 let 和 const 来声明，let 表示变量、const 表示常量。let 和 const 都是块级作用域。怎么理解这个块级作用域？

在一个函数内部
在一个代码块内部

只要在{}花括号内的代码块即可以认为 let 和 const 的作用域。

  function aa() {if(flag) {let test = 'hello man'} else {//test 在此处访问不到console.log(test)}}

let 的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
const 声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。还有，如果 const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。

    const student = { name: 'cc' }// 没毛病student.name = 'yy'// 如果这样子就会报错了student  = { name: 'yy' }

箭头操作符

我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头操作符后可以方便地写回调了。请看下面的例子。

var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {console.log(v);
});
//ES6
array.forEach(v = > console.log(v));

箭头函数的三个特点：

不需要 function 关键字来创建函数

省略 return 关键字

继承当前上下文的 this 关键字

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；例如:

    var people = name => 'hello' + name//参数name就没有括号

类的支持

ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。

//类的定义
class Animal {//ES6中新型构造器constructor(name) {this.name = name;}//实例方法sayName() {console.log('My name is '+this.name);}
}
//类的继承
class Programmer extends Animal {constructor(name) {//直接调用父类构造器进行初始化super(name);}program() {console.log("I'm coding...");}
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I'm coding...’

增强的对象字面量

对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。具体表现在：

可以在对象字面量里面定义原型
定义方法可以不用function关键字
直接调用父类方法

这样一来，对象字面量与前面提到的类概念更加吻合，在编写面向对象的JavaScript时更加轻松方便了。现在看Javascript是不是越来越像Java。

//通过对象字面量创建对象
var human = {breathe() {console.log('breathing...');}
};
var worker = {__proto__: human, //设置此对象的原型为human,相当于继承humancompany: 'freelancer',work() {console.log('working...');}
};
human.breathe();//输出 ‘breathing...’
//调用继承来的breathe方法
worker.breathe();//输出 ‘breathing...’

函数默认参数

在ES5我们给函数定义参数默认值是怎么样？

    function action(num) {num = num || 200;//当传入num时，num为传入的值//当没传入参数时，num即有了默认值200return num;}

num传入为0的时候就是false，但是我们实际的需求就是要拿到num = 0，此时num = 200 明显与我们的实际想要的效果明显不一样。

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

    function action(num = 200) {console.log(num)}action(0) // 0action() //200action(300) //300

for of 值遍历

我们都知道for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。

var someArray = [ "a", "b", "c" ];for (v of someArray) {console.log(v);//输出 a,b,c
}

生成器部分

可以看我之前写的博客：生成器部分。在这里对一些名词做出解释。

iterator:它是这么一个对象，拥有一个next方法，这个方法返回一个对象{done,value}，这个对象包含两个属性，一个布尔类型的done和包含任意值的value
iterable: 这是这么一个对象，拥有一个obj[@@iterator]方法，这个方法返回一个iterator
generator: 它是一种特殊的iterator。反的next方法可以接收一个参数并且返回值取决与它的构造函数（generator function）。generator同时拥有一个throw方法
generator 函数: 即generator的构造函数。此函数内可以使用yield关键字。在yield出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的
yield 关键字：它可以暂停函数的执行，随后可以再进进入函数继续执行

模块

在ES6标准中，JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。

将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。下面的例子来自tutsplus:

// point.js
module "point" {export class Point {constructor (x, y) {public x = x;public y = y;}}
}// myapp.js
//声明引用的模块
module point from "/point.js";
//这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入
import Point from "point";var origin = new Point(0, 0);
console.log(origin);

之前自己学微信小程序开发的时候，用到过模块，现在才发现JS-ES6里面也有模块，这会大大减少我们的代码量。

import 和 export

import导入模块、export导出模块

//全部导入
import people from './example'//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())//导入部分
import {name, age} from './example'// 导出默认, 有且只有一个默认
export default App// 部分导出
export class App extend Component {};

在别处看到的大佬的总结：

1.当用export default people导出时，就用 import people 导入（不带大括号）

2.一个文件里，有且只能有一个export default。但可以有多个export。

3.当用export name 时，就用import { name }导入（记得带上大括号）

4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }

5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

Promise

这个特性暂时没有理解，不会使用。希望有大佬可以讲解一下。看书一直不太理解。对于异步个人表示很懵逼。

之前看到的demo(不太理解)：

//创建promise
var promise = new Promise(function(resolve, reject) {// 进行一些异步或耗时操作if ( /*如果成功 */ ) {resolve("Stuff worked!");} else {reject(Error("It broke"));}
});
//绑定处理程序
promise.then(function(result) {//promise成功的话会执行这里console.log(result); // "Stuff worked!"
}, function(err) {//promise失败会执行这里console.log(err); // Error: "It broke"
});

个人理解

ES6之前没了解的时候，把javascript当作新的语言来学习。当把javascript基础部分完全学完之后，接触到ES6，发现Javascript和Java区别越来越小。好多都大同小异。突然后悔没好好学Java (滑稽.jpg)。

以上只是个人目前学到的，后续会进行更新。

ES6&&Javascript文档学习

ES6入门文档

MDN Web Javascript

（最近学习Vue.js卡壳，没有什么项目可以上手。似乎失去了方向.....）

Mr.J--ES6特性学习笔记相关推荐

jdk7新特性学习笔记
jdk7新特性学习笔记从网络down了视频看,记录下学过的东西. 1.二进制字面量 JDK7开始,可以用二进制来表示整数(byte,short,int和long),语法:在二进制数值前面加 0b或者 ...
Java8新特性学习笔记
Java8新特性学习笔记文章目录 Java8新特性学习笔记一.接口和日期处理 1.接口增强 1.1.JDK8以前 VS JDK8 1)接口定义: 1.2.默认方法(default) 1)默认方法格 ...
阿瑶的ES6新特性学习笔记
导语: 什么是 ECMA? ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这个组织的目标是评估.开发和认可电信和计 ...
ES6新特性学习笔记
ES6, 全称 ECMAScript 6.0,弥补了ES5的不足,新增了大量的语法糖,可以使代码编写更简洁. 变量 var ES6之前声明变量用var,如下: var name = 'admin'; ...
【前端】JavaScript（包括ES6）学习笔记（重要）
本人收藏来自互联网的JavaScript笔记,仅供学习自用(⊙o⊙)哦! js之重点难点 https://www.cnblogs.com/xiaohuochai/p/5613593.html fals ...
JDK8新特性-学习笔记
雀语笔记连接: https://www.yuque.com/g/u22538081/ghlpft/zcbyis/collaborator/join?token=pofOuJabmo9rgKvS# 邀请 ...
es6深入浅出学习笔记
前言 es6不兼容问题(在低版本浏览器里面怎么用) ES6较之于ES6之前的修改变量函数数组字符串面向对象 es6面向对象的使用: <!DOCTYPE html> <htm ...
C++17新特性学习笔记
c++17最新特性笔记 1.基本语言特性这一部分介绍了 C++17中新的核心语言特性,但不包括那些专为泛型编程(即 template)设计的特性. 结构化绑定结构化绑定允许你用一个对象的元素或 ...
java8新特性学习笔记之唠唠“匿名内部类与lambda”
负一.知道啥是匿名内部类不? 要使用lambda,我觉得你至少得明白匿名内部类是个啥."o -> o.getName"是lambda表达式,"Book::getNa ...

Mr.J--ES6特性学习笔记