@目录
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,35.模板字符串 @
${表达式}字符串
- 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();//还没更新完有时间在继续更新
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
