JavaScript ES6 教程笔记

目录

说明

概述与准备

一、概述

二、准备

三、语法基础

        1.变量与常量

        2.数据类型（函数和类，也算是数据类型的一种）

        值类型

        对象object        

        Map集合        

        Set集合        

        数据array

        函数fuction

        类class

        3.解构

        4.模块化开发

        5.异步编程

四、数据请求

        1.Promise

        2.fetch

        3.Axios        

说明

此笔记内容主要源于B站邓瑞编程-ES6教程

概述与准备

一、概述

        什么是ES6?

                ES6全称ECMAScript6是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。

                目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

                ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。

二、准备

        下载VS Code

        在VS Code中安装插件：Chinese（汉化VS Code），Open in Browser（将html在浏览器打开），Live Server（避免CORS报错，运行实施加载的小型服务器）

        在VS Code资源管理器中建立文件夹，在文件夹中新建html文件（html:5联想快捷输入可生成html格式内容）

三、语法基础

        1.变量与常量

        变量：程序运行中变化的量       

        let x="xxx"        let y=123

        常量：程序运行中不变的量（定义时必须赋值，且不可被重新赋值）       

        const x="xxx"       const y=123       

        优点：ES5中的var关键字没有块级作用域，容易造成变量污染。

                   ES6中的let和const都是块级作用域，且在同一代码块中不能重复声明，可读性高，不存在变量提升。在代码块中，let和const声明前都处于‘暂时性死区’。

        拓展说明：变量提升-通常 var 声明的变量会被提升到作用域的顶端，但是赋值的部分并不会被提升。

