翼度科技»论坛 编程开发 JavaScript 查看内容

ES6-ES11最通俗易懂保姆级的笔记!人见人爱,花见花开。赶快动起你发财的小

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
1.  ES6
1.1  let变量声明以及声明特性
声明变量
  1. let a;
  2. let b, c, e;
  3. let f = 100,
  4. g = "红石榴21",
  5. h = [];
复制代码
特性:

  • 变量不能重复声明
  1. let start = "许巍";
  2. let start = "刀郎"; // 报错
复制代码

  • 块级作用域 全局、函数、eval
  1. {
  2.    let str = "红石榴21"
  3. }
  4. console.log(str); // str is not defined
复制代码
不仅仅针对花括号,if else while for中都是块级作用域

  • 不存在变量提升
  1. console.log(song);
  2. let song = "罗刹海市";  // Cannot access 'song' before initialization
复制代码

  • 不影响作用域链
  1. {
  2.   let school = "国防科技大学";
  3.   function fn() {
  4.     console.log(school); // 国防科技大学
  5.   }
  6.   fn();
  7. }
复制代码
 案例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>let经典案例实践</title>
  8.     <link
  9.       crossorigin="anonymous"
  10.       href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
  11.       rel="stylesheet"
  12.     />
  13.   </head>
  14.   <body>
  15.    
  16.       <h2 >点击切换颜色</h2>
  17.       1
  18.       2
  19.       3
  20.    
  21.    
  22.    
  23.   </body>
  24. </html>
复制代码
1.2  const声明常量以及特点
常量声明
  1. const SCHOOL = "西南石油大学";
复制代码
特性:

  • 一定要赋初始值
  1. const A; // 报错
复制代码

  • 一般变量使用大写(潜规则)
  1. const A = 100;
复制代码

  • 常量的值不能被修改
  1. SCHOOL = "国防科技大学";
  2. console.log(SCHOOL); // Assignment to constant variable.
复制代码

  • 块级作用域
  1. {
  2.   const YWZQ = "go";
  3. }
  4. console.log(YWZQ); // YWZQ is not defined
复制代码

  • 对于数组和对象元素的修改,不算对常量的修改,不会报错
  1. const LIKE = ["HG", "MC", "LZZ"];
  2. LIKE.push("ZZC");
  3. console.log(LIKE); // ['HG', 'MC', 'LZZ', 'ZZC']
复制代码
1.3  变量的解构赋值
ES6 允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。

  • 数组结构赋值
  1. const F4 = ["小沈阳", "赵四", "刘能", "宋小宝"];
  2. let [xiao, zhao, liu, song] = F4;
  3. console.log(xiao); // 小沈阳
  4. console.log(zhao); // 赵四
  5. console.log(liu); // 刘能
  6. console.log(song); // 宋小宝
复制代码

  • 对象结构赋值
  1. const zhao = {
  2.   name: "赵本山",
  3.   age: "65",
  4.   xiaoping: function () {
  5.     console.log("我会演小品");
  6.   },
  7. };
  8. let { name, age, xiaoping } = zhao;
  9. console.log(name); // 赵本山
  10. console.log(age); // 65
  11. console.log(xiaoping); // 输出ƒ(){}
  12. xiaoping(); // 我会演小品
复制代码
如果不用结构的形式
  1. console.log(zhao.name);
  2. console.log(zhao.age);
  3. zhao.xiaoping();
  4. zhao.xiaoping();
复制代码
1.4  模板字符串
ES6 引入新的声明字符串的方式 『``』 '' ""

  • 声明变量
  1. let str = `今天天气有点热啊`;
  2. console.log(str);
复制代码

  • 内容可以直接出现换行符
  1. let str =
  2.   "<ul>" + "<li>张三</li>" + "<li>李四</li>" + "<li>王五</li>" + "</ul>"; // 之前的写法
  3. let str =
  4.   `<ul>
  5.     <li>张三1</li>
  6.     <li>李四2</li>
  7.     <li>王五3</li>
  8.   </ul>`;
  9. document.getElementById("appID").innerHTML = str;
复制代码

  • 字符串的拼接
  1. let str = "许巍";
  2. let lovest = `我喜欢${str}的歌,名字叫做<<蓝莲花>>。`;
  3. console.log(lovest);
复制代码
1.5  对象的简化写法ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁
  1. let name = "红石榴21";
  2. let change = function () {
  3.   console.log("我想改变世界!!");
  4. };
  5. const dream = {
  6.   name,
  7.   change,
  8.   // improve: function () {
  9.   //   console.log("我又get到了新的技能!");
  10.   // },
  11.   // 简写形式
  12.   improve() {
  13.     console.log("hahaha");
  14.   },
  15. };
  16. dream.change();
  17. dream.improve();
复制代码
1.6  箭头函数以及声明特点
ES6 允许使用「箭头」(=>)定义函数。声明一个函数
  1. let fn = function() {}
  2. let fn = function (a, b) {
  3.     return a + b;
  4. };
  5. // 调用函数
  6. let result = fn(1, 2);
  7. console.log(result); // 3
复制代码
特性:

  • this 是静态的,this 始终指向函数声明时所在作用域下的 this 的值
  1. function getName() {
  2.   console.log(this.name);
  3. }
  4. let getName2 = () => {
  5.   console.log(this.name);
  6. };
  7. // 设置 window 对象的name 属性
  8. window.name = "红石榴21";
  9. const school = {
  10.   name: "博商学院",
  11. };
  12. // 直接调用
  13. getName(); // 红石榴21
  14. getName2(); // 红石榴21
  15. // call 方法调用
  16. getName.call(school); // 博商学院
  17. getName2.call(school); // 红石榴21
复制代码

  • 不能作为构造函数实例化对象
  1. let Person = (name, age) => {
  2.   this.name = name;
  3.   this.age = age;
  4. };
  5. let me = new Person("hong", 18);
  6. console.log(me); // Person is not a constructor
复制代码

  • 不能使用 arguments 变量
  1. let fn = () => {
  2.   console.log(arguments);
  3. };
  4. fn(1, 2, 3); // arguments is not defined
复制代码

  • 箭头函数的简写
  1. // 1) 省略小括号,当形参有且只有一个的时候
  2. let add = n => {
  3.   return n + n;
  4. };
  5. console.log(add(9)); // 18
  6. // 2) 省略花括号,当代码体只有一条语句的时候,此时 return 必须省略
  7. // 而且语句的执行结果就是函数的返回值
  8. let pow = (n) => n * n;
  9. console.log(pow(9)); // 81
复制代码
 箭头函数的实践与应用场景
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>箭头函数的实践与应用场景</title>
  8.   </head>
  9.   <body>
  10.    
  11.    
  12.    
  13.   </body>
  14. </html>
复制代码
1.7  函数参数的默认值设置ES6 允许给函数参数赋值初始值

  • 形参初始值 具有默认值的参数,一般位置要靠后(潜规则)
  1. function add(a, b, c) {
  2.   return a + b + c;
  3. }
  4. let result = add(1, 2, 3);
  5. console.log(result); // 6
  6. // 设置默认值
  7. function add(a, b, c = 4) {
  8.   return a + b + c;
  9. }
  10. let result = add(1, 2);
  11. console.log(result);  // 7
