一、ECMAScript6标准简述
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
1.1ECMAScript 和 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）。日常场合，这两个词是可以互换的。
1.2ECMAScript 的历史
ES6 从开始制定到最后发布，整整用了 15 年。
前面提到，ECMAScript 1.0 是 1997 年发布的，接下来的两年，连续发布了 ECMAScript 2.0（1998 年 6 月）和 ECMAScript 3.0（1999 年 12 月）。3.0 版是一个巨大的成功，在业界得到广泛支持，成为通行标准，奠定了 JavaScript 语言的基本语法，以后的版本完全继承。直到今天，初学者一开始学习 JavaScript，其实就是在学 3.0 版的语法。
2000 年，ECMAScript 4.0 开始酝酿。这个版本最后没有通过，但是它的大部分内容被 ES6 继承了。因此，ES6 制定的起点其实是 2000 年。
为什么 ES4 没有通过呢？因为这个版本太激进了，对 ES3 做了彻底升级，导致标准委员会的一些成员不愿意接受。ECMA 的第 39 号技术专家委员会（Technical Committee 39，简称 TC39）负责制订 ECMAScript 标准，成员包括 Microsoft、Mozilla、Google 等大公司。
2007 年 10 月，ECMAScript 4.0 版草案发布，本来预计次年 8 月发布正式版本。但是，各方对于是否通过这个标准，发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司，反对 JavaScript 的大幅升级，主张小幅改动；以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司，则坚持当前的草案。
2008 年 7 月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激烈，ECMA 开会决定，中止 ECMAScript 4.0 的开发，将其中涉及现有功能改善的一小部分，发布为 ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为 Harmony（和谐）。会后不久，ECMAScript 3.1 就改名为 ECMAScript 5。
2009 年 12 月，ECMAScript 5.0 版正式发布。Harmony 项目则一分为二，一些较为可行的设想定名为 JavaScript.next 继续开发，后来演变成 ECMAScript 6；一些不是很成熟的设想，则被视为 JavaScript.next.next，在更远的将来再考虑推出。TC39 委员会的总体考虑是，ES5 与 ES3 基本保持兼容，较大的语法修正和新功能加入，将由 JavaScript.next 完成。当时，JavaScript.next 指的是 ES6，第六版发布以后，就指 ES7。TC39 的判断是，ES5 会在 2013 年的年中成为 JavaScript 开发的主流标准，并在此后五年中一直保持这个位置。
2011 年 6 月，ECMAscript 5.1 版发布，并且成为 ISO 国际标准（ISO/IEC 16262:2011）。
2013 年 3 月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。
2013 年 12 月，ECMAScript 6 草案发布。然后是 12 个月的讨论期，听取各方反馈。
2015 年 6 月，ECMAScript 6 正式通过，成为国际标准。从 2000 年算起，这时已经过去了 15 年。
二、ES6常用语法
2.1变量的定义
ES5里面只有全局作用域，函数作用域
ES6的let带来了块级作用域，全局作用域，函数作用域
2.1.1 let定义变量
- 没有变量提升
- 带来了块级作用域
- 不能重复定义
2.1.2 const定义常量
- 没有变量提升
- 带来了块级作用域
- 不能重复定义
- 定义的时候需要赋值
- 定义之后不能修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// ES5里面只有全局作用域，函数作用域
// ES6的let带来了块级作用域，全局作用域，函数作用域
// if (true) {
// let username = "alex";
// }
const PI = 3.14;
PI = 3.2;
console.log(PI)
</script>
</body>
</html>
2.2模版字符串
2.2.1 `` 反引号
2.2.2 ${}存储变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script>
var oDiv = document.getElementById("app");
// oDiv.innerHTML = '<h1>Hello world' +
// '<h2>Hello world</h2>' +
// '<h3>hello world</h3>' +
// '</h1>'
let username = "alex";
let age = 73;
let hobby = 'girls';
oDiv.innerHTML = `<h1>Hello ${username}
<h2>hello ${age}</h2>
<h3>hello ${hobby}</h3>
</h1>
`
</script>
</body>
</html>
2.3数据的结构赋值
2.3.1 数组的解构赋值
2.3.2 对象的解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let ary = [1, 2, 3];
// let a = ary[0];
// let b = ary[1];
// let c = ary[2];
let [a, b, c, d = 1] = ary;
let obj = {
name: "alex",
age: 18
};
let { name: username, age } = obj;
console.log(username, age);
</script>
</body>
</html>
2.4、函数的扩展
2.4.1 函数参数默认值
2.4.2 箭头函数
- this的指向问题
- 定义的时候就确定了
- 普通函数的this指向调用者
- arguments不能使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// function foo(x, y=10) {
// number = y;
// return number;
// }
//
// // ret = foo(1, 2);
// // var ret = foo(1);
// var ret = foo(1, 0);
// console.log(ret);
// 第一个v代表需要传入的参数
// 第二个v代表返回值
// let func = v => v;
// let func1 = (x, y) => x;
// let func2 = (x, y) => {let result = x + y; return result;};
// console.log(func(10));
// console.log(func1(10, 20));
// console.log(func2(10, 20));
// function foo() {
// console.log(this);
// }
//
// foo();
//
// let obj = {
// func: foo,
// };
//
// obj.func();
function foo() {
setTimeout(() => console.log(this.id), 1000);
setTimeout(function () {
console.log(this.id)
}, 2000)
}
var id = 100;
foo.call({id: 10})
</script>
</body>
</html>
2.5类
2.5.1 必须要用new来实例化, 否则报错
2.5.2 必须要有constructor构造函数，如果没有，默认传入constructor(){}
2.5.3 类的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// function Timer() {
// this.t1 = 10;
// }
//
// Timer.prototype.showInfo = function () {
// console.lo(this.t1);
// }
// let timer = new Timer();
//
//
//
// class Person{
// constructor (uname, uage) {
// this.uname = uname;
// this.uage = uage;
// }
// showInfo() {
// console.log(this.uname, this.uage);
// }
// }
//
// let person = new Person("pizza", 18);
// console.log(person.uname);
class XiaoHe{
constructor (userName, userAge, userAccount=100000) {
this.userName = userName;
this.userAge = userAge;
this.userAccount = userAccount;
}
}
class Peiqi extends XiaoHe{
constructor (userName, userAge) {
super(userName, userAge);
this.userName = userName;
this.userAge = userAge;
}
showInfor() {
console.log(this.userName, this.userAge, this.userAccount);
}
}
let peiqi = new Peiqi("peiqi", 18);
peiqi.showInfor();
</script>
</body>
</html>
2.6对象的单体模式
2.6.1 解决了箭头函数中this的指向问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var obj = {
name: "Pizza",
func(){
console.log(this.name);
}
};
obj.func();
</script>
</body>
</html>