es6极速学习版 2--函数扩展,map,Iterator,Symbol以及Promise机制

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
	})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值