【前端基础】21.ES6-ES11新特性

最新推荐文章于 2023-08-17 23:12:20 发布

menghen113

最新推荐文章于 2023-08-17 23:12:20 发布

阅读量607

点赞数 1

分类专栏：前端学习文章标签：前端 es6 javascript

本文链接：https://blog.csdn.net/menghen113/article/details/129326529

版权

前端学习专栏收录该内容

26 篇文章 2 订阅

订阅专栏

视频

第一章 ESMAScript 相关介绍

ES全称EcmaScript,是脚本语言的规范，而平时经常编写的JavaScript,是EcmaScript的一种实现，所以ES新特效其实指的就是JavaScript的新特性

1.1什么是ECMA

ECMA中文名称为欧洲计算机制造商协会，这个阻止的目标是苹果，开发和认可电信和计算机标准。1994年后该组织改名为Ecma国际

1.2 什么是 ECMAScript

ECMAScript是由Ecma国际通过ECMA-262标注化的脚本程序设计语言

1.3什么是ECMA-262

Ecma国际制定了许多标准，而ECMA-262只是其中的一个，所以标准查看

http://www.ecma-international.org/publications/standards/Standard.htm

注：从ES6（2015年）开始，每年发布一个版本，版本号比年份最后一位大1

1.4 谁在维护ECMA-262

TC39是推进ECMAScript发展的委员会，其会员都是公司（其中主要是浏览器厂商，有苹果，谷歌，微软，因特网等）。TC39定期召开会议，会议由会员公司的代表与特邀专家出席

1.5 ES6兼容性

http://kangax.github.io/compat-table/es6/ 可查看兼容性

第二章ECMAScript6 新特性

2.1 let

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>let</title>
  </head>
  <body>
    <script>
      //声明变量
      let a;
      let b, c, d;
      let e = 100;
      let f = 521,
        g = 'iloveyou',
        h = [];

      //1.变量不能重复声明
      // let star='罗志祥';
      // let star='小猪';

      //2.块级作用域 全局，函数，eval
      //if else while for
      // {
      //   let girl = '周杨青';
      // }
      // console.log(girl);

      //3.不存在变量提示
      // console.log(song);
      // let song = '恋爱达人';

      //4.不影响作用域链
      {
        let school = '小明';
        function fn() {
          console.log(school);
        }
        fn();
      }
    </script>
  </body>
</html>

let 实践实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        width: 100px;
        height: 50px;
        margin: 10px;
        float: left;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2 class="page-header">点击切换颜色</h2>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <script>
      //获取div元素对象
      let items = document.getElementsByClassName('item');
      //遍历并绑定事件
      for (let i = 0; i < items.length; i++) {
        items[i].onclick = function () {
          //修改当前元素的背景颜色
          // this.style.background = 'pink';
          items[i].style.background = 'pink';
        };
      }
    </script>
  </body>
</html>

2.2 const

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>const 定义常量</title>
  </head>
  <body>
    <script>
      //声明常量
      const SCHOOL = '李明';

      //1.一定要赋初始值
      // const A;
      //2.一般常量使用大写(潜规则)
      // const a=100;
      //3.常量的值不能修改
      // SCHOOL='ATOUY'
      //4.块级作用域
      // {
      //   const PLA='game'
      // }
      // console.log(PLA)
      //5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
      const TEAM = ['UZI', 'MXLG', 'Ming', 'Letme'];
      TEAM.push('Meiko');

      console.log(SCHOOL);
    </script>
  </body>
</html>

2.3 解构赋值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>变量的解构赋值</title>
  </head>
  <body>
    <script>
      //ES6 允许安装一定模式从数组和对象中提取值，对变量进行赋值
      //这被称为解构赋值
      //1.数组的结构
      // const F4 = ['小沈阳', '刘能', '赵四', '宋小宝'];
      // let [xiao, liu, zhao, song] = F4;
      // console.log(xiao);
      // console.log(liu);
      // console.log(zhao);
      // console.log(song);
      //2.对象的解构
      const zhao = {
        name: '赵本山',
        age: '不详',
        xiaopin: function () {
          console.log('我可以演小品');
        },
      };
      // let { name, age, xiaopin } = zhao;
      // console.log(name);
      // console.log(age);
      // console.log(xiaopin);
      // xiaopin();

      let { xiaopin } = zhao;
      xiaopin();
      console.log(xiaopin);
    </script>
  </body>
</html>

2.4 模板字符串

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板字符串</title>
  </head>
  <body>
    <script>
      //ES6引入新的声明字符串的方式 [``] '' ""
      //1.声明
      // let str = `我也是一个字符串喔！`;
      // console.log(str, typeof str);

      //2.内容中可以直接出现换行符
      let str = `<ul>
          <li>沈腾</li>
          <li>玛丽</li>
          <li>魏翔</li>
          <li>艾伦</li>
        </ul>`;

      //3.变量凭借
      let lovest = '魏';
      let out = `${lovest}是我心目中最搞笑的演员`;
      console.log(out);
    </script>
  </body>
</html>

2.5 简化对象写法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简化对象写法</title>
  </head>
  <body>
    <script>
      //ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
      //这样的属性更加简洁
      let name = '尚硅谷';
      let change = function () {
        console.log('我们可以改变你!!');
      };
      const school = {
        name,
        change,
        improve() {
          console.log('我们可以提高你的技能');
        },
      };
      console.log(school);
    </script>
  </body>
</html>

