ES6

最新推荐文章于 2023-09-27 16:41:26 发布

孝客

最新推荐文章于 2023-09-27 16:41:26 发布

阅读量283

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Ywm103025/article/details/85915498

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ES6

1.ES6介绍

(1) ES6是什么?

ES6是ECMA Script 6.0的简称, 就是语言最新的标准, 发布与15年左右
目标让js语言成为能支持去编写大型复杂的应用语言, 成为企业级开发语言

(2)javascript和ECMA Script区别?

javascript, Java特别火,导致名字一直是javascript
ECMA组织制定js标准,叫ECMA Script 6.0

2.变量

(1)变量有什么新特性?

可以使用let去定义变量
可以使用const去定义常量
解构赋值

(2)let作用?

var定义变量在函数外是全局作用域 [OK]
var定义变量在函数里面,是函数内作用,
	从定时开始到函数结束都能用
	有效区域: 定义开始,到函数结束
let能定义块级作用于的变量
	有效区域: 定义开始,到定义块结束

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		
		<script type="text/javascript">
			
			//复习
			//变量作用域
			//	全局作用域
			//	局部作用域=函数作用域
			
			var g_a = 10;
			
			function hello () {
				
				//console.log("g_a = "+g_a)
				
				//b使用范围
				//var b = 20;
	
				
				if(1){
					var b = 30;
				}
				
				//console.log("b = "+b)
				/*
				for(var i=0;i<10;i++){
					console.log("i="+i)
				}
				
				var i;
				console.log("new i="+i)
				*/
			    for(let i=0;i<10;i++){
					console.log("i="+i)
				}
			   
				let i;
				console.log("new i="+i)
				
				
				
			}
			//console.log("g_a = "+g_a)
			//console.log("b = "+b)
			
			hello();
			
			
		</script>
		
		
	</body>
</html>

(3)const如何使用?

const PI = 3.14;
特性: 改了之后会报错

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//定义好了,不变的
			//是常量, 定义用const
			//特性: 改的时候会报错
			const PI = 3.1415926525897932384626;
			
			PI=10;
			
			
		</script>
		
	</body>
</html>

(4)解构赋值如何使用?

赋值的一种形式
以前赋值   a=10
解构赋值,最简单理解等号左边多个值,等号右边也可以有多个值
注意: 对应的结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//a.解构赋值基本使用
			
			//数组的解构赋值
			//注意: 
			//一般情况下, 左侧如果有n个值,包含空位
			//	右侧应该有n或者大于n个值,会有未定义
			var [a,,c] = [1,2,3,4]
			console.log("a="+a)
			//console.log("b="+b)
			console.log("c="+c)
			//console.log("d="+d)
			
			//对象的解构赋值
			var team = {
				name:"1802",
				members:[
					{
						name:"lining",
						age:24
					},{
						name:"jingwen",
						age:24
					}
				]
			}
			
			//解构赋值
			var {name}  = team
			console.log(name)
			
			var {members} = team
			console.log(members)
			
			var {members:[obj1,obj2]} = team
			console.log(obj2)
			
			var {members:[{name:nnnn},obj2]} = team
			console.log(nnnn)
			
			
			//解构赋值-函数
			//一个函数, 数组中最大值和最小值
			//	返回多个数据
			function getMinAndMax(arr){
				
				if(arr.length > 0){
					var min = arr[0]
					var max = arr[0]
					for(var i=0;i<arr.length;i++){
						if(arr[i]<min){
							min = arr[i]
						}
						if(arr[i]>max){
							max = arr[i]
						}
					}
					//console.log("min ="+min)
					//console.log("max ="+max)
					return [min,max]
				}
			}
			
			var [a,b] = getMinAndMax([20,10,30,100,7,89])
			console.log("a = "+a)
			console.log("b = "+b)

		</script>
		
	</body>
</html>

3.类和对象的改进

(1)类和对象的改进?

提供了关键字 class 定义类
提供了关键字 extends 继承一个类
super()执行父类的初始化函数
提供了对象字面量, 定义一个函数

(2)class的用法

格式:
		
