开课吧前端1期.阶段4-2：es6的新特性
es6介绍：
太有用了，后面会经常用到的都是ES6,不可能是ES5,ES4 ES6：是简称， 全称为： ECMAScript标准 ECMAScript 和 JavaScript 不是相同的一个东西 ECMAScript 是一个标准，JavaScript是语言一个实现 可以有很多语言去实现，但是目前只有JavaScript这一种实现了ECMAScript标准【中间倒闭了很多】 最新的标准： ECMAScript6.0 【也叫做ECMAScript2015,一个东西】 简称：ECMA6 或者 ES6
ES6新特性：
ES6，带来几个新的东西：
不兼容——只有高级浏览器能用，但是目前还有IE7,IE8，难道要写2份代码【我们可以用ES6去写，然后靠编译解决IE7】
1.变量
var——有3个不好：
1、重复定义不报错；
var a=12;
var a=5;
alert(a);
2、没有块级作用域；
3、不能限制修改 【java有final】
let 变量，不能重复定义，有块级作用域
const 常量，不能重复定义，有块级作用域 //{}花括号就是块作用域
2、函数+参数
箭头函数——简写：
1.只有一个参数，()可以省
2.只有一个语句，还是return，{}可以省
参数扩展——剩余参数
展开数组
//1.箭头函数
<script>
function(a,b,c){
//代码
}
(a,b,c)=>{
//代码
}
</script>
//2.
<script>
function show(fn){
fn(12, 5);
}
show((a, b)=>{
alert(a*b);
});
</script>
//3.只有一个参数，()可以省略
<script>
let showb=(a)=>{
alert(a);
};
let show=a=>{
alert(a);
};
show(12);
</script>
//4.只有一个语句，return可以不写
<script>
let suma=(a,b)=>{
return a+b;
}
let sum=(a, b)=>a+b;
alert(sum(12, 5));
</script>
//5.对数据排序
<script>
let arr=[12, 5, 88, 27, 16, 35, 8];
//原来的写法
arr.sort(function(a,b){
return a-b;
});
//现在简写
arr.sort((a, b)=>a-b);
alert(arr);
</script>
//6.参数扩展
<script>
function show(a, b,c, ...arg){
alert(arg);
}
show(12, 5, 8, 31, 57, 26, 91);
</script>
//7.展开数组
<script>
let arr=[12, 5, 8];
//...arr => 12, 5, 8
function sum(a, b, c){
alert(a+b+c);
}
sum(...arr);
</script>
//8.展开数组2
<script>
let arr=[12, 5, 8];
let arr2=[6, 43, 51];
let res=[...arr, ...arr2];
alert(res);
</script>
3.模块化
我们开发不可能所有语句都写在一起，需要模块化，比如用户找回密码，封装一个通用模块。以前可以用各种相关方法来帮我们完成，比如，request.js,现在ES6自带了模块系统，exports
4、数组
3.数组
map 映射【一个对一个，原来是几个现在还是几个】
[22, 56, 89, 67] => [不及格, 不及格, 及格, 及格]
//对数字每个元素乘以2
<script>
let arr=[12, 5, 8, 99, 27];
let arr2=arr.map(function (item){
return item*2;
});
//简写
let arr2=arr.map(item=>item*2)
alert(arr2);
</script>
reduce 汇总【算平均分，不管进去多少个，出来就一个】
[..., ..., ...] => xx
//算平均分
<script>
let arr=[12, 5, 8, 99, 27, 24, 30, 13];
let result=arr.reduce((tmp, item, index)=>{
if(index<arr.length-1){
return tmp+item;
}else{
return (tmp+item)/arr.length; //最后一次算平均分
}
});
alert(result);
</script>
filter 过滤【true留下，false不返回】
[x, x, x, x, x, x] => [x, x, x...]
//返回是奇数的
<script>
let arr=[12, 5, 8, 99, 27, 24, 30, 13];
let arr2=arr.filter(item=>{
if(item%2==0){
return false;
}else{
return true;
}
});
//简写
let arr2=arr.filter(item=>item%2);
alert(arr2);
</script>
forEach 迭代、遍历【只是循环，其他啥也不干】
//遍历数组元素
<script>
let arr=[12, 5, 8, 99, 27, 24, 30, 13];
arr.forEach((item, index)=>{
//index下标
//alert('第'+index+'个是：'+item);
alert(`第${index}个是${item}`); //可以用字符串模板`
});
</script>
5、字符串
正常字符串，单双引号："xxx" 'xxx'
字符串模板，反单引号： `x${变量}xx`
字符串模板可以换行：
`abc
def`
6、ES6面向对象
多了3个东西： class、super、extends
//老版本的对象：
<script>
function User(name, pass){
this.name=name;
this.pass=pass;
}
User.prototype.login=function (){
alert('登陆成功');
};
//使用
let u = new User('zhangsan','123456');
u.login();
//ES6
class User{
constructor(name, pass){
this.name=name;
this.pass=pass;
}
login(){ //类里面的方法无需function
alert('成功');
}
}
</script>
//继承extends ,扩展的意思，从谁那扩展而来的
class VIPUser extends User{
constructor(name,pass,level){
super(name,pass);//代表父类的构造函数
}
download(){
alert('开始下载')
}
}
let v = new VIPUser('lisi','666666');
v.dowload(); //子类有的
v.login(); //父类也有
alert(v instanceof VIPUser); //true, v是User的一个实例
7、Promise
promise(承诺) 解决异步操作
同步：只有操作完事了，才往下执行 【一次只能做一个事儿】
异步：这个操作进行中，其他操作也能开始 【一次可以做多个事儿】
异步的优势：
1.用户体验好
2.高效
同步的优势：
简单
异步：
$.ajax({
url: '/get_banners',
type: 'post',
dataType: 'json',
success(){
//加载第2个
$.ajax({
url: '/get_hot',
type: 'post',
dataType: 'json',
success(){
//第3次加载
$.ajax({
url: '/get_list',
type: 'post',
dataType: 'json',
success(){
//第4次加载
$.ajax({
url: '/get_hot',
type: 'post',
dataType: 'json',
success(){
},
error(){
alert('读取失败');
}
})
},
error(){
alert('读取失败');
}
})
},
error(){
alert('读取失败');
}
})
},
error(){
alert('读取失败');
}
})
同步：
let banners=$.ajax('/get_banners');
let hot=$.ajax('/get_hot');
let list=$.ajax('/get_list');
let hot=$.ajax('/get_hot');
//Promise：中文承诺，可以状态机，成功就是成功了，不可改变。
//promise作用：就是异步操作，弄成同步的写法
//创建Promise对象
let p=new Promise(function (resolve, reject){
//resolve: 解决=sucess
//reject: 拒绝=err
$.ajax({
url:'data/1.json',
dataType:'json',
sucess(arr){//成功了
resolve(); //当成功了调用resolve，把结果传进去
},
error(err){
reject(err);
}
})
});
//怎么用，then就是然后意思，然后有2分函数，其实就是resolve，reject
p.then(()=>{}, ()=>{});
p.then((resolve)=>{
alert('成功了：'+resolve)
}, (reject)=>{
alert('失败：'+reject)
});
//promise all
let p1=new Promise(function (resolve, reject){
//resolve: 解决=sucess
//reject: 拒绝=err
$.ajax({
url:'data/1.json',
dataType:'json',
sucess(arr){//成功了
resolve(); //当成功了调用resolve，把结果传进去
},
error(err){
reject(err);
}
})
});
let p2=new Promise(function (resolve, reject){
//resolve: 解决=sucess
//reject: 拒绝=err
$.ajax({
url:'data/2.json',
dataType:'json',
sucess(arr){//成功了
resolve(); //当成功了调用resolve，把结果传进去
},
error(err){
reject(err);
}
})
});
let p3=new Promise(function (resolve, reject){
//resolve: 解决=sucess
//reject: 拒绝=err
$.ajax({
url:'data/3.json',
dataType:'json',
sucess(arr){//成功了
resolve(); //当成功了调用resolve，把结果传进去
},
error(err){
reject(err);
}
})
});
//接收数组,意思是p1,p2,p3都完成后，我才会返回then,中间有一个失败返回错误
Promise.all([p1,p2,p3]).then(
arr=>{console.log(arr)}, //因为有3个，所以接收到也是数组
err=>{ console.log('错了')}
)
//jquery的ajax本身就是个Promise
<script>
Promise.all([
$.ajax({url: 'data/1.txt', dataType: 'json'}),
$.ajax({url: 'data/2.txt', dataType: 'json'}),
$.ajax({url: 'data/3.txt', dataType: 'json'}),
]).then(arr=>{
let [a1, json, a2]=arr;
alert(a1);
alert(a2);
console.log(json);
}, err=>{
alert('失败');
});
</script>
注意，Promise如果单用不是特别好用，真正要用得特别全还是需要搭配generator，而且generator也不能单用，想把它用全了，async / await特别方便
总结：
1.Markdown——个人介绍 2.开源许可证： 【Apache v2 License，MIT License】 什么意思？ https://gitee.com/oschina/git-osc/wikis/pages/preview?sort_id=77&doc_id=10526 3.codewars的地址(专门做题的网站，每周10道题) https://www.codewars.com/users/dancingblue 4.注册github账号 https://github.com/dancingblue 5.研究“如何用babel编译ES6” ------------------------------------------------------------------------------ 下周内容： ES6&7，babel 模块化 下周讲完,算是基础都有了，开窍了。
浙公网安备 33010602011771号