复制代码

  • 与结构赋值结合
  1. function connect({ host, username, password, port }) {
  2.   console.log(host);
  3.   console.log(username);
  4.   console.log(password);
  5.   console.log(port);
  6. }
  7. connect({
  8.   host: "127.0.0.1",
  9.   username: "admin",
  10.   password: "admin",
  11.   port: 80,
  12. });
复制代码
1.8  rest参数ES6 引入 rest 参数,用于获取函数的实参,用来代替 argumentsES5 获取实参的方式
  1. function date() {
  2.   console.log(arguments);
  3. }
  4. date("俞老师", "王老师", "顾老师");
复制代码

rest 参数
  1. function date(...args) {
  2.   console.log(args); // [俞老师", "王老师", "顾老师] 变成数组就可以使用 filter、some、every、map
  3. }
  4. date("俞老师", "王老师", "顾老师");
复制代码
rest 参数必须要放到参数最后
  1. function fn(a, b, ...args) {
  2.   console.log(a); // 1
  3.   console.log(b); // 2
  4.   console.log(args); // [3, 4, 5, 6]
  5. }
  6. fn(1, 2, 3, 4, 5, 6);
复制代码
1.9  扩展运算符的介绍
『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』
  1. // 声明一个数组
  2. const tfbody = ["朴树", "许巍", "刀郎"];
  3. // 声明一个函数
  4. function likeSinger() {
  5.   console.log(arguments);
  6. }
  7. likeSinger(...tfbody);
  8. console.log(tfbody);
复制代码
输出结果

 扩展运算符的应用

  • 数组的合并
  1. const siDaTianWang = ["刘德华", "张学友", "郭富城", "黎明"];
  2. const xiaoHuDui = ["吴奇隆", "陈志朋", "苏有朋"];
  3. // const zuHe = siDaTianWang.concat(xiaoHuDui); // 使用concat实现数组拼接
  4. // console.log(zuHe); // ["刘德华", "张学友", "郭富城", "黎明","吴奇隆", "陈志朋", "苏有朋"]
  5. const zuHe = [...siDaTianWang, ...xiaoHuDui];
  6. console.log(zuHe); // ["刘德华", "张学友", "郭富城", "黎明","吴奇隆", "陈志朋", "苏有朋"]
复制代码

  • 数组的克隆
  1. const ziMu = ["A", "B", "C"];
  2. const newArr = [...ziMu];
  3. console.log(ziMu); // ["A", "B", "C"]
  4. console.log(newArr); // ["A", "B", "C"]
复制代码

  • 将伪数组转为真正的数组
  1. const divS = document.querySelectorAll("div");
  2. const divArr = [...divS];
  3. console.log(divArr);
复制代码
输出结果

1.10.1  Symbol的介绍与创建

  • 创建Symbol
  1. let s = Symbol();
  2. console.log(s, typeof s); // Symbol() 'symbol'
  3. let s2 = Symbol("嘀嘀咕咕");
  4. let s3 = Symbol("嘀嘀咕咕");
  5. console.log(s2, typeof s2); // Symbol(嘀嘀咕咕) 'symbol'
  6. console.log(s2 === s3); // false
复制代码

  • Symbol.for 创建
  1. let s4 = Symbol.for("我的心思");
  2. let s5 = Symbol.for("我的心思");
  3. console.log(s4); // Symbol(我的心思)
  4. console.log(s4 === s5); // true
复制代码

  • 不能与其他数据进行运算
  1. let result = s + 100; // Cannot convert a Symbol value to a number
  2. let result = s > 100; // Cannot convert a Symbol value to a number
  3. let result = s + s; // Cannot convert a Symbol value to a number
  4. // USONB you are so niubility
  5. // u   undefined
  6. // s   string   symbol
  7. // o   object
  8. // n   null   number
  9. // b   boolean
复制代码
1.10.2 对象添加Symbol类型的属性
向对象中添加方法 up down
  1. let game = {
  2.   name: "学爸",
  3.   up: function () {},
  4.   down: function () {},
  5. };
  6. // 声明一个对象
  7. let methods = {
  8.   up: Symbol(),
  9.   down: Symbol(),
  10. };
  11. // console.log(methods);
  12. game[methods.up] = function () {
  13.   console.log("我可以改变世界!");
  14. };
  15. game[methods.down] = function () {
  16.   console.log("海鲜都留给小日子吃吧!");
  17. };
  18. console.log(game);
复制代码
输出结果
  1. let phws = {
  2.   name: "排核污水",
  3.   [Symbol("say")]: function () {
  4.     console.log("打断小日子的狗腿");
  5.   },
  6.   [Symbol("woof")]: function () {
  7.     console.log("小日子公开食海鲜,真香");
  8.   },
  9. };
  10. console.log(phws);
复制代码
输出结果

1.10.3  Symbol的内置属性

  • Symbol.hasInstance
当其他对象使用 instanceof 运算符,判断是否为该对象的实例时,会调用这个方法
  1. class Person {
  2.   static [Symbol.hasInstance](param) {
  3.     console.log(param);
  4.     console.log("我被用来检测类型了");
  5.     return true;
  6.   }
  7. }
  8. let o = {};
  9. console.log(o instanceof Person);
复制代码

  • Symbol.isConcatSpreadable
对象的 SymbolisConcatSpreadable 属性等于的是一个布尔值,表示该对象用于Array.prototype.concat()时,是否可以展开。
  1. const arr = [1, 2, 3];
  2. const arr2 = [4, 5, 6];
  3. arr2[Symbol.isConcatSpreadable] = false;
  4. console.log(arr.concat(arr2));
复制代码
除了定义自己使用的 Symbol 值以外,ES6 还提供了 11个内置的 Symbol值,指向语言内部使用的方法。

1.11.1  迭代器介绍
迭代器(iterator)【对象中的一个属性】是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 iterator 接口,就可以完成遍历操作。

  • ES6 创造了一种新的遍历命令 for...of 循环,lterator 接口主要供 for...of 消费


  • 原生具备 iterator 接口的数据(可用 for of 遍历)
a) Array
b) Arguments
c) Set
d) Map
e) String
f) TypedArray
g) NodeList

  • 工作原理
a) 创建一个指针对象,指向当前数据结构的起始位置
b) 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员
c) 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员
d) 每调用 next 方法返回一个包含 value 和done 属性的对象
注:需要自定义遍历数据的时候,要想到迭代器。
  1. // 声明一个数组
  2. const tangShengShiTu = ["唐僧", "孙悟空", "猪八戒", "沙和尚"];
  3. // 使用 for...of 遍历数组
  4. // for (let v of tangShengShiTu) {
  5. //   console.log(v); // "唐僧", "孙悟空", "猪八戒", "沙和尚"
  6. // }
  7. let iterator = tangShengShiTu[Symbol.iterator]();
  8. // 调用对象的next方法
  9. console.log(iterator.next()); // {value: '唐僧', done: false}
  10. console.log(iterator.next()); // {value: '孙悟空', done: false}
  11. console.log(iterator.next()); // {value: '猪八戒', done: false}
  12. console.log(iterator.next()); // {value: '沙和尚', done: false}
  13. console.log(iterator.next()); // {value: '', done: true}