2.6 箭头函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>箭头函数</title>
  </head>
  <body>
    <script>
      //ES6 允许使用[箭头] （=>）定义函数
      //声明一个函数
      // let fn1 = function () {};

      // let fn2 = (a, b) => {
      //   return a + b;
      // };
      // //调用函数
      // let result = fn2(1, 2);
      // console.log(result);

      //1.this 是静态的，this 实在指向函数声明时所在作用域的 this 的值
      function getName() {
        console.log(this.name);
      }
      let getName2 = () => {
        console.log(this.name);
      };

      //设置window对象的name属性
      window.name = '尚硅谷';
      const school = {
        name: 'ATLL',
      };

      //直接调用
      // getName();
      // getName2();

      //call方法调用
      // getName.call(school);
      // getName2.call(school);

      //2.不能作为构造实例化对象
      // let Person = (name, age) => {
      //   this.name = name;
      //   this.age = age;
      // };
      // let me = new Person('xiao', 30);
      // console.log(me);

      //3.不能使用 arguments 变量
      // let fn = () => {
      //   console.log(arguments);
      // };
      // fn(1, 2, 3);

      //4.箭头函数的简写
      //（1）省略小括号，当形参有且之一一个的时候
      // let add = (n) => {
      //   return n + n;
      // };
      // console.log(add(9));
      //（2）省略花括号，当代码体只有一条语句的时候，当时 return 必须省略
      //而且语句的执行结果就是函数的返回值
      let pow = (n) => n * n;
      console.log(pow(9));
    </script>
  </body>
</html>

箭头函数实践

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: #58a;
      }
    </style>
  </head>
  <body>
    <div id="id"></div>
    <script>
      //需求-1 点击 div 2s 后颜色变 粉色
      //获取元素
      let ad = document.getElementById('id');
      //绑定事件
      ad.addEventListener('click', function () {
        //保存 this 的值
        let _this = this;
        //定时器
        setTimeout(() => {
          //修改背景颜色 this
          // console.log(this);
          // _this.style.background = 'pink';
          this.style.background = 'pink';
        }, 2000);
      });

      //需求-2 从数组中返回偶数的元素
      const arr = [1, 6, 9, 10, 100, 25];
      // const result = arr.filter(function (item) {
      //   if (item % 2 === 0) {
      //     return true;
      //   } else {
      //     return false;
      //   }
      // });

      const result = arr.filter((item) => item % 2 === 0);

      console.log(result);

      //箭头函数适合与this 无关的回调，定时器，数组的方法回调
      //箭头函数不适合与 this有关的回调，事件回调，对象的方法
    </script>
  </body>
</html>

2.7 参数默认值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>函数参数默认值</title>
  </head>
  <body>
    <script>
      //ES6允许给函数参数赋值初始值
      //1.形参初始值 具有默认值的参数，一般位置要靠后(潜规则)
      // function add(a, b, c = 10) {
      //   return a + b + c;
      // }
      // let result = add(1, 2);
      // console.log(result);

      //2.与解构赋值结合
      function connect({ host = '127.0.0.1', username, password, port }) {
        console.log(host);
        console.log(username);
        console.log(password);
        console.log(port);
      }
      connect({
        host: 'localhost',
        username: 'root',
        password: 'root',
        port: 3306,
      });
    </script>
  </body>
</html>

2.8 rest参数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>rest参数</title>
  </head>
  <body>
    <script>
      //ES6引入rest参数，用于获取函数的实参，用来代替 arguments
      //ES5获取实参的方式
      function date() {
        console.log(arguments);
      }
      date('白芷', '阿娇', '思慧');

      //rest 参数
      function date1(...args) {
        console.log(args); //filter some every map
      }
      date1('阿娇', '柏芝', '思慧');

      //rest 参数必须要放在最后
      function fn(a, b, ...args) {
        console.log(a);
        console.log(b);
        console.log(args);
      }
      fn(1, 2, 3, 4, 5, 6);
    </script>
  </body>
</html>

2.9 spread扩展运算符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>扩展运算符</title>
  </head>
  <body>
    <script>
      //[...] 扩展运算符能将【数组】转换为逗号分隔的【参数序列】
      //声明一个数组
      const tfboys = ['易烊千玺', '王源', '王俊凯'];
      //=>'易烊千玺','王源','王俊凯'

      //声明一个函数
      function chunwan() {
        console.log(arguments);
      }

      chunwan(...tfboys); //chunwan('易烊千玺','王源','王俊凯')
    </script>
  </body>
</html>

扩展运算的运用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>扩展运算符应用</title>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <script>
      //1.数组的合并
      const kuaizi = ['王太利', '肖央'];
      const fenghuang = ['曾毅', '玲花'];
      // const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
      const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
      console.log(zuixuanxiaopingguo);

      //2.数组的克隆
      const sanzihua = ['E', 'G', 'M'];
      const sanyecao = [...sanzihua]; //['E','G','M']
      console.log(sanyecao);

      //3.将为数组转为真正的数组
      const divs = document.querySelectorAll('div');
      console.log(divs);
      const divArr = [...divs];
      console.log(divArr); //arguments
    </script>
  </body>
</html>

2.10 Symbol

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>symbol</title>
    <script>
      /**
       * Symbol基本使用
       * Es6引入了一种新的原始数据类型Symbol,表示独一无二的值。它时JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。
       * Symbol特点
       * 1.Symbol的值是唯一的，用来解决命名冲突的问题
       * 2.Symbol值不能与其他数据进行运算
       * 3.Symbol定义的对象属性不能使用 for...in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
       **/
    </script>
  </head>
  <body>
    <script>
      //创建Symbol
      let s = Symbol();
      console.log(s, typeof s);
      let s2 = Symbol('123');
      let s3 = Symbol('123');
      console.log(s2 === s3);

      //Symbol.for 创建
      let s4 = Symbol.for('123');
      console.log(s4, typeof s4);
      let s5 = Symbol.for('123');
      console.log(s4 === s5);

      //不能与其他数据进行运算
      // let result = s + 100;
      // let result = s > 100;
      // let result = s + '100';

      //USONB you are so niubility
      //u undefined
      //s string symbol
      //o object
      //n null number
      //b booloan
    </script>
  </body>
</html>

