前言

ES6 入门教程 - ECMAScript 6入门 (ruanyifeng.com)

尚硅谷Web前端ES6教程，涵盖ES6-ES11_哔哩哔哩_bilibili

一、ES6模块化

1.1 如何导出

方法一：加上export关键字

  1. export let school = '中国地质大学';
  3. export function teach() {
  4.     console.log("是一所大学")
  5. }
  1. <script type="module">/*不用src*/
  2. //引入js文件
  3. import * as m1 from "./14_modules.js";
  5. console.log(m1)
  6. console.log(m1.school)
  7. m1.teach()
  8. </script>

方法二：export对象暴露

  1. let school = '中国地质大学';
  3. function findjob() {
  4.     console.log("是一所大学")
  5. }
  7. export {
  8.     school,
  9.     findjob
  10. }
  1. <script type="module">/*不用src*/
  2. //引入js文件
  3. import * as m2 from "./15_modules2.js";
  5. console.log(m2)
  6. console.log(m2.school)
  7. m2.findjob()
  9. </script>

方法三：默认default暴露

  1. export default {
  2.     school: '中国地质大学',
  3.     hello: function () {
  4.         console.log("是一所大学")
  5.     }
  6. }
  1. <script type="module">/*不用src*/
  2. //引入js文件
  3. import * as m3 from "./16_modules3.js";
  5. console.log(m3)
  6. // console.log(m3.school)
  7. // m3.teach()
  8. console.log(m3.default.school)
  9. m3.default.hello();
  10. </script>

默认暴露使用default方法来使用暴露的对象和方法

1.1 如何导入

  1. <script type="module">
  3.     //(1)通用的导入方式
  4.     import * as m1 from "./14_modules1.js";
  5.     console.log(m1.school,m1.teach);
  8.     //(2)解构赋值形式
  9.     import {school, teach} from "./14_modules1.js";
  10.     console.log(school)
  11.     teach();
  13.     //使用别名,避免重名
  14.     import {school as school1, findjob} from "./15_modules2.js";
  15.     console.log(school1)
  16.     findjob();
  18.     //默认暴露,将default属性起别名
  19.     import {default as m3} from "./16_modules3.js"
  20.     console.log(m3.school,m3.hello)
  23.     //(3)简便形式,针对默认暴露
  24.     import m4 from "./16_modules3.js";
  25.     console.log(m4.school,m4.hello)
  27. </script>

1.2 ES6打包

需求：

将src目录下js文件夹内所有js文件进行打包

步骤：

① 安装工具 babel-cli babel-preset-env browserify(webpack)

  1. npm init --yes
  2. npm i babel-cli babel-preset-env browserify -D
  3. npx babel src/js -d dist/js --presets=babel-preset-env

② 打包

  1. npx browserify dist/js/app.js -o dist/bundle.js

③ 项目结构

ES6 - 图1

④ 测试引入打包后的js

  1. <!--<script src="dist/js/app.js" ></script>-->
  2. <script src="dist/bundle.js" ></script>

注意：

使用 npx 是因为babel不是全局安装，如果全局安装则使用npm

src目录下的是需要被打包的目录，dist目录下的是打包之后的目录

这里使用的是browserify打包工具，而不是webpack。因为webpack比较重量级适合于项目，且需要配置

1.3 npm安装jQuery

需求：

npm安装jQuery包，然后修改页面背景颜色

步骤：

① 安装jQuery

  1. npm i jquery  //注意大小写

② 导入包

  1. //修改背景颜色为粉色
  2. import $ from 'jquery' ; // const $ = require("jQuery");
  3. $('body').css('background','pink')

③ 打包文件

（看上一目录如何打包）

二、 ES7新特性

2.1 Array.prototype.includes

该方法用于检测数组中是否包含某个元素，返回布尔类型

  1. const dx = ['中国地质大学','中国石油大学','中国矿业大学','中国海洋大学'];
  3. console.log(dx.includes('中国地质大学'))    //true
  4. console.log(dx.includes('中国农业大学'))    //false

注意：之前有index方法判断，但是是返回位置下标，没有返回-1

2.2 指数操作符

「**」，用来实现幂运算，功能与Math.pow结果相同

  1. console.log(3 ** 4)        //81=3^4
  2. console.log(4 ** 2)        //16=4^2