复制代码
1.11.2   迭代器应用-自定义遍历数据
  1. // 声明一个对象
  2. const banJi = {
  3.   name: "朗月班",
  4.   stuList: ["xiaohong", "xiaolian", "xiaojia", "xiaoyuan"],
  5.   [Symbol.iterator]() {
  6.     // 索引变量
  7.     let index = 0;
  8.     // let _this = this;
  9.     // return {
  10.     //   next: function () {
  11.     //     if (index < _this.stuList.length) {
  12.     //       const result = { value: _this.stuList[index], done: false };
  13.     //       // 下标自增
  14.     //       index++;
  15.     //       // 返回结果
  16.     //       return result;
  17.     //     } else {
  18.     //       return { value: _this.stuList[index], done: true };
  19.     //     }
  20.     //   },
  21.     // };
  22.     // 使用箭头函数
  23.     let next = () => {
  24.       if (index < this.stuList.length) {
  25.         const result = { value: this.stuList[index], done: false };
  26.         // 下标自增
  27.         index++;
  28.         // 返回结果
  29.         return result;
  30.       } else {
  31.         return { value: this.stuList[index], done: true };
  32.       }
  33.     };
  34.     return { next };
  35.   },
  36. };
  37. // 需求: 只能使用for of 遍历stuList,通过面向对象
  38. // 不能使用 banJi.stuList.forEach
  39. for (let v of banJi) {
  40.   console.log(v); // "xiaohong", "xiaolian", "xiaojia", "xiaoyuan"
  41. }
复制代码
1.12.1   生成器函数声明与调用
生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同
  1. // 生成器其实就是一个特殊的函数
  2. // 异步编程 纯回调函数 node fs ajax mongodb
  3. // 函数代码的分隔符
  4. function* gen() {
  5.   console.log("hello generator"); // hello generator
  6. }
  7. let iterator = gen();
  8. iterator.next();
复制代码
另一个例子
  1. function* gen() {
  2.   console.log(111);
  3.   yield "光辉岁月";
  4.   console.log(222);
  5.   yield "蓝莲花";
  6.   console.log(333);
  7.   yield "像风一样自由";
  8.   console.log(444);
  9. }
  10. let iterator = gen();
  11. console.log(iterator.next()); // 111 {value: '光辉岁月', done: false}
  12. console.log(iterator.next()); // 222 {value: '蓝莲花', done: false}
  13. console.log(iterator.next()); // 333 {value: '像风一样自由', done: false}
  14. console.log(iterator.next()); // 444 {value: 'undefined', done: true}
  15. // 遍历
  16. for (let v of gen()) {
  17.   console.log(v);
  18. }
复制代码
遍历输出结果

1.12.2   生成器函数的参数传递
  1. function* gen() {
  2.   yield 111;
  3.   yield 222;
  4.   yield 333;
  5. }
  6. // 执行获取迭代器对象
  7. let iterator = gen();
  8. console.log(iterator.next()); // {value: 111, done: false}
  9. console.log(iterator.next()); // {value: 222, done: false}
  10. console.log(iterator.next()); // {value: 333, done: false}
  11. console.log(iterator.next()); // {value: undefined, done: true}
复制代码
另一个例子
  1. function* gen(arg) {
  2.   console.log(arg);
  3.   let one = yield 111;
  4.   console.log(one);
  5.   let two = yield 222;
  6.   console.log(two);
  7.   let three = yield 333;
  8.   console.log(three);
  9. }
  10. // 执行获取迭代器对象
  11. let iterator = gen("AAA");
  12. console.log(iterator.next());
  13. // next方法可以传入实参
  14. console.log(iterator.next("BBB")); // 第二次调用作为第一个yield的返回参数
  15. console.log(iterator.next("CCC")); // 第三次调用作为第二个yield的返回参数
  16. console.log(iterator.next("DDD")); // 第四次调用作为第三个yield的返回参数
  17. console.log(iterator.next("FFF"));
复制代码
输出结果

1.12.3   生成器函数实例异步编程 文件操作 网络操作(ajax, request) 数据库操作需求-1 1s 后控制台输出 111 2s 后控制台输出 222 3s 后控制台输出 333  // 这种调用方式叫做回调地狱
  1. setTimeout(() => {
  2.   console.log(111);
  3.   setTimeout(() => {
  4.     console.log(222);
  5.     setTimeout(() => {
  6.       console.log(333);
  7.     }, 3000);
  8.   }, 2000);
  9. }, 1000);
复制代码
另一个例子
  1. function one() {
  2.   setTimeout(() => {
  3.     console.log(111);
  4.     iterator.next();
  5.   }, 1000);
  6. }
  7. function two() {
  8.   setTimeout(() => {
  9.     console.log(222);
  10.     iterator.next();
  11.   }, 2000);
  12. }
  13. function three() {
  14.   setTimeout(() => {
  15.     console.log(333);
  16.   }, 3000);
  17. }
  18. function* gen() {
  19.   yield one();
  20.   yield two();
  21.   yield three();
  22. }
  23. // 调用生成器函数
  24. let iterator = gen();
  25. iterator.next();
复制代码
输出结果

1.12.4   生成器函数实例-2
需求-2 模拟获取 先调用用户数据,然后调用订单数据,最后调用商品数据
  1. function getUsers() {
  2.   setTimeout(() => {
  3.     let data = "用户数据";
  4.     console.log(data);
  5.     iterator.next();
  6.   }, 1000);
  7. }
  8. function getOrders() {
  9.   setTimeout(() => {
  10.     let data = "订单数据";
  11.     console.log(data);
  12.     iterator.next();
  13.   }, 1000);
  14. }
  15. function getGoods() {
  16.   setTimeout(() => {
  17.     let data = "商品数据";
  18.     console.log(data);
  19.   }, 1000);
  20. }
  21. function* gen() {
  22.   yield getUsers();
  23.   yield getOrders();
  24.   yield getGoods();
  25. }
  26. // 调用生成器函数
  27. let iterator = gen();
  28. iterator.next();
复制代码
输出结果

 需求-2,补充调用传参
  1. function getUsers() {
  2.   setTimeout(() => {
  3.     let data = "用户数据1";
  4.     iterator.next(data);
  5.   }, 1000);
  6. }
  7. function getOrders() {
  8.   setTimeout(() => {
  9.     let data = "订单数据2";
  10.     iterator.next(data);
  11.   }, 1000);
  12. }
  13. function getGoods() {
  14.   setTimeout(() => {
  15.     let data = "商品数据3";
  16.     iterator.next(data);
  17.   }, 1000);
  18. }
  19. function* gen() {
  20.   let users = yield getUsers();
  21.   console.log(users);
  22.   let orders = yield getOrders();
  23.   console.log(orders);
  24.   let goods = yield getGoods();
  25.   console.log(goods);
  26. }
  27. // 调用生成器函数
  28. let iterator = gen();
  29. iterator.next();
复制代码
输出结果

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

  • Promise构造函数:Promise(excutor)
  • Promise.prototype.then 方法
  •  Promise.prototype.catch 方法
  1. // 实例化 Promise 对象
  2. const p = new Promise(function (resolve, reject) {
  3.   setTimeout(() => {
  4.     // let data = "读取用户数据";
  5.     // resolve(data);
  6.     let err = "读取数据失败!";
  7.     reject(err);
  8.   }, 1000);
  9. });
  10. // 调用 promise 对象的 then 方法
  11. p.then(
  12.   function (value) {
  13.     console.log(value); // 读取用户数据
  14.   },
  15.   function (error) {
  16.     console.error(error); // 读取数据失败!
  17.   }
  18. );