2.10.1 Symbol创建对象属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //向对象中添加方法 up down
      let game = {};
      //声明一个对象
      let methods = {
        up: Symbol(),
        down: Symbol(),
      };

      game[methods.up] = function () {
        console.log('我可以改变形状');
      };
      game[methods.down] = function () {
        console.log('我可以快速下降');
      };

      console.log(game);
      let youxi = {
        name: '狼人杀',
        [Symbol('say')]: function () {
          console.log('我可以发言');
        },
        [Symbol('zibao')]: function () {
          console.log('我可以自爆');
        },
      };
      console.log(youxi);
    </script>
  </body>
</html>

2.10.2 Symbol内置属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Symbol内置属性</title>
  </head>
  <body>
    <script>
      /**
       * Symbol.hasInstance 当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法
       **/
      class Person {
        static [Symbol.hasInstance](param) {
          console.log(param);
          console.log('我被用来检测类型了');
          return false;
        }
      }
      let o = {};
      console.log(o instanceof Person);

      /**
       *Symbol.isConcatSpreadable 对象的Symbol.isConcatSpreadable属性等于的是一个布尔值，表示该对象用于Array.prototype.concat()是，是否可以展开
       **/
      const arr1 = [1, 2, 3];
      const arr2 = [4, 5, 6];
      arr2[Symbol.isConcatSpreadable] = false;
      console.log(arr1.concat(arr2));
    </script>
  </body>
</html>

2.11 迭代器

迭代器(Iterator)是一种接口，为各种不同的数据结构提供统一的访问机制。

任何数据结构只要部署Iterator接口，就可以完成遍历操作

ES6创造了一种新的遍历命令 for…of 循环，Iterator接口组要供for…of消费
原始具有iterator接口的数据（可用 for of 遍历）
- Array
- Argument
- Set
- Map
- String
- TypeArray
- NodeList
工作原理
- 创建一个制作对象，指向当前数据结构的其实位置
- 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针一直向后移动，直到指向最后一个成员
- 每调用next方法返回一个包含value和done属性的对象
注：需要自定义遍历数据的时候，要想到迭代器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>迭代器</title>
  </head>
  <body>
    <script>
      //声明一个数组
      const xiyou = ['唐山', '孙悟空', '猪八戒', '沙僧'];
      //使用 for...of 遍历数组
      for (let v of xiyou) {
        console.log(v);
      }

      let iterator = xiyou[Symbol.iterator]();
      //调用对象的next方法
      console.log(iterator.next());
    </script>
  </body>
</html>

2.11.1 迭代器自定义遍历对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义遍历数据</title>
  </head>
  <body>
    <script>
      const banji = {
        name: '终极一班',
        stus: ['xiaoming', 'xiaoning', 'xiaotian', 'knight'],
        [Symbol.iterator]() {
          //索引遍历
          let index = 1;
          //
          let _this = this;
          return {
            next: function () {
              if (index < _this.stus.length) {
                const result = { value: _this.stus[index], done: false };
                //下标自增
                index++;
                //返回结果
                return result;
              } else {
                return { value: undefined, done: true };
              }
            },
          };
        },
      };
      //遍历这个对象
      for (let v of banji) {
        console.log(v);
      }
    </script>
  </body>
</html>

2.12 生成器

生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同