//在变量定义前就可以访问
console.log(name) //未赋值
var name = 'test'

        2.数据类型（函数和类，也算是数据类型的一种）

        值类型

        字符串string、 数值number、布尔boolean

        对象object        

        存储多个键值对的复合数据类型

        //创建对象
        let person = {
            name:'Jack',
            sex:'male',
            age:18
        }
        //添加/修改属性
        person.height = 185//添加
        person.age = 19//更新
        //delete 删除属性
        delete person.sex
        //判断对象是否包含指定属性 true/false
        let has = 'sex' in person
        //获取对象属性的数量
        Object.keys(person)//获取对象属性名数组
        Object.keys(person).length//获取对象属性的数量
        //获取对象的键值对数组
        let arr = Object.entries(person)
        //使用for...in遍历可枚举属性
        for (let key in person) {
            console.log(key,person[key]);
        }
        //使用forEach遍历的属性和值
        Object.entries(person).forEach(([key,value]) =>{
            console.log(key,value);
        })
        //清空对象
        person ={}

        Map集合        

        特殊的对象，存储多个键值对的有序集合        map类创建的对象

        //创建Map集合
        let person = new Map([
            ['name','Jack'],
            ['sex','male'],
            ['age',18]
        ])
        //向Map集合中添加/更新元素 若某一key再次set，则此key的value则会更新
        person.set('height',185)//添加
        person.set('age',19)//更新
        //delete 删除元素
        person.delete('age')
        //has 判断元素是否存在 返回值true/false
        person.has('age')
        //size 获取Map集合中的元素数量
        person.size
        //Array.from() 将Map集合转换为数组
        let arr1 = Array.from(person)
        //扩展运算符 将Map集合转换为数组
        let arr2 = [...person]
        //使用for...of遍历Map集合 [key,value]解构 解构：从数组或对象中提取出属性值赋给变量
        for (let [key,value] of person) {
            console.log(key,value);
        }
        //使用forEach遍历Map集合
        person.forEach((key,value) =>{
            console.log(key,value);
        })
        //Clear 清空Map集合
        person.clear()

        Set集合        

        存储无序且元素值不重复的集合        set类创建的对象

        //创建Set集合
        let companys = new Set(['huawei','alibaba','tencent'])
        //add 添加元素
        companys.add('netease')
        //delete 删除元素
        companys.delete('tencent')
        //has 判断元素是否存在 返回值true/false
        companys.has('tencent')
        //size 获取Set集合中的元素数量
        companys.size
        //Array.from() 将Set集合转换为数组
        let arr1 = Array.from(companys)
        //扩展运算符 将Set集合转换为数组
        let arr2 = [...companys]
        //扩展运算符用于展开可迭代对象（数组、字符串等）
        let str = '扩展运算符'
        let strArr = [...str]//['扩','展','运','算','符']
        //使用for...of遍历Set集合
        for (let item of companys) {
            console.log(item);
        }
        //使用forEach遍历Set集合
        companys.forEach(value =>{
            console.log(value);
        })
        //Clear 清空Set集合
        companys.clear()
        //数组去重 将数组转换为Set集合
        let numberArr = [3,6,3,6,45,5]
        let numberSet = new Set(numberArr)

        数据array

        可包含不同类型元素的长度可变的有序集合

        //定义数组
        let arr = [1,2]
        //push 向数组末尾添加一个或多个元素，并返回修改后的数组长度
        let length1 = arr.push(3,4)
        //unshift 向数组开头添加一个或多个元素，并返回修改后的数组长度
        let length2 = arr.unshift(4,5)
        //shift 删除数组中第一个元素，并返回被删除的元素
        let delElement1 = arr.shift()
        //pop 删除数组中最后一个元素，并返回被删除的元素
        let delElement2 = arr.pop()
        //splice 删除元素，并返回包含被删除元素的数组 splice（要删除元素的索引位置，要删除的元素数量）
        let delArr= arr.splice(2,1)
        //reverse 颠倒数组中元素的顺序
        arr.reverse()
        //sort 数组中的元素按首字母进行顺序排序
        let arr2 = ["banana","apple","orange"]
        arr2.sort()
        //sort(xxx) 数组中的元素按数值大小进行顺序排序 a-b>=0则前后俩元素不交换位置 a-b<0则前后俩元素交换位置
        let arr3 = [3,20,13,14]
        arr2.sort((a,b)=>a-b)
        //filter 筛选符合条件的元素，返回一个新数组
        let arr4 =[3,6,5,8,6,45]
        let newArr = arr4.filter((value)=>{
            return value >=6
        })
        //使用for...of循环遍历数组
        let arr5 = ["111","222","333"]
        for (let value of arr5) {
            console.log(value);
        }
        //使用forEach方法遍历数组
        arr5.forEach((value,index)=>{
            console.log(value,index);
        })

        函数fuction

        可重复执行的代码块，能接收传参并执行逻辑运算，还可以有返回值

        //函数的基本定义 可传参，可存在返回值
        function test1(paramA){
            return paramA + 1
        }
        test1(1)
        //参数默认值
        function test2(paramA = 1){
            return paramA + 1
        }
        test()
        test(2)
        //匿名函数 通常作为回调函数用于异步编程，即作为参数传递给其他函数
        let plus1 = function(a,b){
            return a+b
        }
        plus1(1,2)
        //箭头函数 也属于匿名函数
        let plus2 = (a,b)=>{
            return a+b
        }
        plus2(1,2)
        //隐式返回
        let plus3 =(a,b)=> a+b
        plus3(1,2)

        类class

        一种蓝图或模板

        //类的定义、私有属性、存取器      
        class Student{
            name
            #score //私有属性：仅在类内部可访问操作的属性 #属性
            
            constructor(name,score){
                this.name = name
                this.#score = score
            }
            //存取器 getter 获取私有属性
            get score(){
                return this.#score
            }
            //存取器 setter 设置私有属性
            set score(value) {
                this.#score = value
            }
            info(){
                return `名${this.name}, 分${this.score}`//ES6 模板字符串语法使用 `xxx ${属性}`
            }
        }

        let s = new Student('Shawn',66)
        console.log(s,s.name,s.score,s.info());
        s.score = 99
        console.log(s);
        //子类继承
        class MiddleStudent extends Student{
            school
            constructor(name,score,school){
                super(name,score)//调用父类构造函数逻辑
                this.school = school
            }

            Run(){
                return `${this.name} 去跑步了`
            }
        }

        3.解构

        从数组或对象中提取值并赋给变量

        //数组解构
        let [x,y] = [1,2]
        let [,,c] = [1,2,3]//弃元占位
        let [a,...b] = [1,2,3,4,5,6]//扩展运算符
        let [x1,y1=100] = [50]//默认值
        //两数交换 利用数组解构实现
        let x2=30
        let y2=40;//不加分号会报错
        [x2,y2] = [y2,x2]
        console.log(x2,y2);
        //对象解构
        let person ={
            name:'Shawn',
            gender:'男',
            age:18
        }
        let {name} = person
        let {name:pName,gender,age} = person
        let {address='沈阳'}=person//新增属性并赋予默认值

        4.模块化开发

        指将复杂的代码拆分为独立的模块，按功能需求拆分

        可能需要安装Live Server，解决CORS报错

        export关键字导出模块，import关键字引入模块

//main.js
let title = 'TEST'
let content = 'Test123'
let getReaders = ()=> 33

export {title,content,getReaders}//将多个变量或函数分别导出
export default {title,content,getReaders} //将多个变量或函数作为一个对象整体导出

//html中的Script
import {title as newTitle,content,getReaders} from './main.js' // as 起别名
import obj from './main.js'//将内容打包成对象引入 需js文件 export default {xxx}
obj.title
obj.content
obj.getReaders()
import * as obj from './main.js'//将内容打包成对象引入  不需js文件 export default {xxx}

        5.异步编程

        async、await（ES7语法糖）

        同步编程风格的异步编程，避免回调地狱的优解

        async:当一个函数被标记async后，该函数会返回一个Promise对象

        await:只能在async函数内部使用，加上await关键字后，当代码执行到await标记时，代码就在此处等待不继续往下执行，直到await拿到Promise对象中resolve的数据，才继续往下执行。如果是reject状态， 那么async函数会中断执行。

