展开对ES6学习的第四天

Symbol

说明：当Symbol作为对象的键名去使用时若要取出这个键只能用Reflect.ownKeys()方法去取，该方法取出的键名会统一放在一个数组里或用Object.getOwnPropertySymbols()方法取，该方法的返回值也是一个数组，但是该数组成员只是由Symbol类型组成的

注意：由symbol作为属性名的属性不具备get和set方法

案例演示

	//创建一个带有Symbol作为键名的对象
	let obj = {
		name: '马小跳',
		[Symbol('say')]: ()=> console.log('大家好，我叫马小跳！'),
		[Symbol('eat')]: ()=> console.log('爱吃冰激凌')
	}
	//Reflect.ownKeys()方法
	let key = Reflect.ownKeys(obj)
	console.log(key)//["name", Symbol(say), Symbol(eat)]
	//调用其中的方法或属性
	obj[key[1]]()//'大家好我叫马小跳！'
	console.log(obj[key[0]])
	//Object.getOwnPropertySymbols()方法
	let key2 = Object.getOwnPropertySymbols(obj)
	console.log(key2)//[Symbol(say), Symbol(eat)]
	//调用其中的方法
	obj[key2[1]]()//'爱吃冰激凌'
	//由Symbol配合一些方法组成的独特方法
	//Symbol.hasInstance,该方法会使instanceof的值发生改变
	class Person{
		static[Symbol.hasInstance](para){
			console.log(para)
			return true
		}
	}
	let M_person = {}
	console.log(M_person instanceof Person)//true
	//Symbol.isConcatSpreadable,该方法会使一个数组在concat方法拼接数组时不会展开
	let arr = [1,2,3,4]
	let arr2 = ['a','b','c','d']
	arr2[Symbol.isConcatSpreadable] = false
	let arr3 = arr.concat(arr2)
	console.log(arr3)//[1,2,3,4,['a','b','c','d']]

getter与setter

说明：当一个属性拥有setter与getter方法时该属性可被称为存储器属性，获取该属性时会触发get()方法，修改该属性时会触发set()方法

案例演示

	//创建一个构造函数
	class Phone{
		get price(){
			console.log('获取属性')
		}
		set price(val){
			console.log(val+'修改属性')
		}
	}
	let M_phone = new Phone()
	M_phone.price = 'free'
	console.log(M_phone.price)//free修改属性，获取属性，undefined；先设置该属性调用set方法再取get()方法最后get返回undefined

promise初体验

说明：promise ES6引入的一种异步编程的解决方案，promise是一个构造函数，promise优化了回调地狱的写法，使之在运用过程中稍微清晰一点

回调地狱：就是指层层嵌套的事件在一起，需要一步步的去触发，嵌套越多，回调地狱越复杂

案例演示

	<button id="item">点我才能触发二号</button>
	<button id="item2">点我才能触发三号</button>
	<button id="item3">点我才能触发四号</button>
	<button id="item4">该我上场表演了</button>

	function $(id){
		return document.getElementById(id)
	}
	$('item').addEventListener('click',()=>{
		$('item2').addEventListener('click',()=>{
			$('item3').addEventListener('click',()=>{
				$('item4').addEventListener('click',()=>{
					alert('终于找到我了')
				})
			})
		})
	})

promise对象

说明：创建一个promise对象需要传入两个参数分别代表成功（resolve）与失败（reject），promise对象的输出在then()方法中

案例实现

	//创建一个promise对象,resolve传递成功之后的状态
	let p = new Promise((resolve,reject)=>{
		resolve('成功')
	})
	//then()方法接收两个参数，且两个参数都是函数，第一个函数代表成功的，第二个参数就是失败的了
	p.then(data => console.log(data),err => console.log(err))

promise接收请求

说明：与纯粹的Ajax发送请求作为一个对比

案例演示

	//Ajax发送请求
	let xhr = new XMLHttpRequest()
	xhr.open('get','https://query.asilu.com/weather/baidu')
	xhr.responseType = 'json'
	xhr.send(null)
	xhr.onreadystatechange = ()=>{
		if(xhr.readyState == 4){
			if(xhr.status >=200 && xhr.status < 300){
				console.log(xhr.response)
			}else{
				console.log(xhr.status)
			}
		}
	}
	//promise发送请求
	let p = new Promise((resolve,reject)=>{
		let xhr2 = new XMLHttpRequest()
		xhr2.open('get','https://query.asilu.com/weather/baidu')
		xhr2.responseType = 'json'
		xhr2.send(null)
		xhr2.onreadyStatechange = ()=>{
			if(xhr.readyState == 4){
				if(xhr.status >= 200 && xhr.status < 300){
					resolve(xhr.response)
				}else{
					reject(xhr.status)
				}
			}
		}
	})
	p.then(data => console.log(data),err => console.log(err))

then方法

说明：then方法返回的是一个promise对象，对象的状态由回调函数的执行结果决定
注意：如果回调函数返回的是非promise类型的属性，状态是成功的，返回值就是成功对象的值

案例实现

	const p = new Promise((resolve,reject)=>{
		resolve('成功')
	})
	const result = p.then(data=>{
		console.log(data)
		//这里的return相当于重写了then方法返回的那个promise对象
		return new Promise((resolve,reject)=>{
			reject('出错啦')//错误提示
		})
	},err=>console.log(err))
	console.log(result)//promise的pending状态在等待

catch

说明：可以说catch方法是then方法的别名，但catch方法用于捕获异常的，它只接收失败的信息

案例演示

	//创建一个promise对象
	const p = new Promise((resolve,reject)=>{
		reject('出错啦')
	})
	p.catch((err)=>console.log(err))

封装Ajax请求

说明：将大量重复性太多的代码提取出来封装成一个函数

代码实现

	function M_ajax(url){
		return new Promise((resolve,reject)=>{
			let xhr = new XMLHttpRequest()
			xhr.open('get',url)
			xhr.responseType = 'json'
			xhr.send(null)
			xhr.onreadyStatechange = ()=>{
				if(xhr.readyState == 4){
					if(xhr.status >= 200 && xhr.status < 300){
						resolve(xhr.response)
					}else{
						reject(xhr.status)
					}
				}
			}
		})
	}
	M_ajax('https://query.asilu.com/weather/baidu').then(data=>console.log(data),err=>console.log(err))