function * gen(){
	yield '一只没有耳朵';
	yield '一只没有尾巴'
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生成器</title>
  </head>
  <body>
    <script>
      //生成器其实就是一个特殊的函数
      //异步编程 纯回调函数 node fs ajax mongodb
      function* gen() {
        console.log('hello generator');
        //函数代码的分隔符
        console.log(111);
        yield '一只没有耳朵';
        console.log(222);
        yield '一只没有尾巴';
        console.log(333);
        yield '真奇怪';
        console.log(444);
      }

      let iterator = gen();
      //console.log(iterator)
      iterator.next();
      iterator.next();
      console.log('\n');

      for (let v of gen()) {
        console.log(v);
      }
    </script>
  </body>
</html>

2.12.1 生成器函数参数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生成器函数参数</title>
  </head>
  <body>
    <script>
      function* gen(arg) {
        console.log(arg);
        let one = yield 111;
        console.log(one);
        let two = yield 222;
        console.log(two);
        let three = yield 333;
        console.log(three);
      }

      //执行获取迭代器对象
      let iterator = gen('AAA');
      console.log(iterator.next());
      //next方法可用传入实参
      console.log(iterator.next('BBB'));
      console.log(iterator.next('CCC'));
      console.log(iterator.next('DDD'));
    </script>
  </body>
</html>

2.12.2 生成器函数实例1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生成器函数实例</title>
  </head>
  <body>
    <script>
      //异步编程 文件操作 网络操作(ajax,request)数据库操作
      //1s后控制台输出111 2s后输出222 3s后输出333
      //回调地狱
      // setTimeout(() => {
      //   console.log(111);
      //   setTimeout(() => {
      //     console.log(222);
      //     setTimeout(() => {
      //       console.log(333);
      //     }, 3000);
      //   }, 2000);
      // }, 1000);

      function one() {
        setTimeout(() => {
          console.log(111);
          iterator.next();
        }, 1000);
      }

      function two() {
        setTimeout(() => {
          console.log(222);
          iterator.next();
        }, 2000);
      }

      function three() {
        setTimeout(() => {
          console.log(333);
          iterator.next();
        }, 3000);
      }

      function* gen() {
        yield one();
        yield two();
        yield three();
      }

      //调用生成器函数
      let iterator = gen();
      iterator.next();
    </script>
  </body>
</html>

2.12.3 生成器函数实例2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生成器函数</title>
  </head>
  <body>
    <script>
      //模拟获取 用户数据 订单数据 商品数据
      function getUsers() {
        setTimeout(() => {
          let data = '用户数据';
          //调用next方法，并且将数据传入
          iterator.next(data);
        }, 1000);
      }

      function getOrders() {
        setTimeout(() => {
          let data = '订单数据';
          iterator.next(data);
        }, 1000);
      }

      function getGoods() {
        setTimeout(() => {
          let data = '商品数据';
          iterator.next(data);
        }, 1000);
      }

      function* gen() {
        let users = yield getUsers();
        console.log(users);
        let orders = yield getOrders();
        console.log(orders);
        let goods = yield getGoods();
        console.log(goods);
      }

      //调用生成器函数
      let iterator = gen();
      iterator.next();
    </script>
  </body>
</html>

2.13 Promise

Promise是ES6引入的异步编程的新解决方案，语法上Promise是一个构造函数，用来封装异步操作并可用获取其成功或失败的结果

Promise 构造函数：Promise(excutor){}
Promise.prototype.then方法
Promise.protype.catch方法

2.13.1 Promise基本语法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise基本语法</title>
  </head>
  <body>
    <script>
      //实例化 Promise 对象
      const p = new Promise(function (resolve, reject) {
        //
        // let data = '数据库中的用户数据';
        //resolve
        // resolve(data);

        let err = '数据读取失败';
        reject(err);
      }, 1000);
      //调用promise对象的then方法
      p.then(
        function (value) {
          console.log(value);
        },
        function (reason) {
          console.error(reason);
        }
      );
    </script>
  </body>
</html>

2.12.2 Promise读取文件

//1.引入fs模块
const fs=require('fs');
//2.调用方法读取文件
// fs.readFile('./resource/为学.md',(err,data)=>{
//   //如果失败，则抛出戳五
//   if(err) throw err;
//   //如果没有出错，则输出内容
//   console.log(data.toString())
// })

//3.使用Promise封装
const p=new Promise(function(resolve,reject){
  fs.readFile('./resource/为学.md',(err,data)=>{
    //如果失败，
    if(err) reject(err);
    //如果没有出错，则输出内容
   resolve(data)
  })
})

p.then(function(value){
  console.log(value.toString());
},function(reason){
  console.log('读取失败！！')
})

2.13.3 Promise封装AJAX

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发送AJAX请求</title>
  </head>
  <body>
    <script>
      //接口地址:https://api/apiopen.top/getJoke

      const p = new Promise((resolve, reject) => {
        //1.创建对象
        const xhr = new XMLHttpRequest();

        //2.初始化
        xhr.open('GET', 'https://api.ixiaowai.cn/ylapi/index.php');

        //3.发送
        xhr.send();

        //4.绑定事件，处理响应结果
        xhr.onreadystatechange = function () {
          //判断
          if (xhr.readyState === 4) {
            //判断响应码 200-299
            if (xhr.status >= 200 && xhr.status < 300) {
              //表示成功
              resolve(xhr.response);
            } else {
              //如果失败
              reject(xhr.status);
            }
          }
        };
      });

      //指定回调
      p.then(
        function (value) {
          console.log(value);
        },
        function (reason) {
          console.error(reason);
        }
      );
    </script>
  </body>
</html>

2.13.4 Promise-then方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise.prototype.then</title>
  </head>
  <body>
    <script>
      //创建promise 对象
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('用户数据');
          //reject('出错啦')
        }, 1000);
      });
      //调用then方法 then方法的返回结果是 Promise 对象，对象状态由回调函数的执行结果决定
      //1.如果回调函数中返回的结果是 非promise类型的属性，状态为成功，返回值为对象成功的值
      const result = p.then(
        (value) => {
          console.log(value);
          //1.非promise类型的属性
          // return 'iloveyou';
          //2.是promise对象
          // return new Promise((resolve, reject) => {
          //   resolve('ok');
          // });
          //3.抛出错误
          //throw new Error('出错啦！')
          throw '出错啦！';
        },
        (reason) => {
          console.log(reason);
        }
      );

      //链式调用
      p.then((value) => {}).then(
        (value) => {},
        (reason) => {}
      );
      console.log(result);
    </script>
  </body>
</html>

2.13.5 Promise实践-读取多个文件

//引入 fs 模块
const fs=require("fs");

// fs.readFile('./resource/为学.md',(err,data1)=>{
//   fs.readFile('./resource/插秧诗.md',(err,data2)=>{
//     fs.readFile('./resource/观书有感.md',(err,data3)=>{
//       let result=data1+'\r\n'+data2+'\r\n'+data3;
//       console.log(result)
    
//     })
//   })
// })

//使用promise 实现
const p=new Promise((resolve,reject)=>{
  fs.readFile('./resource/为学.md',(err,data)=>{
    resolve(data);
  });
})

p.then(value=>{
  return new Promise((resolve,reject)=>{
    fs.readFile('./resource/插秧诗.md',(err,data)=>{
      resolve([value,data]);
    });
  })
}).then(value=>{
  return new Promise((resolve,reject)=>{
    fs.readFile('./resource/观书有感.md',(err,data)=>{
      value.push(data);
      resolve(value)
    });
  });
}).then(value=>{
  console.log(value.join('\r\n'))
})

// p.then(value=>{
//   console.log(value.toString())
// })

2.13.6 Promise-catch方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>catch方法</title>
  </head>
  <body>
    <script>
      const p = new Promise((resove, reject) => {
        setTimeout(() => {
          //设置p对象的状态为失败，并设置失败的值
          reject('出错啦！');
        }, 1000);
      });

      // p.then(
      //   function (value) {},
      //   function (reason) {
      //     console.error(reason);
      //   }
      // );

      p.catch(function (reason) {
        console.warn(reason);
      });
    </script>
  </body>
</html>

2.14 Set

ES6提供了新的数据结构Set(集合)。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可用使用【扩展运算符】和【for…of…】进行遍历。

集合的属性和方法：