三、ES8新特性

3.1 async函数

基本概念

1）async 函数的返回值为promise对象
2）promise对象的结果由async函数执行的返回值决定

返回值类型：

非Promise对象
  1. //async 函数
  2. async function fn() {    
  3.     return '中国地质大学';
  4. }
  6. const res = fn();
  7. console.log(res)

ES6 - 图2

只要返回的结果不是一个Promise类型的对象，则返回的Promise的状态一定是fulfilled

Promise对象
  1. //async 函数
  2. async function fn() {
  3.     return new Promise((resolve, reject) => {
  4.         reject('失败的');
  5.     });
  6. }
  8. const res = fn();
  9. res.then(value => {
  10.     console.log(value);
  11. },reason => {
  12.     console.warn(reason);
  13. })

ES6 - 图3

如果返回的结果是一个Promise对象，则返回的Promise的状态由async函数返回的Promise状态决定。

3.2 await表达式

基本概念

1）await 必须写在 async 函数中；
2）await 右侧的表达式一般为 promise 对象；
3）await 返回的是 promise 成功的值；
4）await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理；

  1.  const p = new Promise((resolve, reject) => {
  2.      // resolve("用户数据！");
  3.      reject("诶呀怎么失败了")
  4.  })
  6.  async function fn() {
  7.      try {
  8.          let result = await p;   // await 返回的是 promise 成功状态时候的值
  9.          console.log(result);    
  10.      }catch (e) {
  11.          console.log(e);
  12.      }
  13.  }
  14.  fn();

3.3 async与await结合读取文件

  1. //  1. 引入fs模块
  2. const fs = require("fs");
  4. //  2. 封装读取文件的函数
  5. function readTxt1(url) {
  6.     return new Promise((resolve, reject) => {
  7.         fs.readFile(url, (err, data) => {
  8.             if (err) {
  9.                 reject(err)
  10.             }
  11.             resolve(data);
  12.         })
  13.     })
  14. }
  16. //  3.async函数
  17. async function main() {
  18.     let t1 = await readTxt1("./resource/content1.txt");
  19.     let t2 = await readTxt1("./resource/content2.txt");
  20.     let t3 = await readTxt1("./resource/content3.txt");
  21.     console.log(t1.toString())
  22.     console.log(t2.toString())
  23.     console.log(t3.toString())
  24. }
  26. //  4.调用async函数
  27. main()

3.4 async与await结合发送AJAX

提供服务
  1. const express = require("express");
  2. const app = express();
  4. app.get('/server', (req, res) => {
  5.     //设置响应头 设置允许跨域
  6.     res.setHeader("Access-control-allow-origin", "*");
  7.     //设置响应体
  8.     res.send("hello ajax");
  9. });
  11. app.listen('8000', () => {
  12.     console.log("http://localhost:8000")
  13. });

封装Promise函数
  1. function sendAjax(url) {
  2.     return new Promise((resolve, reject) => {
  3.         //  1.创建对象
  4.         const xhr = new XMLHttpRequest();
  6.         //  2.初始化
  7.         xhr.open('GET', url);
  9.         //  3.发送
  10.         xhr.send();
  12.         //  4.事件监听
  13.         xhr.onreadystatechange = function () {
  14.             if (xhr.readyState === 4) {
  15.                 if (xhr.status >= 200 && xhr.status < 300) {
  16.                     resolve(xhr.response);
  17.                 } else {
  18.                     reject(xhr.status);
  19.                 }
  20.             }
  21.         }
  22.     })
  23. }

🚩函数返回值：

① 通过Promise的then方法

  1. const res = sendAjax("http://localhost:8000/server");
  2. console.log(res); //这是一个promise对象
  3. res.then(value=>{console.log(value)})

② 通过async和await方法

  1. async function main() {
  2.     const res = await sendAjax("http://localhost:8000/server");
  3.     console.log(res);
  4. }
  5. main();

3.5 ES8对象方法扩展

1、Object.values() 和 Object.entries()
  1. const school = {
  2.     name: "中国地质大学",
  3.     cities: ['北京', '武汉'],
  4.     teach: function () {
  5.         console.log("传道受业解惑")
  6.     }
  7. }
  9. //获取所有的键,返回数组
  10. console.log(Object.keys(school))
  12. //获取所有的值,返回数组
  13. console.log(Object.values(school))
  15. //获取键值对数组
  16. console.log(Object.entries(school))
  18. const m = new Map(Object.entries(school)) //转换成map集合
  19. console.log(m)