class 类名{
		//自动调用初始化函数
		constructor(name){
			//添加的属性
			this.name = name
		}
		say(){		
		}
	}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//js是建立在原型基础基于对象的语言
			
			//使用class去定义一个类
			//语法: class 类名{}
			//里面只能写函数
			class Person {
				
				//初始化函数
				//	constructor名字是固定的
				//	name,age,sex初始化参数
				//这个函数在new的时候自动执行
				constructor(name,age,sex) {
					
					//添加的属性
				    this.name = name
				    this.age = age
					this.sex = sex
				}

				//添加的函数
				//格式:  函数名(){}
				say() {
					console.log("name="+this.name)
					console.log("age="+this.age)
					console.log("sex="+this.sex)
				}
			}
			

			
			//从类初始化一个对象
			var zhangsan = new Person()
			zhangsan.name = "zs"
			zhangsan.age = 20;
			zhangsan.say()
			
			var lisi = new Person("lis",22,"boy")
			lisi.say()
			
		</script>
		
		
		
	</body>
</html>

(3)extends继承的用法

格式:
class 子类类名 extends 父类{
	
	constructor(name,score){
		
		super(name)
		this.score = score
	}
	
	show(){
		
	}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//js是建立在原型基础基于对象的语言
			
			//使用class去定义一个类
			//语法: class 类名{}
			//里面只能写函数
			class Person {
				
				//初始化函数
				//	constructor名字是固定的
				//	name,age,sex初始化参数
				//这个函数在new的时候自动执行
				constructor(name,age,sex) {
					
					//添加的属性
				    this.name = name
				    this.age = age
					this.sex = sex
				}

				//添加的函数
				//格式:  函数名(){}
				say() {
					console.log("name="+this.name)
					console.log("age="+this.age)
					console.log("sex="+this.sex)
				}
			}

			//从类初始化一个对象
			var zhangsan = new Person()
			zhangsan.name = "zs"
			zhangsan.age = 20;
			zhangsan.say()
			
			var lisi = new Person("lis",22,"boy")
			lisi.say()
			
			//继承/
			class Student extends Person{
				
				constructor(name,age,sex,score) {
					
					//调用父类的初始化函数constructor()
					super(name,age,sex)
					
					//添加的属性
					this.score = score
				}
				
				show(){
					this.say()
					console.log("score="+this.score)
				}
			}
			
			var zzl = new Student("lis",22,"boy",100)
			zzl.show()
			
		</script>
		
		
		
	</body>
</html>

4.函数相关

(1)es6在函数这块有哪些改进或者新特性?

默认参数
箭头函数
rest函数(可变参数的函数)

(2)默认参数是什么怎么用

function hello(x=10,y=20)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//函数的默认值
			//某个参数给一个默认值,
			//如果这个被传值了,使用值
			//	没有传值,使用默认值
			function hello (x=10,y=20) {
				return x+y
			}
			
			var v = hello()
			console.log("v = "+v)
			
			
		</script>
		
	</body>
</html>

(3)箭头函数

格式
	(参数1,参数2,....) => {		
	}	
注意1: 如果参数只有一个,可以省略()
	如果没有参数, 必须加上 ()	
注意2: {}中只有一个renturn语句,省略{}和return
注意3: 箭头函数好处1: 简化回调函数
		好处2中this指向定义的时作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var sum1 = function (x,y) {
				return x+y
			}
			
			var v = sum1(20,30)
			console.log("v = "+v)
			
			// x+y
			var sum2 = (x,y) => {
				return x+y
			}
			sum2 = (x,y) => x+y
			
			var v = sum2(20,30)
			console.log("v = "+v)
			
			// x+1
			var fun3 = (x) => {
				return x+1
			}
			//如果参数只有一个值,可以去()
			fun3 = x => {
				return x+1
			}
			//如果直接返回一个表达式,取消{}和return
			fun3 = x => x+1
			
			var v = fun3(10)
			console.log("v = "+v)	
			//有意义的
			function Person(){
				
				this.name = 'zhangsan'
				this.age = 20;
				
				/*
				var self = this
				window.setInterval(function () {
					console.log("name = "+self.name)
					console.log("age = "+self.age)
				},2000)
				*/
			   window.setInterval(() => {
			   	console.log("name = "+this.name)
			   	console.log("age = "+this.age)
			   },2000)
			      
			}
			let p = new Person()	
		</script>
		
