变量 var&let&const
var:可以重复声明,变量可以修改,可变量提升。
let:不能重复声明,变量可以修改,块级作用域,不可变量提升。
const:不能重复声明,变量不可以修改,块级作用域,不可变量提升。
箭头函数 ()=>
如果只有一个参数,()可以省略。
如果只有一个return,{}可以省略。
//完整写法
let fun=function(a){
return a*2;
}
//箭头函数
let fun=(a)=>{return a*2}
let fun=a=>a*2
参数扩展
1.rest 参数 :收集剩余的参数——收集参数
function show(a,b,...args){
alert(args)
}
show(1,2,3,4,5) //弹窗【3,4,5】
- rest parameter必须是最后一个
2.展开数组
let arr=[1,2,3];
function show(a,b,c){
alert(a);
alert(b);
alert(c);
}
show(1,2,3)
show(...arr) //上下等同
let arr1=[1,2,3];
let arr2=[4,5,6];
let arr3=[...arr1,...arr2]; //[1,2,3,4,5,6]
//参数扩展与数组展开嵌套使用
function show(...args){
fn(...args);
}
function fn(a,b){
alert(a+b);
}
- 展开后的效果,跟直接把数组的内容写在这儿一样
3.默认参数
function show(a,b=2,c=3){
console.log(a,b,c)
}
show(1) //【1,2,3】
show(1,1) //【1,1,3】
- 传递参数时使用传递的参数,没有传递参数时使用默认的参数
解构赋值
左右两边结构必须一样
右边必须是个东西——合理
声明和赋值不能分开(必须在一句话内完成)
let [json,[num1,num2],num,str]=[{a:12,b:21},[1,2],8,'name'] //可以自定义粒度
console.log(json,num1,num2,num,str) //Object{a:12,b:21},1,2,8,"name"
数组
1.map—映射 一一对应
let arr=[1,2,3]
let result1=arr.map(function(item){
return item*2;
})
let result1=arr.map(item=>item*2)
let result2=arr.map(item=>item>2?'>2':'<2')
alert(result1); //【2,4,6】
alert(result2); //【'<2','<2','>2'】
2.reduce—汇总 一堆出来一个
let arr=[1,2,3,4];
let result=arr.reduce(function(tmp,item,index){ //tmp-中间结果 item-计算值 index-计算下标 【index从1开始,0作为第一个tmp】
if(index!=this.length-1){ //不是最后一次
return tmp+item; //求和
}else{
return (tmp+item)/arr.length;
}
})
3.filter—过滤器
let arr=[12,2,3,8,6,9];
let result=arr.filter(item=>{
if(item%3==0){
return true; //保留
}else{
return false; //过滤
}
})
let result=arr.filter(item=>item%3==0);
console.log(result) //【12,3,6,9】
4.forEach—循环(迭代)
let arr=[1,2,3,4];
arr.forEach((item,index)=>{
alert(index,":",item)
})
字符串
1.字符串新方法
startWith — 返回boolean类型
let str='abcd';
alert(str.startsWith('a')) //true
endsWith — 返回boolean类型
let str='abcd';
alert(str.endsWith('a')) //flase
2.字符串模板—[字符串连接]
let num=1;
let str=`ab${num}c`; //【``反单引号】
alert(str) //【ab1c】——可以直接将变量塞进字符串中
- 直接将东西塞进字符串中 ${东西}
可以折行
面向对象—class关键字
构造器和类分开了
class里面直接加方法
继承 extends super
//class定义
class User{
constructor(name,tel){
this.name=name;
this.tel=tel;
}
showName(){
alert(this.name);
}
showTel(){
alert(this.tel);
}
}
class VipUser extends USer{
constructor(name,tel,leave){
super(name,tel) //super 关键字用于访问父对象上的函数。
this.leave=leave;
}
showLeave(){
alert(this.leave)
}
}
JSON
1.JSON对象
//JSON的标准写法——只能用双引号,所有的名字都必须用双引号包裹
{"a":1,"b":2,"c":3}
JSON.stringify(json)——JSON字符串化【encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。】
JSON.parse(str)——将一个 JSON 字符串转换为对象
2.简写
名字和值(key&value)一样时可以简写
2.函数方法简写
//名字和值一样简写
let a=1;
let b=2;
let json={a:a,b:b,c:3};
let json={a,b,c:3};
//函数简写
let json={
a:12,
show:function(){
alert(this.a);
}
};
let json={
a:12,
show(){ //简写去掉【:function】
alert(this.a);
}
};
json.show()
Promise—简化异步操作
异步:操作之间没啥关系,同时进行多个操作【代码更复杂】
同步:同时只能做一件事【代码简单】
let p1=new Promise(function(resolve,reject){
//异步代码
//resolve——success
//reject——fail
$.ajax({
url:'arr.txt',
dataType:'json',
success(arr){ //json方法简写
resolve(arr);
},
error(err){
reject(err);
}
});
});
let p2=new Promise(function(resolve,reject){
$.ajax({
url:'arr.txt',
dataType:'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
});
})
p1.then(
function(arr){
alert('success'+arr);
},
function(err){
alert('fail'+err);
}
)
Promise.all([p1,p2]).then(
function(arr){
let [res1,res2]=arr; //解构赋值
alert('全部执行成功')
},
function(){
alert('至少有一个失败')
}
)
function createPromise(url){
return new Promise(function(resolve,reject){
$.ajax({
url,
dataType:'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
});
})
}
Promise.all([
createPromise(url1),
createPromise(url2)
]).then(
function(arr){
let [res1,res2]=arr; //解构赋值
alert('全部执行成功')
},
function(){
alert('至少有一个失败')
}
)
//Jquery现成promise——JQ中ajax返回的为promise数据
Promise.all([
$.ajax({url:'',dataType:'json'}),
$.ajax({url:'',dataType:'json'}),
]).then(
function(arr){
let [res1,res2]=arr; //解构赋值
alert('全部执行成功')
},
function(){
alert('至少有一个失败')
}
)
Promise.all([$.ajax({}),$.ajax({})]).then(results=>{
//success
},err=>{
//err
})
Promise其他操作
Promise.all
Promise.race——竞速
Generator—生成器
普通函数 —— 一路到底
generator函数 —— 中间能停 不能写成箭头函数
function *show(){ //*位置随意
alert('a');
var y=yield; //暂时放弃执行
console.log(y);
alert('b');
}
let genObj=show(); //创建generator对象
genObj.next(); //踹一脚走一步,走走停停
genObj.next(3); //传递参数
yield函数
yield传参——可以在next中传递参数
yield返回
function *show(){
alert('a');
yield 7;
alert('b');
yield 9;
alert('c');
//return 55;
}
let genObj=show();
let res1=genObj.next();
console.log(res1); //{value: 7, done: false}
let res2=genObj.next();
console.log(res2); //{value: 9, done: false}
let res3=genObj.next();
console.log(res3);//{value: undefined, done: true}
//{value: 55, done: true} 最后一步的结果依靠return
异步操作
1.回调函数嵌套
2.Promise
3.Generator
带逻辑的请求
runner(function *(){
let userData=yield $ajax({url:'getUserData',dataType:'json'});
if(userData.type=='Vip'){
let items=yield $ajax({url:'getVipItem',dataType:'json'});
}else{
let items=yield $ajax({url:'getItem',dataType:'json'});
}
//其他操作
});
Promsie适用于一次读一堆
Generator适用于逻辑性
runner详细介绍:https://zhuanlan.zhihu.com/p/68969045
runner下载链接:http://blog.zhanghuayi.tech/runner.zip
Generator — KOA
*node.js