前一段时间学习了ES6,不过现在ES7都有啦,哈哈哈。。。。今天进来总结一下学习成果。
ES6大概分为以下几个方面:1、变量 2、函数 3、、数组方法 4、字符串 5、面向对象 6、Promise 7、generator----生成器
8、 JSON 9、模块化
一:变量
JS中:用var声明变量 特点:可以重复声明、无法限制修改、没有块级作用域
ES6中:声明变量
(1)let 特点:不能重复声明、变量---可以不断得修改、是块级作用域
(2)const 特点:不能重复声明、常量---不可以修改、是块级作用域
二:函数
特点:a、方便 如果只有一个参数,()可以省;如果只有一个return,{}可以省 b、修正this
箭头函数:1、如果只有一个参数,()可以省 2、如果只有一个return,{}可以省
例:function 名字(){} ------------------ ()=>{}
函数的参数:
1.参数的展开/扩展 和 数组的展开:
作用 :(1)收集剩余的参数 show(a,b,...args){} 注:...args必须是最后一个
(2)展开一个数组 展开后的效果,跟直接把数组的内容写在定义出一样 例:...args => 1,2,3
2.默认参数
结构赋值:1.左右两边结构必须一样 2.右边必须是合法的 3.声明和赋值不能分开(必须在一句语句里完成)
例如:let [a,b,c]=[1,2,3]; let {a,b,c}={a:12,b:5,c:6};
粒度:let [json,arr,num1,str1]=[{a:12,b:5},[12,5,8],8,'cxzcv'];
let [{a,b},[n1,n2,n3],num,str]=[{a:12,b:5},[12,5,8],8,'cxzcv'];
三:数组
map----------------------映射----------------------------一个对一个
例: [12,58,99,45,91] ------------------------- [不及格,不及格,及格,不及格,及格]
[45,57,135,28] ------------------------- [
{name:'novermber0',level:0,role:0},
{name:'novermber1',level:1,role:1},
{name:'novermber2',level:2,role:2},
{name:'novermber3',level:3,role:3}
]
reduce------------------------汇总--------------------------一堆出来一个
算个总数:[12,4444,5555]=>10011
filter--------过滤器----------
let result6=arr3.filter(json=>json.price>=10000);
foreach-------循环(迭代)------
四.字符串
(1).多了两个新方法
startsWith
endsWith
(2).字符串模板
字符串连接
i.直接把东西塞到字符串里面 $(东西)
ii.可以折行
五.面向对象
1.class关键字、构造器和类分开了
2.class里面直接加方法
继承:super---超类
/*老版本的面向对象 function User(name,pass){
this.name=name;
this.pass=pass;
};
User.prototype.showName=function(){
alert(this.name);
};
User.prototype.showPass=function(){
alert(this.pass);
};
function VipUser(name,pass,level){
User.call(this,name,pass);
this.level=level;
}
VipUser.prototype=new User();
VipUser.prototype.constructor=VipUser;
VipUser.prototype.showLevel=function(){
alert(this.level);
};*/
/*ES6的面向对象*/
class User{
constructor(name,pass){
this.name=name;
this.pass=pass
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
class VipUser extends User{
constructor(name,pass,level){
super(name,pass);
this.level=level;
}
showLevel(){
alert(this.level);
}
}
面向对象应用---React
1.组件化---class
2.JSX
JSX==babel==browser.js
六.Promise
异步:操作之间没啥关系,同时进行多个操作、代码更复杂
同步:同时只能做一件事、代码更简单
异步:
ajax('/banners',function(banners_data){
ajax('/hots',function(hots_data){
ajax('/sliders',function(sliders_data){
},function(){
alert("读取失败");
});
},function(){
alert("读取失败");
});
},function(){
alert("读取失败");
});
有了Promise之后的异步:
Promise.all([$.ajax(),$.ajax()]).then(function(){
//成功了
},function(){
//失败了
});
Promise的其他用法:
Promise.reace()
同步:
let banners_data=ajax_async('/banners');
let hots_data=ajax_async('/hots');
let sliders_data=ajax_async('/sliders');
Promise---清除异步操作
*用同步一样的方法,来书写异步代码
七.generator---生成器
(1)是一个函数 普通函数---一路到底 generator函数---中间能停(相当于踹一脚走一步)
(2)yield传参
<script>
function *show(num1,num2){
alert(num1,num2);
alert('a');
let a=yield;
alert('b');
alert(a);//返回5
}
let gen=show(99,88);
gen.next();//第一个next没法给yield传参
gen.next(5);
</script>
yield返回
<script>
function *show(){
alert('a');
let a = yield 12;
alert(a);
alert('b');
return 44;
}
let gen=show();
let res1=gen.next();
console.log(res1); //{value:12,done:false}
let res2=gen.next(4);
console.log(res2);//当没有return44的时候返回结果:{value:undefine,done:true} 当有return44的时候返回结果: {value:44,done:true}
</script>
异步操作:
1.回调
2.Promise 适合:一次读一堆
3.generator 里面适合掺杂一些逻辑(逻辑性强)
八.JSON
1.JSON对象 JSON.stringify()把json变成字符串 JSON.parse()把字符串解析成JSON形式
2.简写 名字一样(key和value一样 留一个) 方法 :function一块删 show:function(){} show(){}
JSON的标准写法:1.只能用双引号 2.所有的名字必须用引号括起来