	</body>
</html>

(4)rest参数

作用: 定义变参的函数
语法: function fun(a,b, ...list)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//rest参数
			function func(a,b, ...list){
				console.log("a = "+a)
				console.log("b = "+b)
				
				for(var i=0; i<list.length; i++){
					var p = list[i]
					console.log("p="+p)
				}
			}
			func(10,20,"a","b","c")
			
			
		</script>
		
	</body>
</html>

5.数组相关

(1)数组新的特性有哪些?

扩展运算符 ...
for-of遍历	直接获取数组的值
Array.from()  对象转数组(有要求)
Array.of
Array.prototype.copyWithIn()
Array.prototype.find()

(2) …用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var arr = [10,20,30,40]
			console.log(['a','b',arr])
			//这种用法之下, 数组的值展开了
			console.log(['a','b',...arr])
			
			//解构中,如果某个值是...b,剩下数组值获取到
			var [a,...b] = [1,2,3,4]
			console.log("a = "+a)
			console.log("b = "+b)
			//console.log("c = "+d)
			//console.log("d = "+d)
			
			
		</script>
		
	</body>
</html>

(3)for-of

格式:  for(var v of arr){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var arr = [10,20,30,40]
			
			for(var i=0; i<arr.length; i++){
				var v = arr[i]
				console.log("v="+v)
			}
			console.log("======")
			for(var k in arr){
				console.log("k="+k)
				console.log("v="+arr[k])
			}
			console.log("======")
			//for-of遍历数组, 直接拿到就是值
			for(var v of arr){
				console.log("v="+v)
			}
			
		</script>
		
	</body>
</html>

(4)Array.from()如何使用?

对象转数组
有要求,
	1.对象有length
	2.有对应的序号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var dict = {
				"0":"aa",
				"1":"bb",
				"3":"cc",
				length:3
			}
			
			var arr = Array.from(dict)
			console.log(arr)
			
		</script>
		
	</body>
</html>

(5)Array.of多个值转一个数组

例子: var arr = Array.of(1,2,3,4,5)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			

			
			var arr = Array.of(1,2,3,4,5)
			console.log(arr)
			
		</script>
		
	</body>
</html>

(6)Array.prototype.copyWithIn()

数组内数据复制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var arr = [10,20,30,40,50,60]
			
			//参数1: target
			//参数2: start
			//参数3: end
			//把start开始到end(不算end)的值, 复制到target位置
			arr.copyWithin(0,2,4)
			console.log(arr)
			
		</script>
		
	</body>
</html>

(7)Array.prototype.find() 是查找数据

//根据你传入匿名函数中条件, 返回第一个查找的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var arr = [10,5,40,45,50,20]
			
			//根据你传入匿名函数中条件, 返回第一个查找的值
			var v = arr.find(function(value,index,arr){
				return value>43
			})
			
			console.log("v = "+v)
			
		</script>
		
	</body>
</html>

6.字符串相关

(6.1)新特性有哪些?

编码	
for-of
字符串查找(常用)
	includes 是否包含
	startWith 前缀
	endWith 后缀
重复 repeat()
补位
	padStart()
	padEnd()
模板字符串

(2)编码

var c = "吉"
var c = "\uXXXX\uXXXX"
var c = "\u{xxx}"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var c = "吉";
			var c = "\uD842\uDFB7";
			console.log("c ="+c+" len="+c.length)
			
		</script>
		
	</body>
</html>

(3)for-of

for(var c of str){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var str = "abcdedf";
			
			for(var c of str){
				console.log("c = "+c)
			}
			
		</script>
		
	</body>
</html>

(4)字符串查找(常用)

includes 是否包含
startWith 前缀
endWith 后缀

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var str = "http://www.qq.com/a.php";
			
			console.log(""+str.startsWith("http://"))
			console.log(""+str.includes("qq.com"))
			console.log(""+str.endsWith(".php"))

		</script>
		
	</body>
</html>

(5)重复 repeat()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var str = "我很美,"
			str = str.repeat(10000)
			console.log("str: "+str)
			
	
		</script>
		
	</body>
</html>

(6)补位

padStart()
padEnd()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var num = "5";
			//小数点前不到3位补0
			console.log(num.padStart(3,'0'))
			console.log(num.padEnd(4,'0'))
			
	
		</script>
		
	</body>
</html>

(7)模板字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var a = 10;
			var b = 20;
			var c = 30;
			console.log("a="+a+" b="+b+" c="+c)
			
			//左右两侧是``, 里面变量用 ${}包含,输出变成对应的值
			console.log(`a=${a} b=${b} c=${c}`)
			
			var html = "<div><li>1</li><li>2</li></div>"
			console.log("html = "+html)
			
			var html = "<div><li>"+a+"</li> \
				<li>"+b+"</li> \
				</div>"
			console.log("html = "+html)
			
			//好处1: 能换行
			//好处2: 里面的值${}直接显示
			var html =`<div><li>${a}</li>
				<li>${b}</li>
				</div>`
			console.log("html = "+html)
			
		</script>
		
	</body>
</html>

7.新的数据类型

(1)es提供新的数据类型有哪些?

Map映射, 存储多个键值对数据, 类似对象
Set集合, 存储多个不重复的数据

(2)Map的用法

创建Map:   new Map()
存储值		map.set(key,value)
获取值		map.get(key)
遍历			for(var [k,v] of map)
删除值		map.delete(k)
清空			map.clear()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">	
			var map = new Map();
			map.set("name","hanmeimei")
			map.set("age",20)
			map.set("sex","girl")
			var n = map.get("name")
			console.log("n="+n)
			for(var [k,v] of map){
				console.log("k="+k+" v="+v)
			}

		</script>

	</body>
</html>

(3)Set用法

创建Set:		new Set()
添加值:		set.add()
删除值:		set.delete()
清空:		set.clear()
遍历:		for(var v in set.keys())

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script>
			//理解为一个数组,但是数据不能重复
			var set = new Set()
			set.add(10)
			set.add(10)
			set.add(20)
			set.add(20)
			
			for(var v of set.values()){
				console.log("v = "+v)
			}
			
		</script>
		
	</body>
</html>

8.proxy 代理

(1)proxy是什么

一种监控对象的属性改变的一种机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var car = {
				speed:100,
				mark:"BMW"
			}
			
			var p = new Proxy(car,{
				//获取值的时候执行这个
				//target=car
				//key属性名
				//receiver当前proxy对象
				get(target,key,receiver){
					console.log("get")
					
					return target[key]
				},
				//设置值得时候执行这个
				//target=car
				//key属性名
				//value是新的值
				//receiver当前proxy对象
				set(target,key,value,receiver){
					console.log("set")
					
					target[key] = value
				},
			})
			
			p.speed = 200
			
			var s = p.speed
			console.log("s = "+s)
			
			console.log("s = "+car.speed)
			
			//p是car的一个代理
			//	改了p,能拦截其中get和set
			//	但是直接改car没办法拦截
			car.speed = 0
			
		</script>
		
		
	</body>
</html>

(2)怎么用

var p = new Proxy(obj,{
		get:
		set:
	})

9.Generator

(1)Generator是什么

Generator是生成器
是  状态生成器

(2)q.一个实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//状态生成器
			//	普通函数加*变成 Generator函数
			function* Person () {
				//sleep
				//eat
				//work
				//study
				//
				console.log("sleep")
				yield "sleep"
				
				console.log("eat")
				yield "eat"
				
				console.log("work")
				yield "work"
			}
			
			//执行的时候返回不是函数的返回值
			//	而是一个Generator对象
			var p = Person()
			console.log(p)
			
			var v;
			v = p.next()
			console.log(v)
			
			v = p.next()
			console.log(v)
			
			v = p.next()
			console.log(v)
			
			v = p.next()
			console.log(v)
			
			
		</script>
		
	</body>
</html>

(3)q.1和2的状态机

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//状态生成器
			//	普通函数加*变成 Generator函数
			function* Person () {
				
				while(1){
					console.log("1")
					yield "1"
					
					console.log("2")
					yield "2"
				}
			}
			
			//执行的时候返回不是函数的返回值
			//	而是一个Generator对象
			var p = Person()
			console.log(p)
			
			var v;
			v = p.next()
			console.log(v)
			
			v = p.next()
			console.log(v)
			
			v = p.next()
			console.log(v)
			
			v = p.next()
			console.log(v)
			
			
		</script>
		
	</body>
</html>

10.promise

(1)是什么

promise单词: 允诺,承诺,希望
promise是ES6提供一种异步编程解决方案

(2)异步编程

DEMO1: 异步编程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			function requestURL (url) {
				//1.最基本的使用
				//Promise是一个对象
				//	初始化传入一个匿名函数
				//	有两个参数
				//	参数1: 匿名函数
				//		resolve 解决
				//	参数2: 匿名函数
				//		reject拒绝
				var promise = new Promise(function (resolve,reject) {
					
					//模拟网络下载
					var s = Math.random()*10%3+2
					console.log(url+" start")
					setTimeout(function () {
						
						var b = 1
						if(b){
							
							console.log(url+" finish")
							resolve(url+"-data s="+s)
						}else{
							reject(url+"-error")
						}
						
					},s*1000)
				})
				
				return promise;
			}

			//只要函数前加async
			//	最后这个函数直接返回promise
			//	而不管return什么
			
			async function requestAll () {
				
				//返回一个promise
				//await作用: 等待后面表达式
				//	表达式如果是promise,等待执行完
				var d1 = await requestURL("url1")
				console.log("d1 = "+d1)
				
				var d2 = await requestURL("url2 d1")
				console.log("d2 = "+d2)
				
				var d3 = await requestURL("url3 d2")
				console.log("d3 = "+d3)
			}
			
			requestAll().then(function () {
				console.log("all end")
			})
			
		</script>
		
		
		
	</body>
</html>

DEMO2: 回调地狱

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//3个请求
			//a请求
			//b请求用到a请求的数据
			//c其你去用户b请求的数据
			
			//下载一个文件
			function requestURL (url) {
				
				//模拟网络下载
				console.log(url+" 开始下载")
				setTimeout(function () {
					
					
					console.log("b"+" 开始下载")
					setTimeout(function () {
						
						console.log("c"+" 开始下载")
						setTimeout(function () {
							
							console.log("c"+" 完成下载")
						},3000)
						
						
						console.log("b"+" 完成下载")
					},3000)
					

					
					console.log(url+" 完成下载")
				},3000)
				
			}
			
			requestURL("url1")
			
			
		</script>
		
	</body>
</html>

(3)promise使用

DEMO3: promise的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			//1.最基本的使用
			//Promise是一个对象
			//	初始化传入一个匿名函数
			//	有两个参数
			//	参数1: 匿名函数
			//		resolve 解决
			//	参数2: 匿名函数
			//		reject拒绝
			var promise = new Promise(function (resolve,reject) {
				
				//模拟网络下载
				setTimeout(function () {
					
					var b = 0
					if(b){
						resolve("data")
					}else{
						reject("error")
					}
					
				},2000)
			})
			
			promise.then(function (data) {
				console.log(data+" then")
			}).catch(function (error) {
				console.log(error+" catch")
			})
			
			
		</script>
		
		
		
	</body>
</html>

DEMO4: 多个任务串行执行(1个接1个)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			function requestURL (url) {
				//1.最基本的使用
				//Promise是一个对象
				//	初始化传入一个匿名函数
				//	有两个参数
				//	参数1: 匿名函数
				//		resolve 解决
				//	参数2: 匿名函数
				//		reject拒绝
				var promise = new Promise(function (resolve,reject) {
					
					//模拟网络下载
					setTimeout(function () {
						
						var b = 1
						if(b){
							resolve(url+"-data")
						}else{
							reject(url+"-error")
						}
						
					},2000)
				})
				
				return promise;
			}

			requestURL("url111").then(function (data) {
				console.log(data+" then")
				
				return requestURL("url222")
			}).then(function (data) {
				
				console.log(data+" then")
				return requestURL("url333")
			}).then(function (data) {
				console.log(data+" then")
				
				console.log("all end")
			})
			
			
		</script>
		
		
		
	</body>
</html>

DEMO5: 多个任务的并行执行(多个同时执行)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<h2>promise.all函数</h2>
		
		<script type="text/javascript">
			
			function requestURL (url) {
				//1.最基本的使用
				//Promise是一个对象
				//	初始化传入一个匿名函数
				//	有两个参数
				//	参数1: 匿名函数
				//		resolve 解决
				//	参数2: 匿名函数
				//		reject拒绝
				var promise = new Promise(function (resolve,reject) {
					
					//模拟网络下载
					var s = Math.random()*10%3+2
					console.log(url+" start")
					setTimeout(function () {
						
						var b = 1
						if(b){
							
							console.log(url+" finish")
							resolve(url+"-data s="+s)
						}else{
							reject(url+"-error")
						}
						
					},s*1000)
				})
				
				return promise;
			}

// 			requestURL("url111").then(function (data) {
// 				console.log(data+" then")
// 				
// 				return requestURL("url222")
// 			}).then(function (data) {
// 				
// 				console.log(data+" then")
// 				return requestURL("url333")
// 			}).then(function (data) {
// 				console.log(data+" then")
// 				
// 				console.log("all end")
// 			})
			var list = [
				requestURL("bc"),
				requestURL("player"),
				requestURL("enemy"),
			]
			Promise.all(list).then(function (results) {
				console.log(results)
			})
			
			
		</script>
		
		
		
	</body>
</html>

11.async

(1)async是什么?

aysnc是ES2017提供一种异步编程解决方案
常常依赖于promise
常常和await搭配使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			function requestURL (url) {
				//1.最基本的使用
				//Promise是一个对象
				//	初始化传入一个匿名函数
				//	有两个参数
				//	参数1: 匿名函数
				//		resolve 解决
				//	参数2: 匿名函数
				//		reject拒绝
				var promise = new Promise(function (resolve,reject) {
					
					//模拟网络下载
					var s = Math.random()*10%3+2
					console.log(url+" start")
					setTimeout(function () {
						
						var b = 1
						if(b){
							
							console.log(url+" finish")
							resolve(url+"-data s="+s)
						}else{
							reject(url+"-error")
						}
						
					},s*1000)
				})
				
				return promise;
			}

			//只要函数前加async
			//	最后这个函数直接返回promise
			//	而不管return什么
			
			async function requestAll () {
				
				//返回一个promise
				//await作用: 等待后面表达式
				//	表达式如果是promise,等待执行完
				var d1 = await requestURL("url1")
				console.log("d1 = "+d1)
				
				var d2 = await requestURL("url2 d1")
				console.log("d2 = "+d2)
				
				var d3 = await requestURL("url3 d2")
				console.log("d3 = "+d3)
			}
			
			requestAll().then(function () {
				console.log("all end")
			})
			
		</script>
		
		
		
	</body>
</html>

12.Iterator和for-of循环

Iterator是迭代器,是遍历一个对象的一种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var list = [10,20,30]
			
			for(var v of list){
				console.log("v = "+v)
			}
			
			var MyClass = {
				members:[
					"jingwen",
					"jingwei",
					"jingfeng"
				]
			}
			
			MyClass[Symbol.iterator] = function () {
				
				var index=0;
				var self = this;
				
				//需要返回一个对象,这个有一个函数叫做next()
				return {
					
					
					//有数据则返回,没数据就是返回结束
					//要去: 返回一个对象,有value和done
					next(){
						
						if(index<self.members.length){
							return {
								value:self.members[index++],
								done:false
							}
						}else{
							return {
								value:undefined,
								done:true
							}
						}
					}
					
					
				}
			}
			
			//用for-of遍历MyClass中成员
			//核心: 如果你要用for-of
			//	你的数据定义MyClass[Symbol.iterator]
			for(var v of MyClass){
				console.log(v)
			}
			
		</script>
		
	</body>
</html>

孝客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6

ES61.ES6介绍(1) ES6是什么?ES6是ECMA Script 6.0的简称, 就是语言最新的标准, 发布与15年左右目标让js语言成为能支持去编写大型复杂的应用语言, 成为企业级开发语言(2)javascript和ECMA Script区别?javascript, Java特别火,导致名字一直是javascriptECMA组织制定js标准,叫ECMA Script 6....
复制链接

扫一扫