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 () {
if(1){
var b = 30;
}
for(let i=0;i<10;i++){
console.log("i="+i)
}
let i;
console.log("new i="+i)
}
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 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">
var [a,,c] = [1,2,3,4]
console.log("a="+a)
console.log("c="+c)
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]
}
}
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">
class Person {
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">
class Person {
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) {
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)
var sum2 = (x,y) => {
return x+y
}
sum2 = (x,y) => x+y
var v = sum2(20,30)
console.log("v = "+v)
var fun3 = (x) => {
return x+1
}
fun3 = x => {
return x+1
}
fun3 = x => x+1
var v = fun3(10)
console.log("v = "+v)
function Person(){
this.name = 'zhangsan'
this.age = 20;
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">
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])
var [a,...b] = [1,2,3,4]
console.log("a = "+a)
console.log("b = "+b)
</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(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]
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";
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 = "12"
console.log("html = "+html)
var html = ""+a+" \
"+b+" \
"
console.log("html = "+html)
var html =`${a}
${b}
`
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,{
get(target,key,receiver){
console.log("get")
return target[key]
},
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)
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">
function* Person () {
console.log("sleep")
yield "sleep"
console.log("eat")
yield "eat"
console.log("work")
yield "work"
}
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">
function* Person () {
while(1){
console.log("1")
yield "1"
console.log("2")
yield "2"
}
}
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) {
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 function requestAll () {
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">
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">
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) {
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) {
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;
}
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) {
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 function requestAll () {
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;
return {
next(){
if(index<self.members.length){
return {
value:self.members[index++],
done:false
}
}else{
return {
value:undefined,
done:true
}
}
}
}
}
for(var v of MyClass){
console.log(v)
}
</script>
</body>
</html>
