当前位置: 首页>后端>正文

es6文档手册 es6官方文档

@目录

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.类和对象的改进@

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

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.对象@

  1. 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 状态的过程,可能会传递一些数据,这些数据一般为错误信息,无论哪个状态都是不能逆的,当事情已经到达已决阶段后,通常要进行后续的处理,不同的已决问题,决定了不同的后续处理

es6文档手册 es6官方文档,es6文档手册 es6官方文档_迭代器,第1张

后续的处理可能会有多个,因此会形成任务队列,这些后续处理会按照顺序,当达到对应的状态后依次执行 
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.迭代器和生成器

**在说迭代器和生成器之前我们先提出几个问题**
  1. 迭代器是什么?答:是一个数据集合中按照一定的顺序,不断的取出数据的过程
  2. 迭代和遍历有什么区别?答:迭代强调是依次取出,不能确定取出的有多少,也不能保证把数据全部取出来
  3. 迭代模式:一种设计模式,用于同一迭代的过程,并且规范迭代器的规格
  4. 迭代器的功能:① 迭代器有得到下一个数据的能力 ②有后续数据的能力
  5. .迭代器 : 对迭代过程的封装,通常为对象,不同的语言中,表现出来的迭代形式不一样

直接上迭代的代码吗

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)
        }

生成器

  1. 什么是生成器 :生成器就是通过构造函数generator创建出来的对象,生成器即是一个迭代器,同时又是一个可迭代的对象
  2. 创建 只需要把函数变成generaot函数 加一个*
    // function* test() {
// }
3.生成的内部执行
        // 关键字 yield 只能在函数内部使用,表示产生一个迭代数据
        // 每一次调用生成器的next方法,会将生成器函数运行到下一个yield关键字位置
        function* test() {
            console.log(123);

        }
        const generator = test();
        generator.next();
//还没更新完有时间在继续更新



https://www.xamrdz.com/backend/3e61957543.html

相关文章: