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('错了');
});
//generatorrunner(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——逻辑性