@目录
1.ES6介绍@
- ECMAScript第六个版本 ECMAScript 是一个语言的标准 if switch var
可以在JavaScript JavaScript ECMAscript + WEBapi(DOM、BOM) = JavaScript
ActionScript + WEBapi(DOM、BOM)= flash ES是定义标准的,js是实现者,es的历史
现在用到的最多的版本是ES3.1
2013.12ES6.0草案发布
2.变量@
var、let、const
var 具备变量提升 可以重复声明
let:
1.let声明的变量不会挂在window中,不会造成全局变量的污染
2.新增了一个块级作用域{},以前只有函数作用域,全局作用域
3.let是不允许重复声明
4.let不会有声明提前(只是人为看到的效果,实际上是有声明提前,提前临时性的死区中:Cannot access ‘num’ before initialization)
const 常量:
1.跟let完全相同 增加几个点
2.不允许被修改,不允许改变内存空间的地址
3.const声明和赋值必须一次性完成,并且后期不允许改变存储空间的地址
3.类和对象的改进@
-
提供了关键字 class 定义类
-
提供了关键字 extends 继承一个类
-
super()执行父类的初始化函数
-
提供了对象字面量, 定义一个函数
4.解构赋值:@
let [a,b,c] = [1,2,3];
console.log(a,b,c); //1,2,3
5.模板字符串 @
${表达式}字符串
- var day = "今天天气不错"
var str = "dsadasd"
// console.log(`${day}${str}玩`)
6.函数 @
-
箭头函数:
-
箭头函数:
语法:箭头函数是一个函数表达式,理论上,任何使用函数表达式都可以改成箭头函数
(参数1,参数2)… => {}
nst obj = {
count: 0,
start: function() {
setInterval(() => {
console.log(this)
this.count++; //属于直接调用函数, this指向window
console.log(this.count)
}, 1000)
},
regEvert: function() {
var that =this //备份this
window.onclick = () => {
console.log(this.count) //属于如果是DOM事件函数, this指向事件源对象
}
},
print: () => {
console.log(this)
}
}
// obj.start();
// obj.regEvert();
const a = obj.print;
a();
// 箭头函数可以用来简写
// 只有一条返回语句可以省略括号 用return 如下面这个例子
const isodd=function(num){
return num%2 !==0;
}
//简写后
const isodd = num => num % 2 !== 0;
console.log(isodd(9))
7.对象@
-
ES6新增
1.属性简写2.方法简写
function createUser(loginid, loginpwd, nickName) {
const say = function() {
console.log(loginid, loginpwd)
}
return {/ loginid,
loginpwd,
nickName,
say,
fnc() { //方法速写,不是箭头函数 this指向这个对象
console.log(this.loginid, this.loginpwd)
}
}
}
const user = createUser("01", "das", "das");
console.log(user);
user.say();
user.fnc();
3.计算属性名
const p1 = "name" //我们知道属性名,有后台返回给你的
const p2 = "age";
const p3 = "say"
const user = {
[p1]: "fyl",
[p2]: 20,
[p3]() {
console.log(this[p1], this[p2]);
}
}
console.log(user[p1])
user[p3]();
8.新APl @
es提供新的数据类型有哪些?
Map映射, 存储多个键值对数据, 类似对象
Set集合, 存储多个不重复的数据
**.Map的用法
创建Map: new Map()
存储值 map.set(key,value)
获取值 map.get(key)
遍历 for(var [k,v] of map)
删除值 map.delete(k)
清空 map.clear()
.Set用法
创建Set: new Set()
添加值: set.add()
删除值: set.delete()
清空: set.clear()
遍历: for(var v in set.keys())**
9.promise
用同步的方法去处理异步,回调和事件处理来解决异步的问题
unsettled未决阶段
settled 已决阶段
ES6事件总是从 未决阶段逐步发展到已决阶段,并且,未决阶段拥有控制通往已决阶段的能力
ES6将程序分为三种状态 Pending resolved rejected
- Pending :挂起(等待)处于未决阶段,表示事情还是挂起,最后的结果没有出来
- resolved:已处理 处于已决阶段,表示整个事情已决出现结果,并且可以按照正常的逻辑进行下去
- rejected:已拒绝 处于已决阶段,表示整个事情已决出现结果,并且一个无法按照正常逻辑进行下去的结果
把事情推向resolved 状态的过程,可能会传递一些数据,这些数据一般为错误信息,无论哪个状态都是不能逆的,当事情已经到达已决阶段后,通常要进行后续的处理,不同的已决问题,决定了不同的后续处理
后续的处理可能会有多个,因此会形成任务队列,这些后续处理会按照顺序,当达到对应的状态后依次执行
const pro = new Promise((resolve,reject) => {
未决阶段
通过调用resolve函数将promise推向已决阶段的resolve状态
通过调用reject函数将promise推向已决阶段的reject状态
resolve 和 reject 只能使用一个,如果使用了多个,也只有第一个有用
传递参数只能有一个,表示推向状态的数据
resolve({})
reject(456)
resolved 这是一个正常的已决状态,后续处理表示为 thenable
rejected 这是一个非正常的已决状态,后续处理表示为 catchable
})
举了例子
```javascript
const pro = new Promise((resolve, reject) => {
// //负责把promise对象推向 不同的状态
// resolve() //是推向完成阶段的成功阶段
// reject() //推向了一个失败的状态
// })
pro.then(data=>{
thenable函数,promise已经是已决阶段,resolve状态
},err => {
catchable reject状态
})
then(data=>{},err=>{}) //注册一个后续处理函数,当成promise为resolved状态是运行该函数,
// //promise为rejected状态的时候运行该函数的第二个参数
// catch() //注册一个后续处理函数,当成promise为rejected状态是运行该函数,习惯把失败写到catch中
构造函数成员(静态成员)
1.resolve
Promise.resolve(1)
const pro = new Promise((resolve, reject) => {
resolve(1)
})
2.reject
const pro = new Promise((resolve, reject) => {
reject(1)
})
特殊情况:如果传递是promise,则直接返回传递promise对象
看上去是不是很麻烦,所以在ES2016中 新增了两个关键字 async await 为了简化promise的写法
async 用于去修饰函数(函数声明和函数表达式),放在函数的开始位置,被修饰的函数一定返回promise对象
// 简化了promise的创建
async function test() {
// return 123;
// throw 123
}
const pro = test();
console.log(pro)
9.迭代器和生成器
**在说迭代器和生成器之前我们先提出几个问题**
- 迭代器是什么?答:是一个数据集合中按照一定的顺序,不断的取出数据的过程
- 迭代和遍历有什么区别?答:迭代强调是依次取出,不能确定取出的有多少,也不能保证把数据全部取出来
- 迭代模式:一种设计模式,用于同一迭代的过程,并且规范迭代器的规格
- 迭代器的功能:① 迭代器有得到下一个数据的能力 ②有后续数据的能力
- .迭代器 : 对迭代过程的封装,通常为对象,不同的语言中,表现出来的迭代形式不一样
直接上迭代器的代码吗
const arr = [1, 2, 3, 4, 5]
// for()
const iterator = { //用于迭代数组的对象
i: 0,
next() {
var result = {
value: arr[this.i],
done: this.i >= arr.length,
}
this.i++;
return result;
}
}
console.log(iterator); //这个对象为迭代器
console.log(iterator.next());
let data = iterator.next();
while (!data.done) {
console.log(data.value)
data = iterator.next();
}
console.log(`迭代完成`)
迭代器还提供了一个for-of循环
const divs = document.getElementsByTagName('div');
for (const item of divs) {
console.log(item)
}
生成器
-
什么是生成器 :生成器就是通过构造函数generator创建出来的对象,生成器即是一个迭代器,同时又是一个可迭代的对象
-
创建 只需要把函数变成generaot函数 加一个*
// function* test() {// }
3.生成的内部执行
// 关键字 yield 只能在函数内部使用,表示产生一个迭代数据
// 每一次调用生成器的next方法,会将生成器函数运行到下一个yield关键字位置
function* test() {
console.log(123);
}
const generator = test();
generator.next();
//还没更新完有时间在继续更新