ES6

Posted 2021-03-05 zys2019

1.介绍

ECMAScript 6简称ES6，是javascript语言的下一代标准。

2.常用属性及方法

2.1let和const

在JavaScript中，我们一般使用var来定义变量，实际上它是有缺陷的，变量的作用域只存在于function中，在if和for中不存在。而ES6就解决了这个问题。

let来定义变量，const来定义值不变的量。可以很好的替换掉var。

注意：

a.const在定义常量时，必须赋初值；

b.const一旦定义了标识符，就不能再次赋值。

c.如果const定义的是对象，那么对象的属性值可以改变。

实例1：验证const不赋初值

View Code

实例2：验证内容不能被改变

View Code

实例3：验证定义的对象的属性值可以改变

View Code

2.2对象字面量的增强写法

对象属性的增强写法　

View Code

对象方法的增强写法

View Code

2.3箭头函数

语法：将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体，相当于匿名函数。当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。当代码块中只有一行代码时，可以省略大括号进行简写。

(参数列表) => {
    //dosomthing
}

箭头中的this查找方式：向外层作用域中一层层查找，直到有this的定义。当然有的地方也可以对function()进行简写，如get:function()可以简写为get()。但是这种方式不属于箭头函数，是ES6的新特性。

实例1：无参函数的js版和es6版对比

View Code

实例2：单参函数的js版和es6版对比

View Code

实例3：多参函数的js版和es6版对比

View Code

实例4：一行代码的js版和es6版对比

View Code

通过4个实例可以看出，箭头函数写起来非常的简单，可以提供开发的效率。

2.4includes

用在字符串中，用于判断字符串是否包含某个字串。

string.includes(str)

用在数组中，用于判断数组是否包含某个元素。

array.includes(s)

实例1：判断字符串中是否包含子串

View Code

实例2：判断数组中是否包含某个元素

View Code

2.5padStart()与padEnd()

padStart()和padEnd()分别用来自动在头部补全和尾部补全，常用于自动补0。

string.padStart(len,str)
string.padEnd(len,str)

len表示最终的字符串的长度，是需要指定的。str是用于补全的字符串。

实例1：格式化时间，如果数字小于10则在前面补0（使用padStart）

View Code

3.模块化的导入与导出

在ES6中，可以使用模块化的导入与导出。导入使用关键字import，导出使用关键字export。不过在引入js的时候，需要加上type="module"。

3.1第一种方式：确定了导出的名称

index.html

other.js

comm.js

在运行的时候，必须使用服务器的方式。

如果在导入的时候导入的比较多，也可以一次性的统一导入，语法是

import * as comm from ‘./comm.js‘

comm是自定义的一个变量，就可以使用comm.name等方式来取值。

3.2第二种方式：使用default

有时候到导出的时候不命名，而在导入的时候让导入者自己进行命名就可以使用export default的方法导出，导入的时候import后面也不需要加{}了。

comm.js

other.js

需要注意的是export default在同一个模块中只能存在一个，不能出现多个。

4.Promise

异步编程的解决方案，多用在网络请求中，解决回调地狱的问题。一般在异步操作中对异步操作进行封装。

只要创建了Promise对象就会立即执行异步操作，如网络请求。异步操作之后有三种状态：pending：等待，fulfill：满足，reject：拒绝。

4.1Pomise的几种使用方式

1）使用then和catch

     new Promise((resolve, reject) => {
　　　　　　　　//异步操作
            //data为异步操作成功返回的数据，err为异步操作失败的错误信息
            if (异步操作成功) resolve(data)
            else reject(err)
        }).then(data => {
            // 异步操作成功时若调用了resolve()方法则会进入这里执行
            console.log(data)
        }).catch(err => {
            // 异步操作失败时若调用了reject()方法则会进入这里执行
            console.log(err)
        })

2）省略catch

    new Promise((resolve, reject) => {
　　　　　　　　//异步操作
            //data为异步操作成功返回的数据，err为异步操作失败的错误信息
            if (异步操作成功) resolve(data)
            else reject(err)
        }).then(data => {
            // 异步操作成功时若调用了resolve()方法则会进入这里执行
            console.log(data)
        }, err => {
            // 异步操作失败时若调用了reject()方法则会进入这里执行
            console.log(err)
        })

实例1：使用axios测试省略catch的网络请求成功，会打印请求到的数据

View Code

实例2：使用axios测试省略catch的网络请求失败，会打印失败信息

把实例1的请求url中https改为http就会请求失败，测试失败的打印。

4.2Promise的链式调用

异步操作中嵌套异步操作

    new Promise((resolve, reject) => {
　　　　　　  //异步操作
            //data为异步操作成功返回的数据，err为异步操作失败的错误信息
            if (异步操作成功) resolve(data)
            else reject(err)
        }).then(data => {
            // 异步操作成功时若调用了resolve()方法则会进入这里执行
            console.log(data)
            
            new Promise((resolve, reject) => {
　　　　　　　　　　//异步操作
                if (异步操作成功) resolve(data)
                else reject(err)
            }).then(data => {
                console.log(data)
            }, err => {
                console.log(err)
            })
        }, err => {
            // 异步操作失败时若调用了reject()方法则会进入这里执行
            console.log(err)
        })

4.3Promise中all方法

当需要同时执行两个异步操作时就可以使用all。

      Promise.all([new Promise((resolve, reject) => {
                //异步操作1
                if (异步操作成功) resolve(data)
                else reject(err)
            }),
            new Promise((resolve, reject) => {
                //异步操作2
                if (异步操作成功) resolve(data)
                else reject(err)
            })
        ]).then(results => {
            //results中包含两个操作的结果
            console.log(results)
        })

 

.