size 返回集合的元素个数
add 增加一个新元素，返回当前集合
delete 删除元素，返回boolean值
has 检测集合中是否包含某个元素，返回boolean值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>集合</title>
  </head>
  <body>
    <script>
      //声明一个set
      let s = new Set();
      let s2 = new Set(['1', '2', '3', '1', '3', '4']);
      console.log(s, typeof s);

      //元素个数
      console.log(s2.size);
      //添加新的元素
      s2.add('7');
      //删除元素
      s2.delete('1');
      //检测
      console.log(s2.has('7'));
      //清空
      // s2.clear();
      console.log(s2);

      for (let v of s2) {
        console.log(v);
      }
    </script>
  </body>
</html>

2.14.1 Set集合实践

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Set 实践</title>
  </head>
  <body>
    <script>
      let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
      //1.数组去重
      let result1 = [...new Set(arr)];
      console.log(result1);

      //2.交集
      let arr2 = [4, 5, 6, 5, 6];
      // let result2 = [...new Set(arr)].filter((item) => {
      //   let s2 = new Set(arr2); //4 5 6
      //   if (s2.has(item)) {
      //     return true;
      //   } else {
      //     return false;
      //   }
      // });
      let result2 = [...new Set(arr)].filter((item) => new Set(arr2).has(item));
      console.log(result2);

      //3.并级
      let union = [...new Set([...arr, ...arr2])];
      console.log(union);

      //4.差集
      let diff = [...new Set(arr)].filter((item) => !new Set(arr2).has(item));
      console.log(diff);
    </script>
  </body>
</html>

2.15 Map

ES6提供了Map数据结构，它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可用当作键。Map也实现了iterator接口，所以可以使用【扩展运算符】和【for…of…】进行遍历。

Map的属性和方法：

size 返回Map的元素个数
add 增加一个新元素，返回当前Map
get 返回键名对象的键只
has 检测Map中是否包含某个元素，返回boolean值
clear 清空集合，返回undefined

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Map</title>
  </head>
  <body>
    <script>
      //声明Map
      let m = new Map();

      //添加元素
      m.set('name', '李明');
      m.set('change', function () {
        console.log('好好学习!');
      });
      let key = {
        school: '大学',
      };
      m.set(key, ['清华', '北大', '厦门']);

      //size
      console.log(m.size);

      //删除
      m.delete('name');

      //获取
      console.log(m.get('change'));
      console.log(m.get(key));

      //清空
      // m.clear();

      //遍历
      for (let v of m) {
        console.log(v);
      }
      console.log(m);
    </script>
  </body>
</html>

2.16 class类

ES6提供了更接近传统语言的写法，引入了Class(类)这个概念，作为对象的模板。通过class关键字，可以定义类，基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的classs写法只是让对象原型的写法更加清晰，更像面对对象编程的语法而已。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>class类</title>
  </head>
  <body>
    <script>
      //手机
      // function Phone(brand, price) {
      //   this.brand = brand;
      //   this.price = price;
      // }
      // //添加方法
      // Phone.prototype.call = function () {
      //   console.log('我可以打电话!!!');
      // };

      // //实例化对象
      // let Huawei = new Phone('华为', 5999);
      // Huawei.call();
      // console.log(Huawei);

      //class
      class Phone {
        //构造方法 名字不能修改
        constructor(brand, price) {
          this.brand = brand;
          this.price = price;
        }

        //方法必须使用该语法，不能使用ES5的对象完整形式
        call() {
          console.log('我可以打电话!!!');
        }
      }
      let onePlus = new Phone('1+', 1999);
      console.log(onePlus);
    </script>
  </body>
</html>

2.17 类的静态成员

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>静态成员</title>
  </head>
  <body>
    <script>
      // function Phone() {}
      // Phone.name = '手机';
      // Phone.change = function () {
      //   console.log('我可以改变世界');
      // };
      // Phone.prototype.size = '5.5inch';
      // let nokia = new Phone();

      // console.log(nokia.name);
      // // nokie.change();
      // console.log(nokia.size);

      //属于类而不属于实例对象
      class Phone {
        //静态属性
        static name = '手机';
        static change() {
          console.log('我可以改变世界');
        }
      }
      let nokia = new Phone();
      // console.log(nokie.name); //错误
      console.log(Phone.name);
    </script>
  </body>
</html>

2.18 类继承

2.18.1 类继承1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>对象继承</title>
  </head>
  <body>
    <script>
      //手机
      function Phone(brand, price) {
        this.brand = brand;
        this.price = price;
      }

      Phone.prototype.call = function () {
        console.log('我可以打电话');
      };

      //智能手机
      function SmartPhone(brand, price, color, size) {
        Phone.call(this, brand, price);
        this.color = color;
        this.size = size;
      }

      //设置子级构造函数的原型
      SmartPhone.prototype = new Phone();
      SmartPhone.prototype.constructor = SmartPhone;

      //声明子类的方法
      SmartPhone.prototype.photo = function () {
        console.log('我可以拍照');
      };

      SmartPhone.prototype.playGame = function () {
        console.log('我可以玩游戏');
      };

      const chuizi = new SmartPhone('锤子', 2499, '黑色', '5.5inch');

      console.log(chuizi);
    </script>
  </body>
</html>

2.18.2 类继承2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类继承-2</title>
  </head>
  <body>
    <script>
      class Phone {
        //构造方法
        constructor(brand, price) {
          this.brand = brand;
          this.price = price;
        }

        //父级的成员属性
        call() {
          console.log('我可以打电话!!');
        }
      }

      class SmartPhone extends Phone {
        //构造方法
        constructor(brand, price, color, size) {
          super(brand, price); //Phone.call(this,brand,price)
          this.color = color;
          this.size = size;
        }

        photo() {
          console.log('拍照');
        }

        playGame() {
          console.log('玩游戏');
        }

        call() {
          console.log('我可以进行视频通话');
        }
      }

      const xiaomi = new SmartPhone('小米', 799, '黑色', '4.7inch');
      console.log(xiaomi);
      xiaomi.call();
      xiaomi.photo();
      xiaomi.playGame();
    </script>
  </body>
