ECMAScript6.0（ES6）笔记整理

ECMAScript6（简称ES6）是 JavaScript 语言的下一代标准。在2015年6月正式发布，所以又称ES2015。由于目前并不是所有浏览器都能兼容 ES6 全部特性，但是 ES6 在实际项目中的广泛使用已成为一种趋势。所以作为一个前端开发者，ES6 的语法是我们必须掌握的。

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。Babel官网 (http://babeljs.io/) 。

一、变量的声明方式

1、var 重复声明、函数级、
2、let 不能重复声明、块级、变量
3、const         不能重复声明、块级、常量
二、函数的参数
1、...
a.收集
b.扩展
2、默认参数
三、函数——箭头函数
1、方便
a.如果只有一个参数,( )可以省
b.如果只有一个return,{ }可以省
2、修正this
this相对正常点
四、解构赋值
let [a,b,b]=[12,5,8]
1、左右两边结构必须一样
2、右边必须是个合法的东西
3、声明和赋值不能分开(必须在一句话里完成)
五、数组
1、map 映射
2、reduce 汇总 一堆->一个
3、filter         过滤器 一堆->剩下的
4、forEach      循环(迭代)
六、字符串
1、多了两个新方法
startsWith
endsWith
2、字符串模板
字符串连接
i.直接把东西塞到字符串里 ${东西}
ii.可以折行
七、ES6的面向对象——基础
1、class关键字、构造器和类分开了
class Test( ){
constructor( ){
this.xxx=
}
方法1( ){

}
方法2( ){

}
}
2、继承
class Cls2 extends Cls1{
constructor( ){
super( );
}
}
八、JSON
1、JSON对象
JSON.stringify         把对象或者数组转换成json
JSON.parse 把json转换成对象
2、简写
key和value一样时，留一个
方法(:functon一块删)
九、Promise——承诺
封装异步操作
1、Promise.all 封装异步操作 *用同步一样的方式来书写异步代码
Promise.all([
$.ajax({url:xxx,dataType:'json'}),
$.ajax({url:xxx,dataType:'json'}),
$.ajax({url:xxx,dataType:'json'}),
]).then(result=>{
//成功
},err=>{
alert('错了')
})
2、Promise.race 竞速
十、genetator-生成器
1、genetator函数——中间能停 * 搭配 yield 用next()调用,不能写成箭头函数
function *函数( ){
代码...
yeild ajax(xxx);
代码...
}
2、yield——传参 第一个 next(参数)传参失败
3、yield——返回 return
function *炒菜(菜市场买回来的){
洗菜->洗好的菜
let 干净的菜=yield 洗好的菜;
干净的菜->切->丝
let 切好的菜=yield 丝;
切好的菜->炒->熟的菜
return 熟的菜
}
十一、异步操作：
1.回调
2.Promise

3.generator

//回调
$.ajax({
  url: xxx,
  dataType: 'json'
  success(data1){
$.ajax({
  url: xxx,
  dataType: 'json'
  success(data2){
$.ajax({
  url: xxx,
  dataType: 'json'
  success(data3){
//完事儿
  },
  error(){
alert('错了');
  }
});
  },
  error(){
alert('错了');
  }
});
  },
  error(){
alert('错了');
  }
});

//Promise
Promise.all([
  $.ajax({url: xxx, dataType: 'json'}),
  $.ajax({url: xxx, dataType: 'json'}),
  $.ajax({url: xxx, dataType: 'json'})
]).then(results=>{
  //完事儿
}, err=>{
  alert('错了');

});

//generator
runner(function *(){
  let data1=yield $.ajax({url: xxx, dataType: 'json'});
  let data2=yield $.ajax({url: xxx, dataType: 'json'});
  let data3=yield $.ajax({url: xxx, dataType: 'json'});
  //完事儿
});

//带逻辑-普通回调
$.ajax({url: 'getUserData', dataType: 'json', success(userData){
  if(userData.type=='VIP'){
$.ajax({url: 'getVIPItems', dataType: 'json', success(items){
  //生成列表、显示...
}, error(err){
  alert('错了');
}});
  }else{
$.ajax({url: 'getItems', dataType: 'json', success(items){
  //生成列表、显示...
}, error(err){
  alert('错了');
}});
  }
}, error(err){
  alert('错了');
}});

//带逻辑-Promise
Promise.all([
  $.ajax({url: 'getUserData', dataType: 'json'})
]).then(results=>{
  let userData=results[0];
  if(userData.type=='VIP'){
Promise.all([
  $.ajax({url: 'getVIPItems', dataType: 'json'})
]).then(results=>{
  let items=results[0];
  //生成列表、显示...
}, err=>{
  alert('错了');
});
  }else{
Promise.all([
  $.ajax({url: 'getItems', dataType: 'json'})
]).then(results=>{
  let items=results[0];
  //生成列表、显示...
}, err=>{
  alert('错了');
});
  }
}, err=>{
  alert('失败');
});

//带逻辑-generator
runner(function *(){
  let userData=yield $.ajax({url: 'getUserData', dataType: 'json'});
  if(userData.type=='VIP'){
let items=yield $.ajax({url: 'getVIPItems', dataType: 'json'});
  }else{
let items=yield $.ajax({url: 'getItems', dataType: 'json'});
  }
  //生成、...

});

Promise——一次读一堆
generator——逻辑性