慕课网视频课程：https://www.imooc.com/learn/955
ES6可以参考资料：
http://es6.ruanyifeng.com/
https://segmentfault.com/a/1190000004365693?utm_source=tag-newest#articleHeader7
https://www.jianshu.com/p/287e0bb867ae
前端技术教程及文档：https://github.com/cucygh/fe-material
包括Git、Webpack、Paracle、Gulp、Grunt、Rollup、Browserify、Lerna、Eslint、http-server、ast、自动化测试、Vue、React、Angular、Riot、Koala、Express、Mobx、E下JS、Three.js、d3.js、HTML5动画库、视频播放器、CSS教程、JavaScript教程、服务端教程、开源图标、视频技术、动画技术和游戏方向等等。
1.前言
jquery是es3
angular 、vue、react是es6
IE8不支持ES6，但是可以引入es5-sham.js和es5-shim.js就可以了
环境搭建：
安装git
安装完Git后，应该在Git Bash里执行如下语句：
git clone https://www.github.com/cucygh/es6-webpack.git
克隆完后 cd es6-webpack
执行：npm install / npm i
等待安装完成
npm i webpack -g
npm i webpack-dev-sever -g
执行：npm start
浏览器输入localhost:9000就可以了。
2.常量
// ES5 中常量的写法(通过设置writable属性为false，不可写来声明常量)
Object.defineProperty(window, "PI2", {
value: 3.1415926,
writable: false,
})
console.log(window.PI2)
// ES6 的常量写法（const）
const PI = 3.1415926
console.log(PI)
3.作用域
// ES5 中作用域
const callbacks = []
for (var i = 0; i <= 2; i++) {
callbacks[i] = function() {
return i * 2
}
}
console.table([
callbacks[0](),
callbacks[1](),
callbacks[2](),
])
输出结果：
因为变量提升，var i声明放在前面，所以是全局变量，函数体内i是变量，返回的是变量i与2的乘积，i*2，最后()调用时候，i都是为3，所以最后输出都是6.
或者这样理解：第一个for循环的i,不要先去理解闭包,因为i是var定义,var没有块级作用域的改变,所以在for之前还能被访问,而且for之外访问的i肯定是for循环中最大的值,所以在for之后执行的那几个callback函数,其实用的都是那个最大的i值
而let有块级作用域,在for之外,根本就没有let的存在
const callbacks2 = []
for (let j = 0; j <= 2; j++) {
callbacks2[j] = function() {
return j * 2
}
}
console.table([
callbacks2[0](),
callbacks2[1](),
callbacks2[2](),
])
用let声明的变量有块作用域的概念。他会把当前块作用域的变量的值保存下来供后面闭包使用，每循环一次生成一次新的作用域，闭包就倒向闭包作用域里面的变量。
声明一个函数，这个函数只能在这个代码块中运行，ES5中可以用立即执行函数解决：
((function() {
const foo = function() {
return 1
}
console.log("foo()===1", foo() === 1);
((function() {
const foo = function() {
return 2
}
console.log("foo()===2", foo() === 2)
})())
})())
ES6中比较简单，可以用{}就能指定一个作用域。
{
function foo() {
return 1
}
console.log("foo()===1", foo() === 1)
{
function foo() {
return 2
}
console.log("foo()===2", foo() === 2)
}
console.log("foo()===1", foo() === 1)
}
4.箭头函数
箭头函数：
function a(){
}
变成了：
//参数只有一个时候()可以省略，{}中的表达式直接作为返回值，也可以省略{}
()=>{
}
/* eslint-disable */
{
// ES3,ES5
var evens = [1, 2, 3, 4, 5];
var odds = evens.map(function(v) {
return v + 1
});
console.log(evens, odds);
};
{
// ES6 //参数只有一个时候()可以省略，{}中的表达式直接作为返回值，也可以省略{}
let evens = [1, 2, 3, 4, 5];
let odds = evens.map(v => v + 1); // (v)=>{return v+1}
console.log(evens, odds);
}
//箭头函数this指向问题
{
// ES3,ES5
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: function() {
return this.a
}
}
}
console.log(new factory().c.b());
};
{
//ES6
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: () => {
return this.a
}
}
}
console.log(new factory().c.b());
}
ES3、ES5中this是谁调用指向谁，ES6是定义时this的指向，指向new factory()的实例，所以是a。
5.默认参数/可变参数
{
// ES5\ES3 默认参数的写法(通过判断语句)
function f(x, y, z) {
if (y === undefined) {
y = 7;
}
if (z === undefined) {
z = 42
}
return x + y + z
}
console.log(f(1, 3));
}
//类似下面也可以
function a(x,y){
x = x||1;
y = y||2;
}
{
// ES6 默认参数
function f(x, y = 7, z = 42) {
return x + y + z
}
console.log(f(1, 3));
}
//对于函数必选参数的校验
{
function checkParameter() {
throw new Error('can\'t be empty')
}
function f(x = checkParameter(), y = 7, z = 42) { //没有x时，通过执行默认参数执行checkParameter函数
return x + y + z
}
console.log(f(1));
try {
f()
} catch (e) {
console.log(e);
} finally {}
}
{
// ES3,ES5 可变参数
function f() {
var a = Array.prototype.slice.call(arguments);
var sum = 0;
a.forEach(function(item) {
sum += item * 1;
})
return sum
}
console.log(f(1, 2, 3, 6));
}
{
// ES6 可变参数
function f(...a) {
var sum = 0;
a.forEach(item => {
sum += item * 1
});
return sum
}
console.log(f(1, 2, 3, 6));
}
{
// ES5 合并数组
var params = ['hello', true, 7];
var other = [1, 2].concat(params);
console.log(other);
}
{
// ES6 利用扩展运算符合并数组
var params = ['hello', true, 7];
var other = [
1, 2, ...params
];
console.log(other);
}
6.对象代理
/* eslint-disable */
// es3通过构造函数/this.get/this.set来数据保护
{
// ES3,ES5 数据保护
var Person = function() {
var data = {
name: 'es3',
sex: 'male',
age: 15
}
this.get = function(key) {
return data[key]
}
this.set = function(key, value) {
if (key !== 'sex') {
data[key] = value
}
}
}
// 声明一个实例
var person = new Person();
// 读取
console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
// 修改
person.set('name', 'es3-cname');
console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
person.set('sex', 'female');
console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
}
//ES5通过Object.defineProperty定义来保护数据（只读不写就可以保护了）
{
// ES5
var Person = {
name: 'es5',
age: 15
};
Object.defineProperty(Person, 'sex', {
writable: false,
value: 'male'
});
console.table({name: Person.name, age: Person.age, sex: Person.sex});
Person.name = 'es5-cname';
console.table({name: Person.name, age: Person.age, sex: Person.sex});
try {
Person.sex = 'female';
console.table({name: Person.name, age: Person.age, sex: Person.sex});
} catch (e) {
console.log(e);
}
}
//ES6通过 Proxy/set/get来数据保护
{
// ES6
let Person = {
name: 'es6',
sex: 'male',
age: 15
};
let person = new Proxy(Person, {
get(target, key) {
return target[key]
},
set(target,key,value){
if(key!=='sex'){
target[key]=value;
}
}
});
console.table({
name:person.name,
sex:person.sex,
age:person.age
});
try {
person.sex='female';
} catch (e) {
console.log(e);
} finally {
}
}
ES6进阶：解构赋值、模板字符串、正则扩展、数字扩展、函数扩展、Class、Module、Symbol、对象扩展、Iterator、Set和Map、Generator等等。