</html>

2.19 class的set-get

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get 和set</title>
  </head>
  <body>
    <script>
      //get 和 set
      class Phone {
        get price() {
          console.log('价格属性被读取了');
          return 'iloveyou';
        }

        set price(newVal) {
          console.log('价格属性被修改了');
        }
      }

      //实例化对象
      let s = new Phone();
      // console.log(s.price);
      s.price = 'free';
    </script>
  </body>
</html>

2.20 数值扩展

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数值扩展</title>
  </head>
  <body>
    <script>
      //0.Number.EPSILON是JavaScript表示的最小精度
      //EPSION属性的值接近于 2.220446049250313080847263361816E-16
      function equal(a, b) {
        if (Math.abs(a - b) < Number.EPSILON) {
          return true;
        } else {
          return false;
        }
      }
      console.log(0.1 + 0.2 === 0.3);
      console.log(equal(0.1 + 0.2, 0.3));

      //1.二进制和八进制
      let b = 0b1010;
      let o = 0o777;
      let d = 100;
      let x = 0xff;

      console.log(x);

      //2.Number.isFinite 检测一个数值是否为有限数
      console.log(Number.isFinite(100));
      console.log(Number.isFinite(100 / 0));
      console.log(Number.isFinite(Infinity));

      //3.Number.isNaN检测一个数值是否为NaN
      console.log('\n');
      console.log(Number.isNaN(123));

      //4.Number.parseInt Number,parseFloat字符串转整型
      console.log(Number.parseInt('5489love'));
      console.log(Number.parseFloat('5.489lo9ve'));

      //5.Number.isInterger 判断一个数是否为整数
      console.log(Number.isInteger(5));

      //6.Math.trunc 将数字的小数部分抹掉
      console.log(Math.trunc(3.5));

      //7.Math.sign 判断一个数到底为正数 负数 还是零
      console.log(Math.sign(100));
      console.log(Math.sign(0));
      console.log(Math.sign(-20000));
    </script>
  </body>
</html>

2.21 对象方法扩展

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>对象方法扩展</title>
  </head>
  <body>
    <script>
      //1.Object.is 判断两个值是否完全相对
      console.log(Object.is(120, 120));
      console.log(Object.is(NaN, NaN));
      console.log(NaN === NaN);
      //2.Object.assign 对象的合并
      const config1 = {
        host: 'localhost',
        port: 3306,
        name: 'root',
        pass: 'root',
        test: 'test',
      };
      const config2 = {
        host: 'http://atguigu.com',
        port: 33060,
        name: 'atguigu.com',
        pass: 'iloveyou',
        test2: 'test2',
      };
      console.log(Object.assign(config1, config2));

      //3.Object.setPrototypeOf 设置原型对象 Object.getPrototypeof
      const school = {
        name: '大学',
      };
      const cities = {
        xiaoqu: ['北京', '上海', '深圳'],
      };
      Object.setPrototypeOf(school, cities);
      console.log(Object.getPrototypeOf(school));
      console.log(school);
    </script>
  </body>
</html>

2.22 模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

模块化的好处
- 防止命名冲突
- 代码复用
- 高维护性
模块化规范产品

ES6之前的模块化规范有：
- CommonJS => NodeJS,Browserify
- AMD => requereJS
- CMD => seaJS
ES6模块化语法

模块功能主要由两个命令构成：export和import。
- export命令用于规定模块的对外接口
- import命令用于输入其他模块提供的功能

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES6模块化</title>
  </head>
  <body>
    <script type="module">
      //1.统一的导入方式
      //引入 m1.js 模块内容
      // import * as m1 from './m1.js';
      // console.log(m1);
      // import * as m2 from './m2.js';
      // console.log(m2);
      import * as m3 from './js/m3.js';
      console.log(m3);
      m3.default.dream();

      //2.解构赋值形式
      // import { school, teach } from './m1.js';
      // import { school as sc, study } from './m2.js';
      // console.log(school);
      // console.log(teach);
      // console.log(sc, study);

      // import { default as m3 } from './m3.js';
      // console.log(m3);

      //3.简便形式 针对默认暴露
      // import m3 from './m3.js';
      // console.log(m3);
    </script>

    <script src="./js/app.js" type="module"></script>
  </body>
</html>

home.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    1.安装工具 babel-cli babel-preset-env browserity(webpack)
    npm init --yes
    npm i babel-cli babel-preset-enm i babel-loader @babel/preset-env @bav browserify -D
    npx babel ./38_ES6模块化/js -d ./38_ES6模块化/dist/js --presets=babel-preset-env
    
    2.npx babel src/js -d dist/js

    3.打包 npx browserify ./38_ES6模块化/dist/js/app.js -o ./38_ES6模块化/dist/bundle.js
   -->

    <script src="./dist/bundle.js"></script>

    <!-- 
      npm i jquery
     -->
  </body>
</html>

第三章 ECMAScript 7 新特性

3.1 Array.prototype.includes

Inclues 方法用来检测数组中是否包含某个元素，返回布尔值

3.2 指数操作符

在ES7中引入指数运算符[**]，用来实现幂运算，功能与Math.pow结果相同

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES7 新特性</title>
  </head>
  <body>
    <script>
      //includes indexOf
      const mingzu = ['西游记', '红楼梦', '三国演义', '水浒传'];

      //判断
      console.log(mingzu.includes('西游记'));
      console.log(mingzu.includes('金瓶梅'));

      //**
      console.log(2 ** 10); //Math.pow(2,10)
      console.log(Math.pow(2, 10));
    </script>
  </body>
</html>

第四章 ECMAScript8 新特性

4.1 async 和await

async 和await 两种语法结合可以让异步代码像同步代码一样

