ES6

1:兼容性:IE10+, chrome, firefox, node.js, 移动端

处理:a:在线编译

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

b:用webpack打包

 

2:变量:

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

let : 不能重复声明,变量,可以修改(如:循环里面用)

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

 

3:箭头函数:相当于把function去掉,在()后面加一个=>

如果只有一个参数时候,()可以省略

如果只有一个return时候,{}可以省略

 

4:函数的参数:

a:参数扩展/展开

剩余参数...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]     展开数组

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

 

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

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

 

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

 

7:字符串

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

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

 

8:面向对象:使用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

 

9: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);
}
};

 

10: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=>{
// 有错误的情况下
}));

 

11: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);
}
}
}
});
}

 

12:ES7&8:

a:数组

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

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

 

posted @ 2020-05-14 17:47  花木兰r  阅读(109)  评论(0编辑  收藏  举报