复制代码
1.13.2  Promise封装读取文件
  1. // 1、引入 fs 模块
  2. const fs = require("fs");
  3. // 2、调用方法读取文件
  4. // fs.readFile('./resources/为学.md', (err, data) => {
  5. //   // 如果失败,则抛出错误
  6. //   if (err) throw err;
  7. //   // 如果没有出错,则输出内容
  8. //   console.log(data.toString());
  9. // });
  10. // 3、使用 Promise 封装
  11. const p = new Promise(function (resolve, reject) {
  12.   fs.readFile("./resources/为学.md", (err, data) => {
  13.     // 判断如果失败
  14.     if (err) reject(err);
  15.     // 如果成功
  16.     resolve(data);
  17.   });
  18. });
  19. p.then(function (value) {
  20.   console.log(value.toString());
  21. }, function (err) {
  22.   console.log("读取失败!!")
  23. })
复制代码
输出结果

1.13.3  Promise封装AJAX请求

  • 方法-1  普通写法
  1. // 接口地址: https://api.apiopen.top/api/getDynamic
  2. // 1、创建对象
  3. const xhr = new XMLHttpRequest();
  4. // 2、初始化
  5. xhr.open("GET", "https://api.apiopen.top/api/getDynamic");
  6. // 3、发送
  7. xhr.send();
  8. // 4、绑定事件,处理响应结果
  9. xhr.onreadystatechange = function () {
  10.   // 判断
  11.   if (xhr.readyState === 4) {
  12.     // 判断响应状态码 200-299
  13.     if (xhr.status >= 200 && xhr.status < 300) {
  14.       console.log(xhr.response);
  15.     } else {
  16.       // 如果失败
  17.       console.log(xhr.status);
  18.     }
  19.   }
  20. };
复制代码

  • 方法-2  Promise封装
  1. const p = new Promise((resolve, reject) => {
  2.   // 1、创建对象
  3.   const xhr = new XMLHttpRequest();
  4.   // 2、初始化
  5.   xhr.open("GET", "https://api.apiopen.top/api/getDynamic");
  6.   // 3、发送
  7.   xhr.send();
  8.   // 4、绑定事件,处理响应结果
  9.   xhr.onreadystatechange = function () {
  10.     // 判断
  11.     if (xhr.readyState === 4) {
  12.       // 判断响应状态码 200-299
  13.       if (xhr.status >= 200 && xhr.status < 300) {
  14.         // 表示成功
  15.         resolve(xhr.response);
  16.       } else {
  17.         // 如果失败
  18.         reject(xhr.status);
  19.       }
  20.     }
  21.   };
  22. });
  23. // 指定回调
  24. p.then(
  25.   function (value) {
  26.     console.log(value);
  27.   },
  28.   function (error) {
  29.     console.log(error);
  30.   }
  31. );
复制代码
1.13.4  Promise.prototype..then方法
  1. // 创建 promise 对象
  2. const p = new Promise((resolve, reject) => {
  3.   setTimeout(() => {
  4.     resolve("获取用户数据成功!");
  5.   }, 1000);
  6. });
  7. // 调用 then 方法 then方法的返回结果是 Promise 对象,对象状态由回调函数的执行结果决定
  8. // 1、如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功,返回值为对象的成功的值
  9. const result = p.then(
  10.   (value) => {
  11.     // console.log(value);
  12.     // 1、非 promise 类型的属性
  13.     return "I Love You";
  14.     // 2、是promise 对象
  15.     // return new Promise((resolve, reject) => {
  16.       // resolve("ok");
  17.       // reject('error');
  18.     // });
  19.     // 3、抛出错误
  20.     // throw new Error("出错啦!");
  21.     // throw '出错啦!'
  22.   },
  23.   (reason) => {
  24.     console.error(reason);
  25.   }
  26. );
  27. console.log(result);
  28. // p.then(
  29. //   (value) => {
  30. //     console.log(value);
  31. //   },
  32. //   (error) => {
  33. //     console.log(error);
  34. //   }
  35. // );
  36. // 链式调用
  37. p.then(value=>{
  38. }).then(reason=>{
  39. })
复制代码
1.13.5  Promise实践练习-多个文件内容读取

  • 方法-1  回调地狱
  1. fs.readFile("./resources/为学.md", (err, data1) => {
  2.   fs.readFile("./resources/插秧诗.md", (err, data2) => {
  3.     fs.readFile("./resources/观书有感.md", (err, data3) => {
  4.       // let result = data1 + '\r\n' + data2 + '\r\n' + data3;
  5.       let result = `${data1}\r\n${data2}\r\n${data3}`
  6.       console.log(result);
  7.     })
  8.   })
  9. });
复制代码

  • 方法-2  使用 promise 实现
  1. const p = new Promise((resolve, reject) => {
  2.   fs.readFile("./resources/为学.md", (err, data) => {
  3.     resolve(data);
  4.   })
  5. });
  6. p.then(value => {
  7.   return new Promise((resolve, reject) => {
  8.     fs.readFile("./resources/插秧诗.md", (err, data) => {
  9.       resolve([value, data]);
  10.     })
  11.   })
  12. }).then(value => {
  13.   return new Promise((resolve, reject) => {
  14.     fs.readFile("./resources/观书有感.md", (err, data) => {
  15.       // 压入
  16.       value.push(data);
  17.       resolve(value);
  18.     });
  19.   })
  20. }).then(value => {
  21.   console.log(value.join('\r\n'));
  22. })
复制代码

  • 方法-3  使用生成器函数
  1. function one() {
  2.   fs.readFile("./resources/为学.md", (err, data) => {
  3.     iterator.next(data);
  4.   })
  5. }
  6. function two() {
  7.   fs.readFile("./resources/插秧诗.md", (err, data) => {
  8.     iterator.next(data);
  9.   })
  10. }
  11. function three() {
  12.   fs.readFile("./resources/观书有感.md", (err, data) => {
  13.     iterator.next(data);
  14.   })
  15. }
  16. function* gen() {
  17.   let a = yield one();
  18.   let b = yield two();
  19.   let c = yield three();
  20.   let d = `${a}\r\n${b}\r\n${c}`;
  21.   console.log(d.toString());
  22. };
  23. // 调用生成器函数
  24. let iterator = gen();
  25. iterator.next();
复制代码
输出结果

1.13.6  Promise对象catch方法
  1. const p = new Promise((resolve, reject) => {
  2.   setTimeout(() => {
  3.     // 设置 P 对象的状态为失败,并设置失败的值
  4.     reject("出错啦!");
  5.   }, 1000);
  6. });
  7. // p.then(value=> {
  8. //   console.log(value);
  9. // }, reason=>{
  10. //   console.log(reason);
  11. // });
  12. p.catch((reason) => {
  13.   console.warn(reason); // 出错啦!
  14. });