async函数

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>async 函数</title>
  </head>
  <body>
    <script>
      //async函数
      async function fn() {
        //返回一个字符串
        // return '李明';
        //返回的结果不是一个Promise 类型的对象，返回的结果就是成功的Promise 对象
        // return;
        //抛出错误，返回的结果是一个失败的Promise
        // throw new Error('出错啦!');
        //返回的结果如果是一个Promise对象
        return new Promise((resolve, reject) => {
          // resolve('成功的数据');
          reject('失败的错误');
        });
      }

      const result = fn();
      console.log(result);

      //调用 then方法
      result.then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.warn(reason);
        }
      );
    </script>
  </body>
</html>

await表达式

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>await</title>
  </head>
  <body>
    <script>
      //创建promise 对象
      const p = new Promise((resolve, reject) => {
        //resolve('用户数据')
        reject('失败啦！');
      });

      //await要放在 async 函数中
      async function main() {
        try {
          let result = await p;
          //
          console.log(result);
        } catch (e) {
          console.warn(e);
        }
      }

      //调用函数
      main();
    </script>
  </body>
</html>

4.2 async和await结合读取文件

//1.引入fs 模块
const fs=require("fs")

//读取【为学】
function readWeiXue(){
  return new Promise((resolve,reject)=>{
    fs.readFile("../resource/为学.md",(err,data)=>{
      //如果失败
      if(err) reject(err);
      //如果成功
      resolve(data)
    })
  })
}
function readChaYangShi(){
  return new Promise((resolve,reject)=>{
    fs.readFile("../resource/插秧诗.md",(err,data)=>{
      //如果失败
      if(err) reject(err);
      //如果成功
      resolve(data)
    })
  })
}
function readGuanShu(){
  return new Promise((resolve,reject)=>{
    fs.readFile("../resource/观书有感.md",(err,data)=>{
      //如果失败
      if(err) reject(err);
      //如果成功
      resolve(data)
    })
  })
}

//声明一个async函数
async function main(){
  //获取为学内容
  let weixue=await readWeiXue();
  //获取插秧诗内容
  let chayang=await readChaYangShi();
  //获取灌输有感
  let guanshu=await readGuanShu();

  console.log(weixue.toString())
  console.log(chayang.toString())
  console.log(guanshu.toString())
}

main()

4.3 async与await封装AJAX请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发送 AJAX 请求</title>
  </head>
  <body>
    <script>
      //发送AJAX请求，返回的结果是Promise对象
      function sendAJAX(url) {
        return new Promise((resolve, reject) => {
          //1.创建对象
          const x = new XMLHttpRequest();

          //2.初始化
          x.open('GET', url);

          //3.发送
          x.send();

          //4.事件绑定
          x.onreadystatechange = function () {
            if (x.readyState === 4) {
              if (x.status >= 200 && x.status < 300) {
                //成功啦
                resolve(x.response);
              } else {
                //如果失败
                reject(x.status);
              }
            }
          };
        });
      }

      //promise then 方法测试
      const result = sendAJAX('https://api.ixiaowai.cn/ylapi/index.php').then(
        (value) => {
          console.log(value);
        },
        (reason) => {}
      );

      //async与await测试 axios
      async function main() {
        //发送 AJAX 请求
        let result = await sendAJAX('https://api.ixiaowai.cn/ylapi/index.php');
        console.log(result);
      }
      main();
    </script>
  </body>
</html>

4.4 对象方法扩展

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES8对象方法扩展</title>
  </head>
  <body>
    <script>
      //声明对象
      const school = {
        name: '小明',
        cities: ['北京', '上海', '深圳'],
        xueke: ['前端', 'Java', '大数据', '运维'],
      };

      //获取对象所有的值
      console.log(Object.keys(school));
      //获取对象所有的值
      console.log(Object.values(school));
      //entries
      console.log(Object.entries(school));
      //创建 Map
      const m = new Map(Object.entries(school));
      console.log(m);
      console.log(m.get('cities'));

      //对象属性的描述对象
      console.log(Object.getOwnPropertyDescriptors(school));

      const obj = Object.create(null, {
        name: {
          //设置值
          value: '李明',
          //属性特性
          writable: true,
          configurable: true,
          enumerable: true,
        },
      });
    </script>
  </body>
</html>

第五章 ECMAScript9 新特性

5.1对象展开

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>对象展开</title>
  </head>
  <body>
    <!-- 
    Rest参数与spread 扩展运算符在 ES6中已经引入，只不过ES6中只针对数组
    在ES9中为对象提供了像数组一样的 rest 参数和扩展运算符
   -->
    <script>
      function connect({ host, port, ...user }) {
        console.log(host);
        console.log(port);
        console.log(user);
      }

      connect({
        host: '127.0.0.1',
        port: 3306,
        username: 'root',
        password: 'root',
      });

      const sub1 = {
        o: '语文',
      };
      const sub2 = {
        t: '数学',
      };
      const sub3 = {
        f: '外语',
      };

      const subject = { ...sub1, ...sub2, ...sub3 };

      console.log(subject);
    </script>
  </body>
</html>

5.2正则命名分组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>正在扩展-命名捕获分组</title>
  </head>
  <body>
    <script>
      //声明一个字符串
      let str = '<a href="http://www.baidu.com">百度一下</a>';

      //提取url与【标签文本】
      const reg = /<a href="(.*)">(.*)<\/a>/;

      //执行
      const result = reg.exec(str);
      console.log(result);
      console.log(result[1]);
      console.log(result[2]);

      const reg1 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;

      //执行
      const result1 = reg1.exec(str);
      console.log(result1);
      console.log(result1.groups.url);
      console.log(result1.groups.text);
    </script>
  </body>
</html>

5.3正则断言

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>正则断言-反向断言</title>
  </head>
  <body>
    <script>
      //声明字符串
      let str = 'JS5211314你好666加油';
      //正向断言
      const reg = /\d+(?=加油)/;
      const result = reg.exec(str);
      console.log(result);

      //反向断言
      const reg1 = /(?<=你好)\d+/;
      const result1 = reg1.exec(str);
      console.log(result);
    </script>
  </body>
