ES6入门知识

****************************************************************************************************************************************************************************

0、ES6学习目标
【1】整体目标
ES6的模块化语法
************************************************************
Promise解决回调地狱问题
************************************************************
async...await简化Promise调用
************************************************************
什么是EventLoop
************************************************************
宏任务和微任务的执行顺序

****************************************************************************************************************************************************************************

1、ES6模块化概念
【1】前端模块化分类。大一统ES6规范，使得学习与开发难度都降低了。
【2】浏览器与服务端通用的模块化开发规范。
*********************************************************************************
每个js都是一个独立的模块
*********************************************************************************
导入其他模块的成员，需要使用import关键字
*********************************************************************************
向外共享成员，使用export关键字

****************************************************************************************************************************************************************************

2、在node.js中体验ES6模块化
【1】确保安装V14.15.1或更高的node.js版本
【2】在package.json的根节点中添加"type":"module"节点
【3】npm init -y
package.json
******************************************************************************
{
  "type": "module",
  "name": "day",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

****************************************************************************************************************************************************************************

3、默认导出导入
【1】3种用法
************************************************************默认导出
export default 默认导出的成员
let n1 = 10
let n2 = 20

function show() {

}

export default {
  n1,
  show
}
************************************************************默认导入
/*myImport.js*/
import n1 from './myExport.js'

console.log(n1)

****************************************************************************************************************************************************************************

4、默认导出导入的注意事项
【1】在每个模块中，只允许使用唯一一次export default。
【2】默认导入时，接收时候的成员名称可以任意命名，单需要合法。

****************************************************************************************************************************************************************************

5、按需导出导入
【1】导出
export let n1 = 10
export let n2 = 20

export function show() {

}
【2】导入
/*myImport.js*/
import {n1, n2, show} from './myExport.js'

console.log(n1)
console.log(n2)

****************************************************************************************************************************************************************************

6、按需导出导入的注意点
【1】按需导出每个模块中可以使用多次按需导出。
【2】按需导入的成员名称，必须和按需导出的名称一致。
【3】按需导入时，可以使用as关键字进行重命名。和数据库一样的操作...
【4】按需导出入可以和默认导出入一起使用

****************************************************************************************************************************************************************************

7、直接导入并执行模块中的代码
【1】myExport.js
for (let i = 0; i < 3; i++) {
  console.log(i)
}
【2】myImport.js
/*myImport.js*/
import './myExport.js'

****************************************************************************************************************************************************************************

8、Promise与回调地狱问题解决
【1】回调地狱说明
setTimeout(() => { // 第1层
  console.log('延时1秒后输出')
  setTimeout(() => { // 第2层
    console.log('延时2秒后输出')
    setTimeout(() => { // 第3层
      console.log('延时3秒后输出')
    }, 3000)
  }, 2000)
}, 1000)
【2】回调地狱的缺点：代码耦合性太强，难以维护。冗余代码多，可读性差。
【3】如何解决回调地狱？Promise

****************************************************************************************************************************************************************************

9、Promise的概念
【1】是一个构造函数，可以new Promise()
【2】Promise.prototype上包含一个.then()方法
【3】.then()方法可以预先指定成功和失败的回调函数
p.then(res=>{},err=>{})
********************************************************************
成功的回调函数是必选的，失败的是可选的。

****************************************************************************************************************************************************************************

10、基于回调函数按顺序读取文本Content
【1】一次读取1-3.txt
【2】安装then-fs包：npm i then-fs
*******************************************************************************
使用then-fs的readFile()方法，可以异步的读取文件内容，它的返回值是Promise实例对象
*******************************************************************************
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
thenFs.readFile('./1.txt', 'utf8').then(res => {
  console.log(res)
}, err => {
  console.log(err.message)
})

thenFs.readFile('./2.txt', 'utf8').then(res => {
  console.log(res)
}, err => {
  console.log(err.message)
})

thenFs.readFile('./3.txt', 'utf8').then(res => {
  console.log(res)
}, err => {
  console.log(err.message)
})

****************************************************************************************************************************************************************************

11、Promise按顺序读取
【1】升级10的代码，使用.then方法的链式调用
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
let promise = thenFs.readFile('./1.txt', 'utf8')
  .then(res1 => {
    console.log(res1)
    return thenFs.readFile('./2.txt', 'utf8')
  })
promise = promise.then(res2 => {
  console.log(res2)
  return thenFs.readFile('./3.txt', 'utf8')
})
promise.then(res3 => {
  console.log(res3)
})
【2】继续升级
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
thenFs.readFile('./1.txt', 'utf8')
  .then(res1 => {
    console.log(res1)
    return thenFs.readFile('./2.txt', 'utf8')
  })
  .then(res2 => {
    console.log(res2)
    return thenFs.readFile('./3.txt', 'utf8')
  })
  .then(res3 => {
    console.log(res3)
  })
【3】如果上一个.then返回了promise对象，我们可以继续通过.then来指定成功的回调函数，这样就解决了回调地狱的问题。

****************************************************************************************************************************************************************************

12、通过catch方法捕获错误...这不是就是java的语法吗
【1】在最后加catch打印，还挺好用的。
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
thenFs.readFile('./11.txt', 'utf8')
  .then(res1 => {
    console.log(res1)
    return thenFs.readFile('./2.txt', 'utf8')
  })
  .then(res2 => {
    console.log(res2)
    return thenFs.readFile('./3.txt', 'utf8')
  })
  .then(res3 => {
    console.log(res3)
  })
  .catch(err => {
    console.log(err)
  })

****************************************************************************************************************************************************************************

13、Promise的其他方法
【1】Promise.all() 等待机制
import thenFs from 'then-fs'

const promiseArray = [
  thenFs.readFile('./1.txt', 'utf-8'),
  thenFs.readFile('./2.txt', 'utf-8'),
  thenFs.readFile('./3.txt', 'utf-8')
]
Promise.all(promiseArray)
  .then(res => {
    console.log(res)
  })
Promise.all(promiseArray)
  .then(([res1, res2, res3]) => {
      console.log(res1, res2, res3)
    }
  )
【2】Promise.race()方法，赛跑机制，只要任何一个异步操作完成，立刻执行.then操作
import thenFs from 'then-fs'

const promiseArray = [
  thenFs.readFile('./1.txt', 'utf-8'),
  thenFs.readFile('./2.txt', 'utf-8'),
  thenFs.readFile('./3.txt', 'utf-8')
]
Promise.race(promiseArray)
  .then(res => {
    console.log(res)
  })
Promise.race(promiseArray)
  .then(([res1, res2, res3]) => {
      console.log(res1, res2, res3)
    }
  )

****************************************************************************************************************************************************************************

14、Promise封装读取文件的方法
【1】封装要求：方法名为getFile，方法形参接收一个fPath，返回值为Promise对象
import thenFs from 'then-fs'

function getFile(fPath) {
  return thenFs.readFile(fPath, 'utf-8')
}

export default {
  getFile
}
【2】使用这个方法
import getFile from './myExport.js'

getFile.getFile('./1.txt').then(res => {
  console.log(res)
})
【3】升级，怎么还没有我写的好呀！！！！！！！！！！！！！！！
import thenFs from 'then-fs'

function getFile(fPath) {
  return new Promise(function (resolve, reject) {
    thenFs.readFile(fPath, 'utf-8', (err, str) => {
      if (err) {
        return reject(err)
      } else {
        return resolve(str)
      }
    })
  })
}

export default {
  getFile
}
【4】这个好，可以知道异常
import getFile from './myExport.js'

getFile.getFile('./11.txt').then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

****************************************************************************************************************************************************************************

16、async和await概念
【1】是es8引入的新语法，是用来简化Promise操作的
【2】.then解决了回调地狱，但是代码仍然冗余，不易理解。
【3】async与await推出了。简单多了感觉。
import thenFs from 'then-fs'

/*function getFile() {
  let res = thenFs.readFile('./1.txt', 'utf-8')
  console.log(res)
}*/
async function getFile() {
  let res = await thenFs.readFile('./1.txt', 'utf-8')
  console.log(res)
  res = await thenFs.readFile('./2.txt', 'utf-8')
  console.log(res)
  res = await thenFs.readFile('./3.txt', 'utf-8')
  console.log(res)
}

getFile()

****************************************************************************************************************************************************************************

17、async和await使用注意点
【1】如果在方法中使用了await，则function必须被async（异步）修饰
【2】执行顺序示例。第一个await之前都是同步的，第一个await之后的都是异步的。
import thenFs from 'then-fs'

/*function getFile() {
  let res = thenFs.readFile('./1.txt', 'utf-8')
  console.log(res)
}*/
console.log('A')

async function getFile() {
  console.log('B')
  let res = await thenFs.readFile('./1.txt', 'utf-8')
  console.log(res)
  res = await thenFs.readFile('./2.txt', 'utf-8')
  console.log(res)
  res = await thenFs.readFile('./3.txt', 'utf-8')
  console.log(res)
  console.log('D')
}

getFile()
console.log('C')

****************************************************************************************************************************************************************************

18、EventLoop同步任务与异步任务
【1】js是单线程的语言，只能同时执行一个任务
***********************************************************************同步任务
是在主线程上排队执行的那些任务
***********************************************************************异步任务
又叫做耗时任务，是由js委托给宿主环境进行执行的任务。当任务执行完毕后通知js主线程执行回调函数

****************************************************************************************************************************************************************************

19、同步、异步任务执行的过程
【1】堆。主线程是在栈里执行的。栈里的主任务js执行，栈里的异步任务委托给宿主环境执行。
宿主环境包含浏览器或者Node.js。执行完成的异步任务给‘任务队列’。主线程执行完毕后，js主线程
会主动查找‘任务队列’。按照回调函数的顺序取出来，再去执行。js主线程会不断的循环工作。
【2】栈是运行方法的、堆是存储实体的（比如数组）。栈内存没有默认值，堆内存有默认值。都是存在内存里的。new 对象是放在堆里的，它不会随方法而消失。

****************************************************************************************************************************************************************************

20、EventLoop的概念
【1】js主线程不断去任务队列取任务的整个循环过程，就叫做EventLoop
import thenFs from 'then-fs'

console.log('A')
thenFs.readFile('./1.txt', 'utf-8').then(res => {
  console.log('B')
})
setTimeout(() => {
  console.log('C')
}, 0)
console.log('D')
***********************************************************************打印为ADCB
因为B与C C先执行完毕。所以先打印C

****************************************************************************************************************************************************************************

21、宏任务与微任务概念
【1】异步任务分为宏、微任务。
宏任务：ajax setTimeout setInterval 文件操作 其他
微任务：Promise.then .catch .finally 其他
【2】宏、微任务执行顺序。两者是交替执行的
宏任务执行完毕，会判断是否存在微任务，如果有先执行微任务完毕后再执行宏任务。

****************************************************************************************************************************************************************************

22、理解宏任务与微任务的执行顺序
【1】小云、小腾排队，假设只有一个业务，小云办理，小腾仅能等待。
小云存款（宏任务开始）后，柜员询问是否需要办理信用卡、购买理财产品，如果办理则微任务开始。
小云完毕后，小腾办理。

****************************************************************************************************************************************************************************

25、API接口案例
【1】MySQL数据库+Express（我java不能实现吗？）...
【2】npm i express@4.17.1 mysql@2.2.5
【3】创建express服务器
【4】创建db数据库，就是properties的配置信息
【5】创建user_control模块，执行sql语句
【6】使用user_router模块
【7】使用try...catch捕获程序执行中的异常

****************************************************************************************************************************************************************************