复制代码
1.14  ES6-集合介绍与API
ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的集合实现了 iterator 接口,所以可以使用[扩展运算符]和[for...of...] 进行遍历集合的属性和方法:

  • size 返回集合的元素个数
  • add 增加一个新元素,返回当前集合
  • delete 删除元素,返回 boolean 值
  • has 检测集合中是否包含某个元素,返回 boolean 值
  1. // 声明一个 set
  2. let s = new Set();
  3. console.log(s); // Set(0) {size: 0}
  4. let s2 = new Set(["昨天", "今天", "明天", "未来", "今天"]);
  5. console.log(s2); // Set(4) {'昨天', '今天', '明天', '未来'}
  6. // 元素的个数
  7. console.log(s2.size);
  8. // 添加新的元素
  9. s2.add("过去");
  10. console.log(s2); // Set(5) {'昨天', '今天', '明天', '未来', '过去'}
  11. // 删除元素
  12. s2.delete("昨天");
  13. console.log(s2); // Set(4) {'今天', '明天', '未来', '过去'}
  14. // 清空
  15. s2.clear();
  16. console.log(s2); // Set(0) {size: 0}
复制代码
1.15  ES6-集合实践
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];

  • 数组去重
  1. let result = [...new Set(arr)];
  2. console.log(result); // [1, 2, 3, 4, 5]
复制代码

  • 交集
集合论中,设A,B是两个集合,由所有属于集合A且属于集合B的元素所组成的集合,叫做集合A与集合B的交集(intersection),记作A∩B。
  1. let arr2 = [4, 5, 6, 5, 6];
  2. let result = [...new Set(arr)].filter((item) => {
  3.   let s2 = new Set(arr2); // 去重后,4 5 6
  4.   if (s2.has(item)) {
  5.     return true;
  6.   } else {
  7.     return false;
  8.   }
  9. });
  10. console.log(result); // [4, 5]
复制代码
交集的简写形式
  1. let arr2 = [4, 5, 6, 5, 6];
  2. let result = [...new Set(arr)].filter(item=>new Set(arr2).has(item));
  3. console.log(result); // [4, 5]
复制代码

  • 并集
给定两个集合A,B,把他们所有的元素合并在一起组成的集合,叫做集合A与集合B的并集,记作A∪B,读作A并B。
  1. let arr2 = [4, 5, 6, 5, 6];
  2. let union = [...new Set([...arr, ...arr2])];
  3. console.log(union); // [1, 2, 3, 4, 5, 6]
复制代码

  • 差集
差集是指,由所有属于A但不属于B的元素组成的集合。
  1. let arr2 = [4, 5, 6, 5, 6];
  2. let diff = [...new Set(arr)].filter(item=>!(new Set(arr2).has(item)));
  3. console.log(diff); // [1, 2, 3]
复制代码
1.16  ES6-Map的介绍与APIES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了iterator 接口,所以可以使用[扩展运算符]和[for...of...] 进行遍历。Map的属性和方法:

  • size 返回Map的元素个数
  • set 增加一个新元素,返回当前 Map
  • get 返回键名对象的键值
  • has 检测 Map 中是否包含某个元素,返回 boolean 值
  • clear 清空集合,返回undefined
  1. // 声明 Map
  2. let m = new Map();
  3. // console.log(m);
  4. // 添加元素
  5. m.set("name", "成都大运会");
  6. // console.log(m); // Map(1) {'name' => '成都大运会'}
  7. m.set("change", function () {
  8.   console.log("我可以改变世界!!");
  9. });
  10. let key = {
  11.   school: "西南石油大学",
  12. };
  13. m.set(key, ["北京", "上海", "广州", "深圳"]);
  14. // console.log(m);
  15. // size
  16. // console.log(m.size); // 3
  17. // 删除
  18. // m.delete("name");
  19. // console.log(m);
  20. // 清空
  21. // m.clear();
  22. // console.log(m); // Map(0) {size: 0}
  23. // 遍历
  24. for(let v of m) {
  25.     console.log(v);
  26. }
复制代码
1.17.1  ES6-class介绍与初体验
ES6 提供了更接近传统语言的写法,引入了 class(类) 这个概念,作为对象的模板。通过 class 关键字,可以定义类。基本上,ES6 的class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。知识点:

  • class声明类
  • constructor 定义构造函数初始化
  • extends 继承父类
  • super 调用父级构造方法
  • static 定义静态方法和属性
  • 父类方法可以重写
  1. // ES5
  2. function Huawei(bank, price) {
  3.   this.bank = bank;
  4.   this.price = price;
  5. }
  6. // 在原型上添加方法
  7. Huawei.prototype.call = function () {
  8.   console.log("我可以打电话哦!");
  9. };
  10. let hW = new Huawei("3999", "华为荣耀");
  11. hW.call();
  12. console.log(hW);
  13. // ES6
  14. class XiaoMi {
  15.   constructor(bank, price) {
  16.     this.bank = bank;
  17.     this.price = price;
  18.   }
  19.   // 方法必须使用该语法,不能使用 ES5 的对象完整形式
  20.   call() {
  21.     console.log("我为发烧而生");
  22.   }
  23. }
  24. let xM = new XiaoMi("699", "红米");
  25. xM.call();
  26. console.log(xM);
复制代码
输出结果

1.17.2  ES6-class静态成员
  1. // 构造函数也是一个对象
  2. function Phone() {}
  3. Phone.name = "手机";
  4. Phone.change = function () {
  5.   console.log("我可以改变世界!");
  6. };
  7. Phone.prototype.size = "5.5inch";
  8. // 实例对象是实例对象,函数对象是函数对象。
  9. let tianYu = new Phone();
  10. console.log(tianYu.name); // undefined
  11. // tianYu.change(); // error tianYu.change is not a function
  12. console.log(tianYu.size); // 5.5inch
  13. class Computer {
  14.   // 静态属性
  15.   static name = "戴尔";
  16.   static change() {
  17.     console.log("我可以改变世界!");
  18.   }
  19. }
  20. let dianNao = new Computer();
  21. console.log(dianNao.name); // undefined
  22. // 静态方法是属于类,不属于实例方法
  23. console.log(Computer.name); // 戴尔
复制代码
1.17.3  ES5构造函数继承
  1. // 手机
  2. function Phone(brand, price) {
  3.   this.brand = brand;
  4.   this.price = price;
  5. }
  6. Phone.prototype.call = function () {
  7.   console.log("我可以打电话");
  8. };
  9. // 智能手机
  10. function SmartPhone(brand, price, color, size) {
  11.   Phone.call(this, brand, price);
  12.   this.color = color;
  13.   this.price = price;
  14. }
  15. // 设置子构造函数的原型
  16. SmartPhone.prototype = new Phone();
  17. // 校正一下,你不这样做也行
  18. // SmartPhone.prototype.constructor = SmartPhone;
  19. // 声明子类的方法
  20. SmartPhone.prototype.photo = function () {
  21.   console.log("我可以拍照");
  22. };
  23. SmartPhone.prototype.playGame = function () {
  24.   console.log("我可以打游戏");
  25. };
  26. const chuiZi = new SmartPhone("锤子", 2999, "黑色", "5.5inch");
  27. console.log(chuiZi);
  28. chuiZi.call();
  29. chuiZi.photo();
  30. chuiZi.playGame();
复制代码
 输出结果