</html>

5.4 正则dotAll模式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>正则扩展-dotAll模式</title>
  </head>
  <body>
    <script>
      //dot . 元字符 除换行符之外的任意单个字符
      let str = `
      <ul>
        <li>
          <a>肖申克的救赎</a>
          <p>上映日期:1994-09-10</p>  
        </li>
        <li>
          <a>阿甘正传</a>
          <p>上映日期:1994-09-10</p>  
        </li>
      </ul>
    `;
      //声明正则
      // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;
      const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;

      //执行匹配
      // const result = reg.exec(str);
      // console.log(result);
      let result;
      let data = [];
      while ((result = reg.exec(str))) {
        console.log(result);
        data.push({ title: result[1], time: result[2] });
      }
      console.log(data);
    </script>
  </body>
</html>

第六章 ECMAScript10 新特性

6.1Object.fromEntries

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Object.fromEntries</title>
  </head>
  <body>
    <script>
      //二维数组
      const result = Object.fromEntries([
        ['name', '李明'],
        ['xueke', 'Java,大数据，前端，云计算'],
      ]);

      // Map;
      const m = new Map();
      m.set('name', 'TGUIGU');
      const result1 = Object.fromEntries(m);

      console.log(result);
      console.log(result1);

      //Object.entries ES8
      const arr = Object.entries({
        name: 'lihua',
      });
      console.log(arr);
    </script>
  </body>
</html>

6.2 trimStart与trimEnd

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>trimStart 与 trimEnd</title>
  </head>
  <body>
    <script>
      //trim
      let str = '   iloveyou   ';
      console.log(str);
      console.log(str.trimStart());
      console.log(str.trimEnd());
    </script>
  </body>
</html>

6.3 Array.prototype.flat与flatMap

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flat 与 flatMap</title>
  </head>
  <body>
    <script>
      //flat 平
      //将多为数组转化为低维数组
      const arr = [1, 2, 3, 4, [5, 6]];
      console.log(arr.flat());
      const arr1 = [1, 2, 3, [4, 5, [6, 7, 8]]];
      console.log(arr.flat(2));

      //flatMap
      const arr2 = [1, 2, 3, 4];
      const result = arr2.flatMap((item) => [item * 10]);
      console.log(result);
    </script>
  </body>
</html>

6.4 Symbol.prototype.description

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Symbol.prototype.description</title>
  </head>
  <body>
    <script>
      //创建Symbol
      let s = Symbol('李明');

      console.log(s.description);
    </script>
  </body>
</html>

第七章 ECMAScrpt11 新特性

7.1 私有属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>私有属性</title>
  </head>
  <body>
    <script>
      class Person {
        //公有属性
        name;
        //私有属性
        #age;
        #weight;
        //构造方法
        constructor(name, age, weight) {
          this.name = name;
          this.#age = age;
          this.#weight = weight;
        }
        intro() {
          console.log(this.name);
          console.log(this.#age);
          console.log(this.#weight);
        }
      }

      //实例化
      const girl = new Person('晓红', 18, '45kg');

      console.log(girl.name);
      // console.log(girl.#age);

      girl.intro();
    </script>
  </body>
</html>

7.2 Promise.allSettled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise.allSettled</title>
  </head>
  <body>
    <script>
      //声明两个promise对象
      const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('商品数据 - 1');
        }, 1000);
      });

      const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          // resolve('商品数据 - 2');
          reject('出错啦！');
        }, 1000);
      });

      //调用 allsettled方法 不管怎样都返回成功
      const result = Promise.allSettled([p1, p2]);

      //all 都成功才返回成功
      const res = Promise.all([p1, p2]);

      console.log(result);
      console.log(res);
    </script>
  </body>
</html>

7.3 String.prototype.matchAll

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>String.prototype.matchAll</title>
  </head>
  <body>
    <script>
      let str = `
        <ul>
          <li>
            <a>肖申克的救赎</a>
            <p>上映日期:1994-09-10</p>
          </li>
          <li>
            <a>阿甘正传</a>
            <p>上映日期:1994-07-06</p>
          </li>
        </ul>
      `;
      //声明正则
      const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;

      //调用方法
      const result = str.matchAll(reg);

      console.log(result);

      // for (let v of result) {
      //   console.log(v);
      // }

      const arr = [...result];
      console.log(arr);
    </script>
  </body>
</html>

7.4 可选链操作符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可选链操作符</title>
  </head>
  <body>
    <script>
      //?.
      function main(config) {
        // const dbHost = config && config.db.host;
        const dbHost = config?.db?.host;
        console.log(dbHost);
      }
      main({
        db: {
          host: '192.168.1.100',
          username: 'root',
        },
        cache: {
          host: '192.168.1.200',
          username: 'admin',
        },
      });
    </script>
  </body>
</html>

7.5 动态import 加载

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态 import</title>
  </head>
  <body>
    <button id="btn">点击</button>
    <script src="./app.js" type="module"></script>
  </body>
</html>

7.6 BigInt

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BigInt</title>
  </head>
  <body>
    <script>
      //大整形
      let n = 521n;
      console.log(n, typeof n);

      //函数 不能转换浮点数
      let n2 = 123;
      console.log(BigInt(n));

      //大数值运算
      let max = Number.MAX_SAFE_INTEGER;
      console.log(max);
      console.log(max + 1);
      console.log(max + 2);

      console.log(BigInt(max));
      console.log(BigInt(max) + BigInt(1));
      console.log(BigInt(max) + BigInt(2));
    </script>
  </body>
</html>

7.7 globalThis

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>globalThis</title>
  </head>
  <body>
    <script>
      console.log(globalThis);
    </script>
  </body>
</html>