文章目录
001-ES6介绍
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。
它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
目前，大部分浏览器支持ES6。
如果不支持，需要使用Babel，将ES6转换成ES5。
002-let和const
let和var一样用于声明变量，使用let是针对var一些不好的地方。
1.let声明变量，不会出现变量提升。
console.log(a);
console.log(b);
var a = 0;
let b = 0;
按照这个顺序写
console.log(a); 输出undefined --->本应该输出错误的
console.log(b); 输出错误
2.let声明变量，是一个块作用域，即局部变量
if(1==1){
var a = 0;
let b = 0;
}
console.log(a); --->仍然能够输出
console.log(b); --->无法输出 这个才应该是正常情况
3.let不能重复声明变量，但是var可以(这样不好)
var a =0;
var a =2;
对于var来说这样是可以的，但是不合理。
所以不使用var，而使用let。
const也可用于声明变量，具有和let同上面的性质。
但是const用于声明常量，一旦被声明，无法被修改。
const也可以声明对象，无法直接修改这个对象，但是可以修改对象中的属性。
const person = {
name : '小马哥'
}
person.name = 'alex' 可以这样修改
person = {
age : 20
}
不能这样修改
在默认情况下用const,而只有你在知道变量值需要被修改的情况下使用let
003-模板字符串
上面的这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题
模板字符串：`字符串` （反引号）
字符串中需要添加变量，直接使用${变量名}就可以
004-ES6的函数
ES6的函数比ES5的函数新增了一些功能。
1.新增参数默认值
2.参数也可以是一个表达式，默认的表达式也可以是一个函数
3.新增剩余参数 rest参数————目的是代替arguments
上面代码解释：
有一个book对象
通过pick函数，输出想要输出的book对象中的哪些属性的值。
想知道哪些属性的值，就在pick函数的参数上写上该属性。
function pick(obj){
//obj一个对象，对应参数book对象
//多值参数arguments 对象 代表 所有的参数
//在这里arguments 是 book 'title' 'year' 'author'
//arguments.length = 4
//arguments[1] = 'title' arguments[2] = 'year' arguments[3] = 'author'
//result为一个新对象
}
result[arguments[i]] = obj[arguments[i]]
这样写法太麻烦。
ES6采用剩余参数：
根python的多值参数是一样的。
keys只是一个名字，可以随便写。
剩余参数即keys是一个真实的数组，而arguments是一个伪数组。
...keys必须是函数的最后一个形参
args是一个真实的数组， ['a', 'b', 'c']
而arguments是一个伪数组。
4.扩展运算符 ...
剩余运算符也是...
主要用于函数的形参，将多个实参合并到一个数组中，每个实参为数组中的元素。
扩展运算符
主要用于数组分割，将数组中的每一个元素分离，作为参数传给函数
比如选出数组中的最大值
const arr = [10,20,50,30,90,100,40];
ES5的写法：
Math.max.apply(null,arr);
ES6的写法：
Math.max(...arr);
5.ES6的箭头函数
function(){} 变为 (形参)=>{函数体}
原本写法：
let result = function(a,b){
return a+b;
}
console.log(result(1,2));
ES6的箭头函数：
let result = (a,b) => {a+b};
如果函数体只有一条返回语句，可以写为：
let result = (a,b) => (a+b);
若只有一个形参：
let result = a => (a+5); 也可以 let result = a => a+5;
let result = a => (a); 可以直接写为 let result = a => a;
若没有形参：
let result = () => 'hello';
(形参) => (一条返回语句返回值)
不管有没有形参，都要加小括号
只有一个形参，不用加小括号
返回值，可以不加小括号
返回值是对象，要加小括号
let getObj = id => ({id:id,name:'小马哥'});
console.log(getObj(1));
闭包函数如何使用箭头函数改写：
原本闭包函数的写法：
使用箭头函数改写：
注意事项：
1.箭头函数中没有this绑定
在ES5中，this指向取决于调用该函数的上下文对象，
this的指向是会变的，可能会出现问题
如下方代码，this是document调用的，但是又有PageHandler，所以this不知道指向哪个，报错。
ES5中使用bind修改指向，可以解决上述问题：
bind(this) 的this指向PageHandler
但是这种解决方法不好理解，使用ES6的箭头函数解决。
如果使用箭头函数，箭头函数中的this是没有绑定的
箭头函数中没有this的指向，箭头函数内部的this值只能通过查找作用域链来确定，即往外找
如果箭头函数被一个非箭头函数所包括，那么this的值与该函数的所属对象相等，否则 则是全局的window对象
箭头函数中的this没有指向，所以this的值不是document，往外找init的function函数的调用对象是PageHandler，所以this指向PageHandler
2.箭头函数中没有arguments对象
3.箭头函数不能使用new关键字来实例化对象
本来function(){} 函数 是一个函数对象
但是箭头函数不是一个对象，只是一个表达式
005-解构赋值
解构赋值是对赋值运算符的一种扩展
针对数组和对象 进行赋值
优点：代码书写简洁易读
ES5对象赋值：
let node = {
type:'ide',
name:'foo'
number:2
}
let type = node.type;
let name = node.name;
let number = node.number
这样赋值很麻烦，使用ES6的解构赋值。
ES6完全解构赋值：
let {type,name,number} = {node};
console.log(type,name,number);
部分解构赋值，有的属性可以不写：
let {type} = node; //type是node的属性，{}里必须是属性名，不能写别的。
console.log(type);
也可以使用rest剩余参数
let {type,...args} = node;
type 就是 'ide'
args 就是 name:'foo' 和 number:2
也可以赋默认值：
let {type,name,number=4} = {type:'aaa',name:'mike'}
ES6数组赋值：
let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a,b,c);
也有完全解构赋值和部分解构赋值
006-扩展的对象功能
1.简化对象的定义
ES5定义对象:
ES6定义对象，可以直接写入变量和函数，作为对象的属性和方法：
2.简化函数返回一个对象
function fn(x,y){
return {x,y}; //ES5写法：return {x:x,y:y}
}
3.提供给对象两个方法
is() 相当于===
NAN === NAN 是false
Object.is(NAN,NAN) 是true
assign(目标对象，对象1，对象2，等等)
多个对象合并，将对象1到最后的所以对象的属性合并到目标对象中。
let o =Object.assign({},{a:1},{b:2});
o = {
a:1,
b:2
}
007-Symbol数据类型
ES6提供了一种新的数据类型 Symbol
无法new Symbol() 这样写是错的
如果属性是symbol类型，是无法遍历的。
可以使用反射遍历，真是麻烦。
008-Set和Map集合
Set集合：
Map集合：
009-数组的扩展方法
1.from()方法将伪数组转换为真正的数组
比如arguments就是一个伪数组
转换为真正的数组：Array.from(arguments)
也可以使用扩展运算符：[...argumnets]
2.of()方法，将任意类型的一组值转换为数组
3.copyWithin()
[1,2,3,8,9,10].copyWithin(0,3) 将下标为3的元素到最后的元素赋值，替换从下标为0开始的元素
4.find()和findIndex()
find(形参为一个函数)方法，找出数组中第一个符合条件的元素
findIndex(形参为一个函数)方法，找出数组中第一个符合条件的元素的下标
5.entries() values() keys() 返回一个迭代器
6.includes()
010-迭代器iterator
const item = ['one', 'two', 'three'];
//每一个数组有一个属性是Symbol.iterator，这是一个函数，获得迭代器
const ite = item[Symbol.iterator]();
console.log(ite.next()); //{value:'one', done:false} 返回一个对象 done为false代表继续遍历
console.log(ite.next()); //{value:'two', done:false}
console.log(ite.next()); //{value:'three', done:false}
console.log(ite.next()); //{undefined, done:true} done为true代表遍历结束
011-生成器generator函数
generator函数可以通过yield关键字，将函数挂起（暂停函数执行），为改变执行流提供了可能，异步也是使用这种方案。
generator和yield已经被async和await取代了。
generator函数是分段执行的，yield语句是暂停执行，而next()是恢复执行。
生成器的应用二：部署ajax操作；使异步代码同步化。
使异步代码同步化：
想要实现的功能：
比如加载某个页面时，首先显示：加载loading...页面
然后加载完成的同时，隐藏loading...页面
这是就可以使用生成器。
使用生成器实现功能：
首先执行loadUI()
然后next() 执行showData()
showData()执行的同时又有一个next() 执行hideUI()
012-Promise对象
针对于异步编程的三种解决方法：生成器generator函数，Promise和Async/await
013-Async/await
014-class类的基本用法
使用class:
也可以使用extends继承父类
015-模块化
