ES6
JS新规范，包括对变量、函数等的扩展。
变量
var：可以重复定义变量。无块级作用域。let：不能重复定义变量，值可以修改。有块级作用域。const：不能重复定义，常量不可修改。有块级作用域。
块级作用域：
<script>
if(true){
var a=1;
let b=1;
}
alert(a);//不报错 弹出1
alert(b);//报错
</script>
箭头函数
- 语法：
参数 => 函数体 - 当参数只有一个时可以省略
()。 - 当返回语句只有一条
return语句时可以省略{}。
箭头函数的使用：
<script>
//以前写法
function show(arg){
alert(arg)
}
//箭头函数写法
let func=(arg)=>{
alert(arg)
}
show("arg")
func("arg")
//只有一个参数，省略（）
let func2=arg=>{
return 2*arg;
}
func2(12)
//函数体只有一条返回语句，省略{}
let func3=arg=>2*arg;
alert(func3(12))
</script>
函数参数扩展
- 语法：
... - 必须是最后一个：
function show(a,b,...arg,c){}错误
<script>
//指向剩余参数
function show(a,b,...arg){
alert(arg)//arg=3,4,5,6,7,8
}
show(1,2,3,4,5,6,7,8);
//数组扩展 此处 ...arr相当于1,2,3,4,5,6
let arr=[1,2,3,4,5,6]
show(...arr)// arg=3,4,5,6
let arr2=[7,8,9,10]
let arr3=[...arr,...arr2]
alert(arr3) //1,2,3,4,5,6,7,8,9,10
//默认参数
function show1(a,b=3,c=4){
alert(a);//12
alert(b);//2
alert(c);//4
}
show1(12,2)
</script>
解构赋值
- 左右两边结构一致。
- 右边必须是合法的。
- 声明必赋值，即声明和赋值不能分开。
<script>
let [a,b,c]=[1,2,3]
alert(a+' '+b+' '+c)//1 2 3
let {a,b,c}={1,2,3}//错误
let {a,b,c}={a:1,b:2,c:3}
alert(a+' '+b+' '+c)
let [arr1,arr2,arr3,arr4]=[{a:1,b:2,c:3},[1,2,3],3,"no message"]
console.log(arr1,arr2,arr3,arr4)
// arr1={a:1,b:2,c:3} 其后依次对应
</script>
数组
map:映射。用法：arr.map(function(item))参数接收一个方法，数组中的每个元素都会调用这个方法，方法的参数即为数组的元素(item)。返回一个数组。
//数组map方法的使用
let arr=[12,34,1,23]
let res=arr.map(function (item) {
return item*2
})
alert(res) //res=[24,68,2,46]
//map使用箭头函数 结果一样
let res2=arr.map(item=>item*2)
alert(res2) //res2=[24,68,2,46]
reduce汇总函数。用法：arr.reduce(function(temp,item,index))参数接收一个函数，其中temp为中间结果，item为数组元素，index为数组下标。返回一个结果（一个数）。
//reduce 汇总
let arr=[1,2,3,4,5,6]
let res=arr.reduce(function(temp,item,index){
return temp*item //第一次遍历时temp=第一个元素，计算后的之间结果存到temp中，计算结束返回最终结果。
})
alert(res) //res=720
filter数组过滤。用法：arr.filter(function(item))其中item为数组元素。返回过滤后的数组。
//filter 数组过滤
let arr=[3,4,9,12,31,2]
let res=arr.filter(function(item){
if(item%3==0){
return true
}else{
return false;
}
})
alert(res) //res=[3,9,12]
//filter 数组过滤 箭头函数
let arr=[3,4,9,12,31,2]
let res=arr.filter(item=>item%3==0)
alert(res) //res=[3,9,12]
foreach循环遍历。用法：arr.foreach(function(item,index))其中item为数组元素，index为数组下标。
let arr=[1,2,3,4]
arr.forEach(function(item,index){
alert(item)
if(index==arr.length-1){
alert("hello")
}
})
- 字符串拼接。用法：可以在反单引号中通过
$获取变量值进行拼接。
//字符串拼接
let title="数组遍历"
alert(`hello${title}haha`) //hello数组遍历haha
面向对象
ES6增加class关键字，类似于Java的类定义。通过extends关键字继承。
class User{
//构造函数
constructor(name,password){
this.name=name;
this.password=password;
}
//自定义方法
showProps(){
alert(this.name)
alert(this.password)
}
}
let user=new User("LiMing","123");
user.showProps();//调用方法
//子类定义
class aUser extends User{
constructor(gender,...arg){
super(...arg)
this.gender=gender
}
showProps(){
alert(this.gender)
alert(this.name)
}
showProp(){
alert(this.gender)
alert("hello")
}
}
let user1=new aUser("male","ZhangSan","123")
user1.showProps();
JSON
JSON和JS对象区别：JSON的key需要使用双引号，而JS对象的key不需要。JSON与字符串的转换：JSON.stringify(jsonObject)和JSON.parse(jsonStr)
JSON：let json={"name":"sss","pwd":"123"}
JS：let js={NAME:"sss",PWD:"123"}
let json={"a":12,"b":13}
alert(JSON.stringify(json)) //json转字符串
alert(json.a)
let jsonStr=JSON.stringify(json)
console.log(JSON.parse(jsonStr)) //字符串转JSON
JS对象还可以定义方法：
//js对象
let obj={
name:"ZhangGao",
showName(){
alert(this.name)
},
list:[1,2,3]
}
let newList=obj.list.map(item=>item*2)
alert(newList)
obj.showName();
Promise对象
- 解决异步请求的方案。
- 创建一个
Promise对象：new Promise(function(resolve,reject))；参数为一个方法，方法的参数为两个函数，其中resolve代表请求成功函数，reject代表请求失败函数。 .then(func1,func2)表示发送请求后回调的函数，请求成功调用func1函数，请求失败调用func2函数。
//Promise对象
let p1=new Promise((resolve,reject)=>{
resolve("haha成功")
});
//成功与失败函数只调用一个
p1.then(data=>{ //data表示请求成功返回的数据
alert("成功了")
alert(data) //data="haha成功"
},err=>{ //err表示请求失败的信息
alert("失败")
alert(err)
})
Promise.all([
$.ajax({url:'http://localhost:10005/backstage/api/transaction/fetchList',dataType:'jsonp'}),
$.ajax({url:'http://localhost:10005/backstage/api/transaction/fetchList',dataType:'jsonp'}),
$.ajax({url:'http://localhost:10005/backstage/api/transaction/fetchList',dataType:'jsonp'}),
]).then(data=>{
alert("所有请求成功才能调用成功回调函数")
let [res1,res2,res3]=data;
console.log(data)
alert(res1)
},err=>{
alert("只要有一个请求响应失败就调用失败回调函数")
console.log(err)
})
let p1=new Promise((resolve,reject)=>{
resolve("成功P1")
// reject("失败p1")
})
let p2=new Promise((resolve,reject)=>{
resolve("成功p2")
})
Promise.all([p1,p2]).then(data=>{
alert(data) //返回所有请求成功的数据
alert("都成功了")
},err=>{
alert(err)
alert("no success")
})
//只要有一个请求成功便调用成功回调函数
Promise.race([p1,p2]).then(data=>{
alert("race成功")
alert(data)//返回第一个成功的数据
},err=>{
alert("race失败")
alert(err)
})
Generator函数
- 功能：实现函数的暂停。
- 语法：
function *funcName(){ ...语句1,yield,...语句2 } yield关键字实现执行暂停，通过next()执行下一步。- 调用时产生一个
Generator对象。
function *func1(){
alert("a");
yield;
alert("b")
}
let gen1=func1() //生成Generator对象
gen1.next()// alert("a")
gen1.next()// alert("b")
yield通过next()传参。
function *func1(){
alert("a");
let res=yield;
alert("b")
alert(res)// res=2
}
let gen1=func1() //生成Generator对象
gen1.next(12)// alert("a")
gen1.next(2)// alert("b")
yield还可以返回值
function *func1(){
alert("a");
yield 20;
alert("b")
}
let gen1=func1() //生成Generator对象
let res1=gen1.next()// alert("a")
let res2=gen1.next()// alert("b")
console.log(res1) //{value: 20, done: false} false表示该函数还未结束
console.log(res2) //{value: undefined, done: true}
总结：yield右边及以上部分属于第一个next()；左边及以下的部分属于第二个next()。
yield*调用另外的Generator函数。
function *func1(){
alert("hello")
yield
alert("haha")
}
function *func2(){
alert("调用func1")
yield* func1()
alert("调用成功")
}
let gen2=func2();
gen2.next()
gen2.next()
async函数
- 与
Generator函数类似。调用async函数产生Promise对象。
async function func1(){
alert("hello1")
await $.ajax({url:'http://www.baidu.com',dataType:'jsonp'})
alert("hello3")
}
let gen1=func1();
gen1.then(data=>{
alert("YES")
},err=>{
alert("NO")
})
扫一扫
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