async function handle(){
    console.log("AAA")
    await sleep(2000).then((res) => {
        console.log(res)
    });
    console.log("BBB")
}

四、数据请求

        1.Promise

        表示承诺在未来某个时刻可能会完成操作并返回结果

        多用于异步编程，用户登录、读取文件等耗时场景

        目的：解决回调地狱

        Promise对象的三种状态：

                初始状态pending,异步执行未完成

                调用resolve函数后成功状态fulfilled，异步执行成功，通过then方法获取结果

                调用reject函数后失败状态rejected，异步执行失败，通过catch获取错误信息

   //初始状态pending
    let p1 = new Promise((resolve, reject) => {

    })
    let p2 = new Promise((resolve, reject) => {
        //这里指代可能产生的判断逻辑
        if (true) {
            resolve('执行成功')
        }else{
            reject('执行失败')
        }
    }).then(result =>{
        console.log(result);//then获取执行成功的结果
    }).catch(error =>{
        console.log(error);//catch捕获执行失败的错误信息
    }).finally(()=>{
        console.log('异步执行结束');//无论成功或失败的最终执行
    })

        Promise常用静态方法：

                Promise.all批量执行

                Promise.allSettled用来确定一组异步操作是否都结束了（不管成功或失败）

                Promise.race只要有一个Promise 实例状态发生变化，就将新的Promise实例的状态改变，且终值由第一个完成的 Promise提供。

                Promise.any直到有一个Promise进入Fulfilled状态，Promise实例返回该Promise的结果。如果所有Promise都进入Rejected状态，则返回失败状态

    //静态方法使用样例
    //如果多个Promise之间没有依赖关系，可以使用Promise.all()并行执行它们。
    Promise.all([p1(),p2()])
    .then(results => {
        // 使用结果数组处理
    })
    .catch(error => {
        // 错误处理
    });

        2.fetch

        fetch是基于Promise的api，用于发送http请求并接收服务器返回的响应数据

        fetch返回的是一个Promise对象

        let url = 'http://127.0.0.1'
        //get请求
        fetch(url).then(response => {
            //返回解析后的json数据，传递给下一个then()方法中的回调函数的data参数
            return response.json()
        }).then(data => {//data是解析后的json数据
            console.log(data);
        }).catch(error => {
            console.log(error.message);
        }).finally(() => {
            console.log('最终执行');
        })

        //post请求 表单提交
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },//尽量添加声明header，防止某些技术后台导致的请求不到数据
            body: new URLSearchParams({//URLSearchParams用于处理键值对类型的数据，并将其编码为url查询字符串
                name: 'Shawn',
                age: 18
            }).then(response => {
                return response.json()
            }).then(data => {//data是解析后的json数据
                console.log(data);
            }).catch(error => {
                console.log(error.message);
            }).finally(() => {
                console.log('最终执行');
            })
        })
        
        //post请求 json提交
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },//尽量添加声明header，防止某些技术后台导致的请求不到数据
            body: JSON.stringify({//JSON.stringify用于将对象转换为json字符串
                name: 'Shawn',
                age: 18
            }).then(response => {
                return response.json()
            }).then(data => {//data是解析后的json数据
                console.log(data);
            }).catch(error => {
                console.log(error.message);
            }).finally(() => {
                console.log('最终执行');
            })
        })

        3.Axios        

        使用Axios前置准备，安装和配置Node.js

        下载地址：nodejs.org

        查看安装的版本: node -v        npm -v

        设置淘宝镜像源: npm config set registry https://registry.npmmirror.com/

        注：Node.js是一个开源的JavaScript运行时环境，用于在服务器端运行JavaScript代码

               npm(Node Package Manager)是Node.js包管理器，用来安装各种库、框架和工具

               比如：npm install axios      --命令行安装时，需在指定文件夹路径下执行命令行

               axios使用 unpkg CDN ,根据CDN路径可以在下载好的包中找到所需js文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

        Axios是基于Promise的网络请求库，用于发送http请求并接收服务器返回的响应数据

        Axios返回的是一个Promise对象

        Axios不仅可用于浏览器，也可用于Node.js,而fetch主要用于浏览器

        

        需要以各种方式引入

//<head>文件中引入
<script scr="js/axios.mim.js"></script>

//js进入
import axios from 'axios'

         Axios的使用

        let url = 'http://127.0.0.1'
        //get请求
        axios.get(url).then(response => {
            console.log(response.data);
        }).catch(error => {
            console.log(error.message);
        }).finally(() => {
            console.log('最终执行');
        })

        //post请求 表单提交
        let data = {
            name: 'Shawn',
            age: 18
        }
        axios.post(url, data, {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(response => {
            console.log(response.data);
        }).catch(error => {
            console.log(error.message);
        }).finally(() => {
            console.log('最终执行');
        })

        //post请求 json提交 axios的默认请求头就是application/json
        axios.post(url, data).then(response => {
            console.log(response.data);
        }).catch(error => {
            console.log(error.message);
        }).finally(() => {
            console.log('最终执行');
        })