1.函数扩展
1.参数
a.参数在给定的同时可以赋予默认值
可以使用解构去设置参数
b.rest参数(剩余项解构类似)
...变量名:将剩余的实际参数都赋值给变量
简化了arguments的操作
2.箭头函数
箭头左侧为参数,箭头右侧为函数体:
1.var say=a=>a
如果左侧参数为一个,可以不加(),如果箭头右侧只有返回值,可以不加{}
相当于:
function say(a){
return a
}
2.var say=(a,b)=>a+b
如果没有形式参数,或者形式参数个数多于1个,箭头左侧加上()
相当于:
function say(a,b){
return a+b
}
3.var say=()=>{
consoel.log(a);
console.log(b);
}
如果箭头右侧代码行数较多,或者不想给返回值,需要在箭头右侧加{}
相当于:
function say(){
consoel.log(a);
console.log(b);
}
4.回调函数中的使用
arr.forEach((item)=>{
console.log(item);
});
3.this
es5:this在函数调用时确定
es6:this在函数声明时确定;
es6中的箭头函数本身没有this,this需要查看父类的上下文环境,
通过call/apply赋予的this值会被忽略
箭头函数不能作为构造函数使用
2.Set(集合)
[1,2,2,3,3,4,5,5]
1.特点:
1.类似于数组结构
2.set集合中可以存放任意数据类型,但是相同值只能存储一次
3.没有属性名/属性名和集合元素一致
2.初始化
new Set();//空集合
new Set([]/类数组);//参数为可遍历的对象
3.api
Set.prototype.size 返回Set实例的成员总数。
Set.prototype.add(value) 添加某个值,返回Set结构本身
Set.prototype.delete(value) 删除某个值,返回一个布尔值,表示删除是否成功。
Set.prototype.has(value) 返回一个布尔值,表示该值是否为Set的成员。
Set.prototype.clear() 清除所有成员,没有返回值。
Set.prototype.keys() 返回键名的遍历器
Set.prototype.values() 返回键值的遍历器
Set.prototype.entries() 返回键值对的遍历器
Set.prototype.forEach() 使用回调函数遍历每个成员
es6:
新的遍历方式:
只要是iterator(具有symbol属性),就可以使用es6遍历方式for..of
for(var item of keys){
item:每一个集合元素
}
3.Map(集合)
1.特点
1.类似对象结构
2.属性名和属性值可以为任意数据类型
2.初始化
new Map();//空集合
new Map([["name",'lisi'],["age",10]]);//
3.api
Map.prototype.size 返回 Map 结构的成员总数。
Map.prototype.set(key, value) set方法设置键名key对应的键值为value,然后返回整个map结构。
如果key已经有值,则键值会被更新,否则就新生成该键。
Map.prototype.get(key) get方法读取key对应的键值,如果找不到key,返回undefined。
Map.prototype.has(key) has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。
Map.prototype.delete(key)delete方法删除某个键,返回true。如果删除失败,返回false。
Map.prototype.clear() 清除所有成员,没有返回值
Map.prototype.keys() 返回键名的遍历器
Map.prototype.values() 返回键值的遍历器
Map.prototype.entries() 返回键值对的遍历器
Map.prototype.forEach() 使用回调函数遍历每个成员
for of
4.Iterator(遍历器:可以提供迭代的一个接口)
具有iterator的对象就可以使用for of遍历,不具备的就不可以遍历
1.产生原因
es5:arr->forEach()/for(){}
obj->for in
es6:
set:
map:
arr
obj
给所有数据集合提供一个统一接口。只要具备当前接口的,就都可以统一使用for of 循环
具有symbol属性-》iterator
2.原生具有接口的对象
array
set
map
类数组对象
Array.prototype[Symbol.iterator]=function(){
return function next(){
return {
value:
done:
}
}
}-->iterator->for of
3.遍历过程
1.创建一个迭代对象,具有next()
2.第一次调用next(),返回一个{
value:当前item
done:当前是否遍历完毕boolean
}
3.第二次调用next().返回{
value:item2
done:false
}
4.直到集合最后一个元素
next()->{
value:
done:true
}
4.手动添加接口
只要是包含Symbol.iterator属性的结构都可以使用for...of...进行遍历
var obj={
[Symbol.iterator]:function(){
return {
next:function(){
return {
value
done
}
}
}
}
}
for(var item of obj){
}
2.类机制
面向对象:
function student(){
this.name
//this.__proto__=
}
student.prototype.xxx
student.xxx=
function student(){
console.log();
}
es6:
类-》构造函数
1.空类
class Student{
//默认提供了一个constructor(){}
}
var stu1=new Student('');
2.构造方法
默认需要提供constructor方法
class Student{
constructor(name,age){
this.name=name;
this.age=age;
}
}
var stu1=new Student("tom",24);
3.原型中的方法
非静态方法
class Student{
constructor(){}
//student.prototype.say
say(){
console.log();
}
}
4.静态方法
声明在构造函数内部。只能构造函数本身调用
static key//静态属性
class stundet{
//静态属性
static num=10;
//类的实例的构造函数
constructor(){
this->new
}
//原型对象中的方法
say(){}
}
2.继承
extends关键字实现继承
class poor extends rich{
默认继承父类的所有属性
如果需要重写构造函数,必须手动设置super()
super(name,age);//借用构造函数
//rich.call(this,name,age)
}
对于子类,可以不手动设置构造函数,默认继承父类的constructor(){}
3.Symbol
es6中新增的一个基本数据类型
typeof s:symbol
设置一个独一无二的值,类似于id
不是构造函数,这是一个普通方法
1.创建变量
var s=Symbol();
var s=Symbol("描述信息");
2.应用
1.两个symbol比较永远返回false
2.声明常量
const a=10;
const a=Symbol();
3.设置给对象的属性名
var age=Symbol();
var obj={
name:"lisi",
[age]:10
}
当将一个symbol类型的值设置给属性名时,该值不能枚举,不能通过JSON.stringify()进行转换,getOwnPropertyNames(obj)无法获取
可以让对象的公有方法和私有方法进行更好的分离
1.获取值
obj[age]
2.获取symbol属性
Object.getOwnPropertySymbols(obj)
Reflect.ownKeys(obj)
4.通过类机制和模块化机制完成私有属性的设置
review----------
1.类机制
class-->构造函数
class student{
//1.静态方法
static say(){}
static num=10;
//2.实例的构造器
constructor(name){
this.name=name;
}
//3.非静态方法
//student.prototype
run(){
}
}
var stu1=new student("lisi");
继承:
extends
class poor extends rich{
constructor(){
super(name,age);//借用构造器
}
}
2.Symbol
es6新增的一个基本数据类型
是一个函数
独一无二的值
var s=Symbol("
s");
var s1=Symbol("s1");
s===s1:false
1.常量
const a=Symbol();
2.属性名
不能枚举,不能通过JSON.stringify()进行转换,不能Object.getOwnPropertyNames(obj)获取
var s=Symbol();
var obj={
[s]:10
}
obj[s]->10
Object.getOwnPropertySymbols(obj)
Reflect.ownKeys(obj)
模块化之间进行传值
var pwd=Symbol();
class student{
constructor(name,age){
this.name=name;
this[pwd]=age;
}
}
-->
var stu1=new student("lisi",20);
stu1.pwd
this[pwd]
Symbol.for(“key”)
搜索以该参数命名的值,如果有,返回,如果没有,创建一个返回并登记到全局中
//Symbol("hello");
//Symbol("hello");//不会注册到全局中
Symbol.for("hello");//创建
Symbol.for("hello");//搜索
Symbol.for("hello");//搜索
Symbol.for("hello");//搜索
Symbol.for("hello");//搜索
Symbol.keyFor();
返回一个已经登记过的symbol类型值的key
var s=Symbol("hello");
var s1=Symbol.for("hello");
Symbol.keyFor(s);//undefined
Symbol.keyFor(s1);//s1
1.Promise机制
http://47.106.244.1:8099/manager/category/findAllCategory
//1.
//2.
//3.
//4.
//5.
if(==200 ==4){
handler(request.responseText);
}
$.get(url,function(data){
data----
});
console.log();
token->sessionStorage
var token=null;
$.ajax({
success:function(){
token=data.token;
},
error:function(){}
});
//console.log(token);
//users
$.ajax({
header{
}
})
1.作用
es中没有多线程,但是可以有异步操作;
promise就是异步编程的解决方案
promise本身是一个构造函数:
2.创建
var p1=new Promise((resolve,reject)=>{
resolve:函数,当请求成功之后执行
reject:函数,当请求失败时执行
resove(data);
//执行异步操作
});
2.api
非静态:
then:
实例对象调用
p1.then(success,error);
catch:
捕获异常,不让代码报错抱死
then中的任何一个回调报错都会执行该方法
p.then(function(data){
console.log("success-then:",data);
console.log(nonum);
},function(data){
console.log("error-then:",data);
}).catch(function(reason){
console.log("catch-error--",reason);
});
finally:
无论成功失败都执行该回调
静态:
all:
all统一执行完三个函数并将成功的值存在一个数组里面返回给then进行回调输出,如有有一个执行为reject-》all的then执行失败回调
race:
all是等所有的异步操作都执行resolve再执行then方法,那么race方法就是相反的,谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调,其余的将不会再进入race的任何回调
3.应用
1.setTimeout(function(){
console.log("异步操作");
})
2.then测试
var p=new Promise((resolve,reject)=>{
setTimeout(function(){
var num=Math.ceil(Math.random()*10);
if(num>=5){
resolve(num+":num>=5");
}else{
reject(num+":num<5");
}
},2000);
});
p.then(function(data){
console.log("success-then:",data);
},function(data){
console.log("error-then:",data);
});
3.异步请求
var promise=new Promise((resolve,reject)=>{
console.log("异步请求开始啦-----");
//发送一步请求
var request=new XMLHttpRequest();
request.open("get","http://47.106.244.1:8099/manager/category/findAllCategory");
request.setRequestHeader("Accept",'application/json');
request.send();
request.onreadystatechange=function(){
if(request.readyState == 4){
if(request.status===200){
//console.log(request.response,'-----');
resolve(request.response);
}else{
reject(request.status);
}
}
}
});
17.generator函数与异步函数
function say(){
getdata();
console.log();
}
1.token
2.token->users
3.token->users->delete
//1.token
$.ajax()
//2.users
$.ajax()
//3.delete
$.ajax()
实例:
gettoken(){
}
getusers(){
}
function *g(){
//1.请求token
gettoken();
yield 1;
//2.请求user
getusers();
yield 2;
//请求delete
return 3
}
//1.
var g1=g();
g1.next();
g1.next();
function *g(){
console.log('start');
yield get();
console.log('middle');
yield 2;
console.log('end');
return 3
}
var g1 = g();
g1.next();
注意:
1.generator不是函数
2.g()不会立即执行,而是一上来就暂停,并返回一个Iterator对象
3.每次g1.next()都会打破暂停状态去执行,直到遇到下一个yield或者return
4.遇到yield时,会执行yeild后面的表达式,并返回执行之后的值,然后再次进入暂停状态,此时done: false。
5.遇到return时,会返回值,执行结束,即done: true
异步函数:
这里有几个点需要注意:
1、await只能放在async函数中。
2、await后面可以是任何对象
3、async函数返回的是一个Promise对象
4、如果await后面的Promise状态变为reject,那么会停止整个async函数
//token
function getData(url,handler){
//1.
new XMLHttpRequset
//2.
//3.
//4.
//5.
}
1.function getToken(){
getData(tokenurl,function(){
})
}
2.function getUsers(){
getData(userurl,funcutin(){});
}
3.function getdelete(){
getDate(deleteurl,function(){});
}
async function ay(){
var obj={
name
pwd
}
....
await getToken();
await getuser();
await getdelete();
}
eg:
getdata(url,handler){}
async funciton gettoken(
getdata(url,handler(){}))
async funciton getuser(){
getdate(url,handler);
}
async function deletebiid(){}
async function fn(){
//请求token
let token = await gettoken()
// 拿到token
let id = await getusers(token);
// 根据token去拿用户信息.
let other = await delete(id)
// 根据info去拿其他信息
}
// 最后我们再调用这个函数
fn()
eg2:
async function fn2(){
return 'allen'
}
fn2().then(re s => {
console.log(res); // allen
})