es6兼容 ie10+,chrome,fireFox、移动端、nodeis以上兼容
es6转js 处理:babel = browser.js转换,webpack中
在线转换:引入browser.js,
es6主要包含:
变量、函数、数组、字符串、面向对象、Promise、generator、模块化
js中var 的缺点:
- 可以重复申明,当然严格模式不支持;
- 无法限制修改;
- 没有块级作用域;
ES6中新增 let 和 const
let 的特点
不可重复申明,变量-可修改;
块级作用域,语法块:if,for,{} …;
const的特点
不可重复申明,常量-不可修改;
块级作用域
es6中的函数
1、箭头函数:
形式:()=> {} ;
1、如果有且只有一个参数,()可省略;
2、如果只有一个return {}可以省略;
箭头函数的意义:
简写方便、
2、函数的参数
1)参数的扩展
a.收集参数
function show(a,b,…args);
Rest Parameter必须是最后一个 b.展开数组 let arr = [1,2,3],arr2=[5,6,7]; let array =
[…arr,…arr2],array=[1,2,3,5,6,7];
2)默认参数
function show(a,b=5,c=9){
console.log(a,b,c); //1,3,9
}
show(1,3);
解构赋值
1、左右两边必须一样;
2、右边必须是个东西;
3、申明和赋值的不能分开(必须在一句话里完成);
4、可拆成自己想要的粒度。
let [a,b,c] = [1,2,3];
console.log(a,b,c); //1,2,3
let [{m,n},[n1,n2,n3],num,str]=[{m:1,n:3},[12,5,8],8,'xedggd'];
console.log(m,n1,num,str);//1 12 8 "xedggd"
//粒度
let [Json,arr]=[{m:1,n:3},[12,5,8]];
console.log(Json,arr);//{1,3} [12,5,8]
数组
1、map–映射 一个对一个
let sorce = [19,85,90,45,99];
let result = sorce.map(item => item >= 60 ? '及格' : '不及格');
alert(result);
2、reduce–汇总 一堆出来一个
应用:购物车、表格汇总
let arr = [12,45,68,9,897];
let result = arr.reduce((tmp,item,index)=>{
// index 1 开始 tmp初始为12
// alert(tmp+','+item+','+index);
console.log(tmp,index);//12,1 57,2 125,3 ...
return tmp+item;
})
console.log(result); //1031
3、filter–过滤器
let arr2 = [1,3,5,6,12,36,11];
let res2 = arr2.filter(item => item%3 === 0)
console.log(res2);// [3, 6, 12, 36]
4、forEach–循环(迭代)
let arr3 = [12,5,8,9];
arr3.forEach((item,index) => {console.log(item,index)});
字符串
1、startsWith:字符串以什么开始
let str="http://it.kaikeba.com";
if(str.startsWith('http://')){
console.log('普通网址');
}else if(str.startsWith('git://')){
console.log('git网址');
}else if(str.startsWith('svn://')){
console.log('svn网址');
}else{
console.log("不知道的...");
}
// 普通网址
2、endsWith 字符串以什么结尾
let str2 = '1.txt';
if(str2.endsWith('.txt')){
console.log('文本文件');
}else{
console.log('其他文件');
}
//结果文本文件
3、字符串模板—好东西
a.直接把东西塞到字符串中 ${东西};
b.可以折行;
//字符串模板
let a = 12;
let str3=`a${a}b`//反单引号
console.log(str3); //a12b
ES6的面向对象
js中的实现方式
// js原来的方式
function User(name,pass){
this.name = name;
this.pass = pass;
}
User.prototype.ShowName = function(){
alert(this.name);
}
User.prototype.ShowPass = function(){
alert(this.pass);
}
let u1 = new User('ysy','123456');
u1.ShowName();
u1.ShowPass();
ES6中面向对象特点
a.class关键字,构造器和类分开了;
b.class里面直接加方法;
// es6中
class User {
constructor(name,pass){
this.name = name;
this.pass = pass;
}
ShowName(){
alert(this.name);
}
ShowPass(){
alert(this.pass);
}
}
let u1 = new User('ysy','123456');
u1.ShowName();
u1.ShowPass();
面向对象中的重点是:继承
原来的方式,直接上代码(User部分代码在上面的面向对象中)
// 继承
function VipUser(name,pass,level){
User.call(name,pass); // 继承的关键
this.level = level;
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
// 子类新增的方法
VipUser.prototype.showLevel = function(){
alert(this.level);
}
let u2 = new VipUser('ysy','123345',12);
u2.showLevel(); // 12
u2.ShowName();//ysy
u2.ShowPass();//123345
注意:VipUser.prototype.showLevel 放在VipUser.prototype = new User();前面会报showLevel is not a function 的错误。
ES6中的继承 (User部分代码在上面的面向对象中)
// 2.继承
class VipUser extends User{
constructor(name,pass,level){
super(name,pass);
this.level = level;
}
showLevel(){
alert(this.level);
}
}
let u2 = new VipUser('ysy','123345',12);
u2.showLevel(); //12
u2.ShowName();//ysy
u2.ShowPass();//123345
对比一下:es6中更简单、更易读
ES6中json 对象新增
简写
1、名字与值一样(key与value) 留一个就行;
2、json中有方法,可以删 function
//json的对象简写
let a = 12;
let b = 5;
let json1={a,b,c:8} //a,b名字与值一样
console.log(json1);
let json2 ={
num: 12,
show(){ // 方法简写,省略了function
alert(this.num); // 12
}
}
Promise
直接上all与race的用法
<script>
function test() {
return new Promise((resolve,reject) =>{
setTimeout(()=>{
resolve("成功了!");
},2000)
});
}
function yibuFn(resolve, reject){
setTimeout(()=>{
resolve("失败了!");
},1000)
}
let res1Fn = test();
let res2Fn = new Promise(yibuFn);
// all 用法 所有异步都执行完
Promise.all([res1Fn,res2Fn]).then((results)=>{
let [res1,res2] = results;
console.log("all===",res1,res2); // 失败了! 成功了!
})
// 先执行完的
Promise.race([res1Fn,res2Fn]).then((results)=>{
console.log("race===",results);
})
</script>
结果:
generator与yield的介绍
generator–生成器 ,generat–生成;
普通函数–一路走到底;
generator – 中途可以停;
generator函数前带有*,与yield一起使用;
适用于 请求数据,下一步需要这个数据。
yield—放弃执行
yield既可以传参也可以返回
- generator的使用 、yield 传参
function *show(){
alert('aaa'); //aaa
let a = yield; // yield 传参
alert('bbb');
alert(a); // 5
}
let gen = show();
gen.next(12);//第一个执行过程 alert('aaa'); 以及 yield ; 第一个next 无法给yield传参
gen.next(5); // 第二次执行过程 let a ,以及 alert('bbb'); alert(a); // 5
-
generator的使用、yield 返回
function *show(){
alert(‘aaa’); //aaa
yield 12; // yield 返回
alert(‘bbb’);
// return 55;
return 55;
}
let gen = show();let result1 = gen.next();
console.log(result1); // 结果:{value: 12, done: false}
let result2 = gen.next();
console.log(result2); // 结果:{value: undefined, done: true} 如果 return 55;则:{value: 55, done: true}