1.17.4  ES6-class的类继承
  1. class Phone {
  2.   // 构造方法
  3.   constructor(brand, price) {
  4.     this.brand = brand;
  5.     this.price = price;
  6.   }
  7.   call() {
  8.     console.log("我可以打电话!");
  9.   }
  10. }
  11. class SmartPhone extends Phone {
  12.   // 构造方法
  13.   constructor(brand, price, color, size) {
  14.     super(brand, price); // Phone.call(this, brand, price);
  15.     this.color = color;
  16.     this.size = size;
  17.   }
  18.   photo() {
  19.     console.log("我能拍照!");
  20.   }
  21.   playGame() {
  22.     console.log("我能玩游戏!");
  23.   }
  24. }
  25. let xiaoMi = new SmartPhone("小米", 699, "黑色", "5.5inch");
  26. console.log(xiaoMi);
  27. xiaoMi.call();
  28. xiaoMi.photo();
  29. xiaoMi.playGame();
复制代码
 输出结果

1.17.4  ES6-子类对父类方法的重写
  1. class Phone {
  2.   // 构造方法
  3.   constructor(brand, price) {
  4.     this.brand = brand;
  5.     this.price = price;
  6.   }
  7.   call() {
  8.     console.log("我可以打电话!");
  9.   }
  10. }
  11. class SmartPhone extends Phone {
  12.   // 构造方法
  13.   constructor(brand, price, color, size) {
  14.     super(brand, price); // Phone.call(this, brand, price);
  15.     this.color = color;
  16.     this.size = size;
  17.   }
  18.   photo() {
  19.     console.log("我能拍照!");
  20.   }
  21.   playGame() {
  22.     console.log("我能玩游戏!");
  23.   }
  24.   // ES6-子类对父类方法的重写
  25.   call() {
  26.     console.log("我可以视频通话哦!");
  27.   }
  28. }
  29. let xiaoMi = new SmartPhone("小米", 699, "黑色", "5.5inch");
  30. console.log(xiaoMi);
  31. xiaoMi.call();
  32. xiaoMi.photo();
  33. xiaoMi.playGame();
复制代码
 输出结果

1.18  ES6的数值扩展

  • Number.EPSILON 是 JavaScript 表示的最小精度
 EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
  1. function equal(a, b) {
  2.   if (Math.abs(a - b) < Number.EPSILON) {
  3.     return true;
  4.   } else {
  5.     return false;
  6.   }
  7. }
  8. console.log(0.1 + 0.2); // 0.30000000000000004
  9. console.log(0.1 + 0.2 === 0.3); // false
  10. console.log(equal(0.1 + 0.2, 0.3)); // true
复制代码

  • 二进制和八进制
  1. let b = 0b1010;
  2. console.log(b); // 10
  3. let o = 0o777;
  4. console.log(o); // 511
  5. let d = 100;
  6. console.log(d); // 100
  7. let x = 0xff;
  8. console.log(x); // 255
复制代码

  • Number.isNaN 检测一个数值是否为 NaN
  1. console.log(Number.isNaN(123)); // false
复制代码

  • Number.parseInt Number.parseFloat字符串转整数
  1. console.log(Number.parseInt("511111fuck")); // 511111
  2. console.log(Number.parseFloat("3.1415926疯狂")); // 3.1415926
复制代码

  • Number.isInteger() 判断一个数是否为整数
  1. console.log(Number.isInteger(5)); // true
  2. console.log(Number.isInteger(2.5)); // false
复制代码

  • Math.trunc 将数字的小数部分抹掉
  1. console.log(Math.trunc(3.5)); // 3
复制代码

  • Math.sign 判断一个数到底为正数 负数 还是零
  1. console.log(Math.sign(100)); // 1
  2. console.log(Math.sign(0)); // 0
  3. console.log(Math.sign(-20000)); // -1
复制代码
1.19  ES6的对象方法扩展

  • Object.is 判断两个值是否完全相等
  1. console.log(Object.is(120, 120)); // true ===
  2. console.log(Object.is(NaN, NaN)); // true
  3. console.log(NaN === NaN); // false
复制代码

  • Object.assign 对象的合并
  1. const obj1 = {
  2.   host: "localhost",
  3.   port: 3306,
  4.   username: "admin",
  5.   password: "admin",
  6. };
  7. const obj2 = {
  8.   host: "127.0.0.1",
  9.   port: 8080,
  10.   username: "root",
  11.   password: "root",
  12.   isLogin: false,
  13. };
  14. console.log(Object.assign(obj1, obj2)); // {host: '127.0.0.1', port: 8080, username: 'root', password: 'root', isLogin: false}
复制代码

  • Object.setPrototypeOf 设置原型对象  Object.getPrototypeof
  1. const school = {
  2.   name: "研究院",
  3. };
  4. const cities = {
  5.   xiaoqu: ["北京", "上海", "广州"],
  6. };
  7. Object.setPrototypeOf(school, cities);
  8. console.log(Object.getPrototypeOf(school));
  9. console.log(school);
复制代码
输出结果

1.20.1  ES6-模块化介绍、优势以及产品

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

  • 模块化的好处
模块化的优势有以下几点:1)  防止命名冲突2)  代码复用3)  高维护性

  • 模块化规范产品
ES6之前的模块化规范有:1)  CommonJS => NodeJS、Browserify2)  AMD => requireJS3)  CMD => seaJS

  • ES6 模块化语法
模块功能主要由两个命令构成:export 和import。1) export 命令用于规定模块的对外接口2) import 命令用于输入其他模块提供的功能 1.20.2  ES6-浏览器使用ES6模块化引入模块html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>ES6-浏览器使用ES6模块化引入模块</title>
  8.   </head>
  9.   <body>
  10.    
  11.   </body>
  12. </html>
复制代码
js代码-m1.js
  1. // 分别暴露
  2. export let school = "西南石油大学";
  3. export function study() {
  4.     console.log("我可以学习到新的技能!!")
  5. }
复制代码
1.20.3  ES6模块暴露数据语法汇总
html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>ES6模块暴露数据语法汇总</title>
  8.   </head>
  9.   <body>
  10.    
  11.   </body>
  12. </html>
复制代码
js代码-m2.js
  1. // 统一暴露
  2. let school = "西南石油大学";
  3. function findJob() {
  4.     console.log("我一定能行!");
  5. }
  6. export { school, findJob };
复制代码
js代码-m3.js
  1. // 默认暴露
  2. export default {
  3.     school: "西南石油大学",
  4.     change: function () {
  5.         console.log("我可以改变自己!");
  6.     }
  7. }
复制代码
1.20.4  ES6引入模块数据语法汇总
html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>ES6引入模块数据语法汇总</title>
  8.   </head>
  9.   <body>
  10.    
  11.   </body>
  12. </html>
复制代码
1.20.5  ES6-浏览器使用ES6模块化方式二
html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>ES6-浏览器使用ES6模块化方式二</title>
  8.   </head>
  9.   <body>
  10.    
  11.    
  12.    
  13.    
  14.   </body>
  15. </html>
复制代码
1.20.6  ES6-babel对ES6模块化代码转换
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>ES6-babel对ES6模块化代码转换</title>
  8.   </head>
  9.   <body>
  10.    
  11.    
  12.   </body>
  13. </html>
复制代码
1.20.7  ES6模块化引入NPM包
需求-修改页面的背景颜色为粉色步骤:1)安装jquery npm i jquery
2)html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>ES6模块化引入NPM包</title>
  8.   </head>
  9.   <body>
  10.    
  11.   </body>
  12. </html>