2、Object.getOwnPropertyDescriptors()
  1. //获取对象属性的描述对象
  2. console.log(Object.getOwnPropertyDescriptors(school))

ES6 - 图4

什么是属性描述？ 可写、可配置、可枚举

  1. const obj = Object.create(null,{
  2.     name:{
  3.         //属性值
  4.         value:'地大',
  5.         //属性特性
  6.         writable:true,
  7.         configurable:true,
  8.         enumerable:true
  9.     }
  10. });
  11. console.log(Object.getOwnPropertyDescriptors(obj))

四、ES9新特性

4.1 Rest 参数与 spread 扩展运算符

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符；

4.1.1 rest参数

之前
  1. function connect({host, port, username, password}) {
  2.     console.log(host)
  3.     console.log(port)
  4.     console.log(username)
  5.     console.log(password)
  6. }
  8. connect({
  9.     host: '127,0,0,1',
  10.     port: 3306,
  11.     username: 'root',
  12.     password: 'root1234'
  13. });

ES9 扩展运算符
  1. function connect2({host, port, ...user}) {
  2.     console.log(host)
  3.     console.log(port)
  4.     console.log(user)
  5. }
  6. connect2({
  7.     host: '127,0,0,1',
  8.     port: 3306,
  9.     username: 'root',
  10.     password: 'root1234',
  11.     type: 'master'
  12. });

ES6 - 图5

4.1.2 扩展运算符

  1. const ms = {
  2.     q: '天音波',
  3.     w: '金钟罩',
  5. }
  6. const ms2 = {
  7.     e: '催筋断骨',
  8.     r: '神龙摆尾'
  9. }
  10. const xz = {...ms, ...ms2}
  11. console.log(xz)

ES6 - 图6

4.2 正则扩展：命名捕获分组

ES9 允许命名捕获组使用符号『?』,这样获取捕获结果可读性更强；

之前

  1. //声明一个字符串
  2. let str = '<a href="https://www.baidu.com">百度</a>';
  4. //提取url和标签文本
  5. const reg = /<a href="(.*)">(.*)<\/a>/
  7. //执行,获得一个数组
  8. const res = reg.exec(str)
  10. console.log(res);

ES6 - 图7

之后

  1. let str = '<a href="https://www.baidu.com">百度</a>';
  3. //?<str1> 这个名字可以随意取
  4. const reg = /<a href="(?<str1>.*)">(?<str2>.*)<\/a>/
  6. const res = reg.exec(str)
  8. console.log(res)
  9. console.log(res.groups.str1)
  10. console.log(res.groups.str2)

ES6 - 图8

4.3 正则扩展：反向断言

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选；

  1. let str = "JS5201314你知道么555啦啦啦"; // 需求：我们只想匹配到555
  2. // 正向断言   ?=
  3. const reg = /\d+(?=啦)/; // 前面是数字后面是啦
  4. const result = reg.exec(str);
  5. console.log(result);
  7. // 反向断言    ?<=
  8. const reg1 = /(?<=么)\d+/; // 后面是数字前面是么
  9. const result1 = reg1.exec(str);
  10. console.log(result1);

ES6 - 图9

4.4 正则扩展：dotAll

正则表达式中点.匹配除回车外的任何单字符，标记『s』改变这种行为，允许行终止符出现；

  1. <script>
  2.     //dot . 元字符
  3.     let str = `
  4.         <ul>
  5.             <li>
  6.                 <a>肖生克的救赎</a>
  7.                 <p>上映日期: 1994-09-10</p>
  8.             </li>
  9.             <li>
  10.                 <a>阿甘正传</a>
  11.             <p>上映日期: 1994-07-06</p>
  12.             </li>
  13.         </ul> `;
  15.     const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
  16.     let result;
  17.     let data = [];
  18.     while (result = reg.exec(str)) {
  19.         console.log(result);
  20.         data.push({title: result[1], time: result[2]});
  21.     }
  22.     console.log(data);
  23. </script>

五、ES10新特性

1、Object.fromEntries

六、ES11新特性