ES6

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

处理：ａ：在线编译

<script src="browser.js"></script>
<script type="text/babel">
　　let a = 5;
　　let b = 6;
　　alert(a+b);
</script>

ｂ：用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 arr=[19,72,83];
// map: 映射,一个对一个
let result = arr.map(item=>item>=60?"及格":"不及格");
//reduce：汇总，一堆出来一个
let result1 = arr.reduce(function(tmp,item,index){
// console.log(tmp,item,index);index是执行的第几次
if(index < arr.length-1){
return tmp+item;//求和
}else{
return (tmp+item)/arr.length;//求平均数
}
});
// filter：过滤器
let arr2 = [
{name: "小明",sore: 60},
{name: "小赵",sore: 30},
{name: "小张",sore: 90},
{name: "小李",sore: 70}
]
let result2 = arr2.filter(item=>item.sore >= 60);
// forEach：循环（迭代）
let result3 = arr.forEach((item,index)=>{
console.log(item,index);
})

 

７：字符串

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

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"});
}
});

 

function runner(_gen){
return new Promise((resolve,reject)=>{
var gen = _gen();
_next();
function _next(_last_res){
var res = gen.next(_last_res);
if(!res.done){
var obj = res.value;
if(obj.then){
obj.then((res)=>{
_next(res);
},(err)=>{
reject(err);
});
} else if(typeof obj == "function"){
if(obj.constructor.toString().startsWith("function GeneratorFunction()")){
runner(obj).then(res=>_next(res),reject);
}else{
_next(obj());
}
}else{
resolve(res.value);
}
}
}
});
}

 

１２：ES7＆８：

ａ：数组

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

　　key,value,entries

　　var arr = ["a","b","c","d"];
　　var json = {
　　　　a:1,
　　　　b:"ssss",
　　　　c:"dddff"
　　};
　　for(let i in arr){
　　　　alert(i); //出来的是key;
　　}
　　for(let i in json){
　　　　alert(i); //出来的是key;
　　}
　　for(let i of arr){
　　　　alert(i); //出来的是value
　　}
　　for(let i of json){
　　　　alert(i); // for of 不能用于json
　　}
keys:把所有的key拿出来,
values:把所有的values拿出来,
entries:把所有的key-value对拿出来,
for(let value of arr.values()){
　　alert(value);
}
for(let key of arr.keys()){
　　alert(key);
}
for(let entry of arr.entries()){
　　alert(entry);
}，

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

let getData = async () => {
　　let data1 = await $.ajax({url:"data1.txt", dataType:"json"});
　　let data2 = await $.ajax({url:"data2.txt", dataType:"json"});
　　let data3 = await $.ajax({url:"data3.txt", dataType:"json"});
}