复制代码
3)js代码-app.js
  1. import $ from 'jquery';  // const $ = require("jquery");
  2. $("body").css("background", "pink");
复制代码
2.  ES7
2.1  ES7新特性

  • Arrayprototype.includes
Includes 方法用来检测数组中是否包含某个元素,返回布尔类型值
  1. const mingZhu = ["西游记", "红楼梦", "三国演义", "水浒传"];
  2. console.log(mingZhu.includes("西游记")); // true
  3. console.log(mingZhu.includes("石头记")); // false
复制代码

  • 指数操作符
在ES7中引入指数运算符[**],用来实现幂运算,功能与Math.pow 结果相同
  1. console.log(2 ** 10); // 1024
  2. console.log(Math.pow(2, 10)); // 1024
复制代码
3.  ES8
3.1  ES8-async函数

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

  • async函数
1)async函数的返回值为 promise 对象,
2)promise对象的结果由 async函数执行的返回值决定
  1. // async 函数
  2. async function fn() {
  3.   // 返回一个字符串
  4.   // return "好炎热";
  5.   // 返回的结果不是一个 Promise 类型的对象,返回的结果就是成功 Promise 对象
  6.   // return;
  7.   // 抛出错误,返回的结果是一个失败的 Promise
  8.   // throw new Error("出错啦!");
  9.   // 返回的结果如果是一个 Promise 对象
  10.   return new Promise((resolve, reject) => {
  11.     // resolve("读取数据成功!");
  12.     reject("读取数据失败!");
  13.   });
  14. }
  15. const result = fn();
  16. // console.log(result);
  17. // 调用 then 方法
  18. result.then(value => {
  19.     console.log(value);
  20.   },reason => {
  21.     console.warn(reason);
  22.   }
  23. );
复制代码
3.2  ES8-await表达式

  • await 表达式
1)await 必须写在async函数中
2)await 右侧的表达式一般为 promise 对象
3)await 返回的是 promise 成功的值
4)await 的 promise 失败了,就会抛出异常,需要通过 try...catch 捕获处理
  1. // 创建 Promise 对象
  2. let p = new Promise((resolve, reject) => {
  3.   // resolve("请求成功!");
  4.   reject("请求失败!");
  5. });
  6. // await 要放在 async 函数中.
  7. async function main() {
  8.   try {
  9.     let result = await p;
  10.     console.log(result);
  11.   } catch (e) {
  12.     console.error(e);
  13.   }
  14. }
  15. // 调用函数
  16. main();
复制代码
3.3  ES8-async与await结合读取文件内容
  1. // 引入fs
  2. const fs = require("fs");
  3. // 读取为学
  4. function readWeiXue() {
  5.   return new Promise((resolve, reject) => {
  6.     fs.readFile("./resources/为学.md", (err, data) => {
  7.       // 如果失败
  8.       if (err) reject(err);
  9.       // 如果成功
  10.       resolve(data);
  11.     })
  12.   })
  13. }
  14. // 读取插秧诗
  15. function readChaYangShi() {
  16.   return new Promise((resolve, reject) => {
  17.     fs.readFile("./resources/插秧诗.md", (err, data) => {
  18.       // 如果失败
  19.       if (err) reject(err);
  20.       // 如果成功
  21.       resolve(data);
  22.     })
  23.   })
  24. }
  25. // 读取观书有感
  26. function readGuanShu() {
  27.   return new Promise((resolve, reject) => {
  28.     fs.readFile("./resources/观书有感.md", (err, data) => {
  29.       // 如果失败
  30.       if (err) reject(err);
  31.       // 如果成功
  32.       resolve(data);
  33.     })
  34.   })
  35. }
  36. //声明一个 async 函数
  37. async function main() {
  38.   // 获取为学内容
  39.   let weiXue = await readWeiXue();
  40.   // 获取插秧诗内容
  41.   let chaYang = await readChaYangShi();
  42.   // 获取观书有感
  43.   let guanShu = await readGuanShu();
  44.   console.log(weiXue.toString());
  45.   console.log(chaYang.toString());
  46.   console.log(guanShu.toString());
  47. }
  48. main();
复制代码
3.4  ES8-async与await结合发送AJAX请求
  1. // 发送 AJAX 请求,返回的结果是 Promise 对象
  2. function sendAJAX(url) {
  3.   return new Promise((resolve, reject) => {
  4.     // 1、创建对象
  5.     const x = new XMLHttpRequest();
  6.     // 2、初始化
  7.     x.open("GET", url);
  8.     // 3、发送
  9.     x.send();
  10.     // 4、事件绑定
  11.     x.onreadystatechange = function () {
  12.       if (x.readyState === 4) {
  13.         if (x.status >= 200 && x.status < 300) {
  14.           // 请求成功
  15.           resolve(x.response);
  16.         } else {
  17.           // 请求失败
  18.           reject(x.status);
  19.         }
  20.       }
  21.     };
  22.   });
  23. }
  24. // Promise then 方法的测试
  25. // sendAJAX("https://api.apiopen.top/api/getDynamic").then(value=>{
  26. //   console.log(value);
  27. // },reason=>{
  28. // });
  29. // async 与 await 测试
  30. async function main() {
  31.   // 发送 AJAX 请求
  32.   let result = await sendAJAX("https://api.apiopen.top/api/getDynamic");
  33.   // console.log(result);
  34.   let tianQi = await sendAJAX(
  35.     "https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P"
  36.   );
  37.   console.log(tianQi);
  38. }
  39. main();
复制代码
3.5  ES8对象方法扩展

  • Obiect.values 和 Obiect.entries
1)Obiect.values()方法返回一个给定对象的所有可枚举属性值的数组2)Obiect.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组
  1. // 声明对象
  2. const school = {
  3.   name: "西南石油大学",
  4.   xiaoqu: ["新都", "南充"],
  5.   major: ["计算机科学与技术", "软件工程", "人工智能"],
  6. };
复制代码
获取对象所有的键console.log(Object.keys(school));输出结果

获取对象所有的值console.log(Object.values(school));输出结果

 entries
console.log(Object.entries(school));输出结果


  •  Object.getOwnPropertyDescriptors
该方法返回指定对象所有自身属性的描述对象console.log(Object.getOwnPropertyDescriptors(school));输出结果

 使用Object.create()创建对象
  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(obj); // {name: '哈哈'}
复制代码
4.  ES9
4.1  ES9扩展运算符与rest参数
Rest 参数与 spread 扩展运算符在 ES6 中已经引入,不过 ES6 中只针对于数组,在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符。rest 参数
  1. function connect({ host, port, ...user }) {
  2.   console.log(host); // 127.0.0.1
  3.   console.log(port); // 3306
  4.   console.log(user); // {username: 'root', password: 'root', type: 'master'}
  5. }
  6. connect({
  7.   host: "127.0.0.1",
  8.   port: 3306,
  9.   username: "root",
  10.   password: "root",
  11.   type: "master",
  12. });
