ES6

１：兼容性：IE10+, chrome, firefox, node.js, 移动端

处理：ａ：在线编译

ｂ：用webpack打包

２：变量：

var : 可以重复声明, 无法限制修改, 没有块级作用域

let : 不能重复声明，变量，可以修改（如：循环里面用）

const : 不能重复声明，常量，不可以修改

３：箭头函数：相当于把function去掉，在（）后面加一个＝>

如果只有一个参数时候，（）可以省略

如果只有一个return时候，｛｝可以省略

４：函数的参数：

ａ：参数扩展／展开

剩余参数...args (args可以根据自己的习惯更改)

必须放在最后一个

var show = function(a, b, ...args){
　　　　console.log(args); // [3,4,5]　　收集参数

　　　　console.log(...args);　//3,4,5　　展开数组
　　}
show(1,2,3,4,5);

var arr1 = [1,2,3]; var arr2 = [3,4,5]; var arr3 = [...arr1,...arr2]; // [1,2,3,3,4,5] 展开数组

ｂ：默认参数 : 函数的形参可以直接赋值，调用的时候如果重新赋值，则采用新的，没赋值就直接默认参数

５：解构赋值：左右两边结构必须一样，右边必须是个复合规则的实参，声明和赋值不能分开

let [{a,b},　[n1,n2,n3],　num,　str]　=　[{a:1,b:2},　[3,4,5],　6,　"解构赋值"];

６：数组：

７：字符串

字符串模板：可以把变量塞到${}里面去；还可以换行

let title = "标题";
let content = "内容";
let str2 = `
<div>${title}</div>
<div>${content}</div>
`;
console.log(str2);
// <div>标题</div>
// <div>内容</div>

startsWidth+endsWidth(可以用来分辨文件类型)

let str = "ashneksmms";
console.log(str.startsWith("a"));//true
console.log(str.endsWith("s"));//true

８：面向对象：使用class，extend, super关键字，构造器和类区分开了，class里面可以直接加方法

// 以前
// function User(name,age){
　　// this.name = name;
　　// this.age = age;
// }
// User.prototype.sayName = function(){
　　// alert(this.name);
// }
// function VipUser(name,age,level){
// User.call(this,name,age);
　　// this.level = level;
// }
// VipUser.prototype = new User();
// VipUser.prototype.constructor = VipUser;
// VipUser.prototype.sayLevel = function(){
　　// alert(this.level);
// }
// var user1 = new User("zhangfei",20);
// var user2 = new VipUser("zhangfei",20,12);
// user1.sayName();
// user2.sayLevel();

// ES6
class User{
constructor(name,age){
　　this.name = name;
　　this.age = age;
}
sayAge(){
　　alert(this.age);
}
}
class VipUser extends User{
constructor(name,age,level){
　　super(name,age);
　　this.level = level;
}
sayLevel(){
　　alert(this.level + "---" +this.name);

}
}
var user1 = new User("zhangfei",20);
var user2 = new VipUser("zhangfei",20,12);
user1.sayAge();
user2.sayLevel();

实例：面向对象的应用－React组件化

babel=browser.js

９：json: 如果值是字符串，所有名字必须用引号包起来，只能用双引号

变字符串：JSON.stringify();

解析字符串的json: JSON.parse();

let json = {
a:3,
b:4
};
alert(encodeURIComponent(JSON.stringify(json)));　//转换成字符串
var str = '{"a":12,"b":"zhangsan"}';
var json2 = JSON.parse(str);　　//字符串转换成json

简写：

如果key之前定义过，和以前定义的一样，则只需要写key就行，可以省略value

方法里面的：function可以省略；

let a = 3;
let b = 4;
let json = {
a,
b,
// show:function(){

// },
show(){
alert(this.a);
}
};

１０：Promise:(基于jquery进行了封装)使用同步的方法写异步的ajax；适合一次读一堆

Promise.all([$.ajax(url:"./arr.txt",dataType:"json"),$.ajax(url:"./json.txt",dataType:"json")],then(results=>{
// 所有的情况都成功
let [arr,json] = results;
consloe.log(arr,json);
},err=>{
// 有错误的情况下
}));
Promise.race([$.ajax(url:"./arr1.txt",dataType:"json"),$.ajax(url:"./arr2.txtt",dataType:"json")],then(results=>{
// 竞速，哪个快用哪个
},err=>{
// 有错误的情况下
}));

１１：generator函数（*）：生成器,可以让函数暂停执行，请求数据的时候，通过暂停，等数据成功之后，执行以后的代码，本质相当于通过yield把函数分割成两个函数，第一次next，执行的是第一次的函数，第二次next，执行的是第二次的函数，适合有逻辑性的，封装异步操作,不能写成箭头函数，async可以

yield: 传参，返回

function *show(num1,num2){
alert(`${num1},${num2}`);
alert("a");
let c = yield alert("b"); //
alert(c);
yield;
alert("d");
}
let oGen = show(11,22);
// console.log(oGen);
oGen.next(1);//a,b,　　yield前面的结果，参数没有用到
oGen.next(2);//2 　　yield后面的结果，参数是2
oGen.next();//d

runner(function *(){
let userDate = yield $.ajax({url:"getUserData",dataType:"json"});
if(userDate.type == "VIP"){
let data2 = yield $.ajax({url:"getVipUser",dataType:"json"});
}else{
let data2 = yield $.ajax({url:"getUsers",dataType:"json"});
}
});

１２：ES7＆８：

ａ：数组

　　includes 检查数组里面是否有某个值，返回true / false;

　　key,value,entries

ｂ：async + await : 相当于generator,但是不用runner函数来处理数据，可以使用箭头函数