复制代码
对象合并
  1. const skillOne = {
  2.   a: "html5",
  3.   k: "其他",
  4. };
  5. console.log({ ...skillOne }); // {a: 'html5', k: '其他'}
  6. // console.log({ ...skillOne }['a']); // html5
  7. const skillTwo = {
  8.   b: "css3",
  9. };
  10. const skillThree = {
  11.   c: "vue3",
  12. };
  13. const skillFour = {
  14.   d: "react",
  15. };
  16. const skill = { ...skillOne, ...skillTwo, ...skillThree, ...skillFour };
  17. console.log(skill); // {a: 'html5', k: '其他', b: 'css3', c: 'vue3', d: 'react'}
  18. console.log(skill["d"]); // react
复制代码
4.2  ES9正则扩展-命名捕获分组
声明一个字符串let str = '百度';
  1. // 提取 url 与 『标签文本』
  2. const reg = /<a target="_blank" href="https://www.cnblogs.com/(.*)">(.*)<\/a>/;
  3. // 执行
  4. const result = reg.exec(str);
  5. console.log(result);
  6. console.log(result[1]); // https://www.baidu.com
  7. console.log(result[2]); // 百度
复制代码
输出结果

 分组命名
  1. const reg = /<a target="_blank" href="https://www.cnblogs.com/(?<url>.*)">(?<text>.*)<\/a>/;
  2. const result = reg.exec(str);
  3. console.log(result);
  4. console.log(result.groups.url); // https://www.baidu.com
  5. console.log(result.groups.text); // 百度
复制代码
输出结果

4.3  ES9正则扩展-反向断言
// 声明字符串let str = 'JS5211314你知道么555啦啦啦';1)正向断言
  1. const reg = /\d+(?=啦)/;
  2. const result = reg.exec(str);
  3. console.log(result);
复制代码
2)反向断言
  1. const reg = /(?<=么)\d+/;
  2. const result = reg.exec(str);
  3. console.log(result);
复制代码
5.4  ES10-Symbol.prototype.description
  1. let str = `
  2.   <ul>
  3.       <li>
  4.           <a>肖生克的救赎</a>
  5.           <p>上映日期: 1994-09-10</p>
  6.       </li>
  7.       <li>
  8.           <a>阿甘正传</a>
  9.           <p>上映日期: 1994-07-06</p>
  10.       </li>
  11.   </ul>`;
  12. // 声明正则
  13. // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;
  14. const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
  15. // 执行匹配
  16. let result;
  17. let data = [];
  18. while ((result = reg.exec(str))) {
  19.   data.push({ title: result[1], time: result[2] });
  20. }
  21. // 输出结果
  22. console.log(data);
复制代码
6.  ES11
6.1  ES11-私有属性
  1. // 二维数组转换成对象
  2. const result = Object.fromEntries([
  3.   ["name", "西南石油大学"],
  4.   ["zhuanYe", "计算机科学与技术, 软件工程, 人工智能"],
  5. ]);
  6. console.log(result); // {name: '西南石油大学', zhuanYe: '计算机科学与技术, 软件工程, 人工智能'}
  7. // Map
  8. const m = new Map();
  9. m.set("name", "电子科大");
  10. m.set("zhuanYe", "大数据");
  11. const result = Object.fromEntries(m);
  12. console.log(result); // {name: '电子科大', zhuanYe: '大数据'}
  13. // Object.entries ES8 对象转二维数组
  14. const arr = Object.entries({
  15.   name: "红石榴21",
  16. });
  17. console.log(arr); // [["name","红石榴21"]]
复制代码
6.2  ES11-Promise.allSettled方法
  1. let str = "  Hello World  ";
  2. console.log(str);
  3. console.log(str.trimStart());
  4. console.log(str.trimEnd());
复制代码
  1. const arr = [1, 2, 3, 4, [5, 6]];
  2. console.log(arr.flat()); // [1, 2, 3, 4, 5, 6]
  3. const arr2 = [1, 2, 3, [5, 6, [7, 8, 9]]];
  4. // 参数为深度 是一个数字
  5. console.log(arr2.flat(2)); // [1, 2, 3, 5, 6, 7, 8, 9]
复制代码

 调用all 方法,输出结果

 6.3  ES11-String.prototype.matchAll方法
  1. const arr3 = [1, 2, 3, 4];
  2. const result = arr3.flatMap((item) => [item * 10]);
  3. console.log(result); // [10, 20, 30, 40]
复制代码
 6.4  ES11-可选链操作符
?.
  1. // 创建Symbol
  2. let s = Symbol("西南石油大学");
  3. console.log(s.description); // 西南石油大学
复制代码
6.5  ES11-动态import
html页面
  1. class Person {
  2. // 公有属性
  3. name;
  4. // 私有属性
  5. #age;
  6. #weight;
  7. // 构造方法
  8. constructor(name, age, weight) {
  9.     this.name = name;
  10.     this.#age = age;
  11.     this.#weight = weight;
  12. }
  13. intro() {
  14.     console.log(this.name); // 尕车
  15.     console.log(this.#age); // 18
  16.     console.log(this.#weight); // 45kg
  17. }
  18. }
  19. // 实例化
  20. const girl = new Person("尕车", 18, "45kg");
  21. console.log(girl.name);
  22. //   console.log(girl.#age); // error
  23. //   console.log(girl.#weight); // error
  24. girl.intro();
复制代码
app.js
  1. // 声明两个Promise对象
  2. const p1 = new Promise((resolve, reject) => {
  3.   setTimeout(() => {
  4.     // resolve("商品数量-1");
  5.     reject("出错啦!");
  6.   }, 1000);
  7. });
  8. const p2 = new Promise((resolve, reject) => {
  9.   setTimeout(() => {
  10.     resolve("商品数量-2");
  11.   }, 1000);
  12. });
  13. // 调用allSettled 方法
  14. // 就算有一个失败,也会都会返回
  15. const result = Promise.allSettled([p1, p2]);
  16. console.log(result);
  17. // 调用all 方法
  18. // 两个都成功,才会返回结果
  19. const res = Promise.all([p1, p2]);
  20. console.log(res);
复制代码
hello.js
  1. 调用allSettled 方法,输出结果
复制代码
6.6  ES11-BigInt类型
  1. let str = `<ul>
  2.       <li>
  3.           <a>肖生克的救赎</a>
  4.           <p>上映日期: 1994-09-10</p>
  5.       </li>
  6.       <li>
  7.           <a>阿甘正传</a>
  8.           <p>上映日期: 1994-07-06</p>
  9.       </li>
  10.   </ul>`;
  11. // 声明正则
  12. const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
  13. // 调用方法
  14. const result = str.matchAll(reg);
  15. // for(let v of result){
  16. //   console.log(v);
  17. // }
  18. // console.log(result);
  19. const arr = [...result];
  20. console.log(arr);
复制代码
6.7  ES11-绝对全局对象globalThis
在html页面中
  1. function main(config) {
  2.   // const dbHost = config && config.db && config.db.host;
  3.   const dbHost = config?.db?.host;
  4.   console.log(dbHost);
  5. }
  6. main({
  7.   db: {
  8.     host: "127.0.0.1",
  9.     username: "root"
  10.   },
  11.   cache: {
  12.     host: "127.0.0.2",
  13.     username: "admin"
  14.   },
  15. });
复制代码
输出结果

在node运行中
console.log(globalThis);输出结果

鉴定完毕,欢迎友们一起交流学习!

来源:https://www.cnblogs.com/liushihong21/p/17678185.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具