ES6 ~ ES11整理
2024-05-17 23:38:07
目录
一、ESMAScript相关介绍
1.1 什么是ECMA
1.2 什么是ESMAScript
1.3 什么是ECMA-262
1.4 ECMA-262 l历史
1.5 谁在维护 ECMA-262
1.6 为什么学习ES6
1.7 ES6 兼容性
二、ESMAScript 6 新特性
2.1 let声明变量
2.1.1 let声明变量
2.1.2 let实践案例
2.2 const 声明常量
2.2.1 const声明常量
2.3 解构赋值
2.4 模板字符串
2.5 简化对象写法
2.6 箭头函数
2.6.1 箭头函数定义、注意事项
2.6.2 箭头函数实践
2.7 函数参数默认值
2.8 rest参数
2.9 spread 扩展运算符
2.9.1 扩展运算符
2.9.2 扩展运算符的应用
2.10 Symbol基本使用
2.10.1 创建Symbol
2.10.2 Symbol 创建对象属性
2.10.3 Symbol 内置属性
2.11 迭代器
2.11.1 迭代器原理
2.11.2 迭代器自定义遍历数据
2.12 生成器 generator
2.12.1 生成器函数
2.12.2 生成器函数参数
2.12.3 生成器函数实例1
2.12.4 生成器函数实例2
2.13 Promise
2.13.1 Promise基本语法
2.13.2 Promise 读取文件
2.13.3 Promise封装AJAX
2.13.4 Promise-then方法
2.13.5 Promise实践-读取多个文件
2.13.6 Promise-catch方法
2.14 Set
2.14.1 set集合基本方法
2.14.2 Set集合实践
2.15 Map
2.15.1 Map基本方法
2.16 class类
2.16.1 class类
2.16.2 类的静态成员
2.16.3 类继承
2.16.4 class的set-get
2.17 数值扩展
2.17.1 Number.EPSILON 【最小精度】
2.17.2 二进制和八进制
2.17.3 Number.isFinite 检测数值是否为有限数
2.17.4 Number.isNaN 检测一个数值是否为 NaN
2.17.5 Number.parseInt Number.parseFloat 字符串转整数
2.17.6 Number.isInteger 判断一个是否为整数
2.17.7 Math.trunc 将数字的小数部分抹掉
2.17.8 Math.sign 判断一个数到底为正数(1) 负数(-1) 还是零(0)
2.18 对象方法扩展
2.18.1 Object.is 判断两个值是否完全相等
2.18.2 Object.assign 对象的合并
2.18.3 Object.setPrototypeOf 设置原型对象 Object.getPrototypeOf 获取原型对象
2.19 模块化
2.19.1 模块化的好处
2.19.2 模块化规范产品
2.19.3 ES6 模块化语法
2.19.4 模块化 暴露 【export 】的方式
2.19.5 模块化 导入【import】的方式
2.19.5 导入模块的写法方式 【标签中导入和专门的导入文件】
2.19.6 使用ES6的导入导出，在有些浏览器不能识别，所以需要将ES6转为ES5
2.19.7 模块化引入npm包
三、ESMAScript 7 新特性
3.1 Array.prototype.includes
3.2 指数操作符
四、ESMAScript 8 新特性
4.1 async 和 await
4.1.1 async函数
4.1.2 await函数
4.1.3 async 和 await 结合读取文件
4.1.4 async和await封装AJAX请求
4.2 Object.values 和 Object.entries
4.2.1 Object.values() 方法返回一个给定对象的所有可枚举属性的数组。
4.2.2 Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组
4.2.3 Object.getOwnPropertyDescriptors()方法返回指定对象所有自身属性的描述对象
五、ESMAScript 9 新特性
5.1 对象扩展
5.1.1 扩展运算符
5.1.2 rest参数
5.2 正则的扩展
5.2.1 命名的捕获分组
5.2.2 反向断言
5.2.3 dotAll
六、ESMAScript 10 新特性
6.1 对象扩展方法 Object.fromEntries 【转为对象】
6.2 字符串扩展方法 trimStart trimEnd
6.3 数组扩展方式 flat 与 flatMap
6.3.1 flat 将多维数组转为低位数组
6.3.2 flatMap 相当于map和flat的结合
6.4 Symbol.prototype.description 获取Symbol描述
七、ESMAScript 11 新特性
7.1 私有属性
7.2 Promise.allSettled 方法
7.3 String.prototype.matchAll 方法 分组捕获的结果
7.4 动态 import
7.5 BigInt 类型-基本数据类型
7.6 绝对全局对象 globalThis
7.7 可选链操作符
ES 全称 EcmaScript，是脚本语言的规范，而平时经常编写的 JavaScript，是EcmaScript的一种实现，所以 ES 新特性其实指的就是 JavaScript 的新特性。
一、ESMAScript相关介绍
1.1 什么是ECMA
ECMA（European Computer Manufacture Associate）中文名称为欧洲计算机制造协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为 Ecma国际。
1.2 什么是ESMAScript
ESMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。
1.3 什么是ECMA-262
Ecma 国际指定了需要标准，而 ECMA-262 只是其中的一个，所有标准列表查看
Standards - Ecma International
1.4 ECMA-262 l历史
ECMA-262 （ECMAScript）历史版本查看网址
ECMA-262 - Ecma International
| 第1版 | 1997年 | 指定了语言的基本语言 |
| 第2版 | 1998年 | 较小改动 |
| 第3版 | 1999年 | 引入正则、异常处理、格式化输出等。IE开始支持。 |
| 第4版 | 2007年 | 过于激进，未发布 |
| 第5版 | 2009年 | 引入严格模式、JSON、扩展对象、数组、原型、字符串、日期方法 |
| 第6版 | 2015年 | 模块化、面向对象语法、Promise、箭头函数、let、const、数组解构赋值等等 |
| 第7版 | 2016年 | 幂运算符、数组扩展、Async/await 关键字 |
| 第8版 | 2017年 | Async/await、字符串扩展 |
| 第9版 | 2018年 | 对象解构赋值、正则扩展 |
| 第10版 | 2019年 | 扩展对象、数组方法 |
| ES.next | 动态只想一个版本 |
注：从ES6开始，每年发布一个版本，版本号比年份最后一位大1 。
1.5 谁在维护 ECMA-262
TC39（Technical Committee 39）是推进 ECMAScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC39定期召开会议，会议由会员公司代表与特邀专家出席。
1.6 为什么学习ES6
- ES6 的版本变动内容最多，具有里程碑意义
- ES6加入许多新的语法特性，编程实现更简单、高效
- ES6是前端发展趋势，就业必备技能
1.7 ES6 兼容性
https://kangax.github.io/compat-table/es6/ 可查看兼容性
二、ESMAScript 6 新特性
2.1 let声明变量
2.1.1 let声明变量
1.变量不能重复声明；
2.变量有块级作用域；
3.不存在变量提升
4.不影响作用域链
<script>// 声明变量的方式let a;let b, c, d;let e = 100;let f = 521, g = "ll", h = [];// 1.变量不能重复声明// let star = "ll";let star = "lxxl";// 重复声明就会报错：Uncaught SyntaxError: Identifier 'star' has already been declared// var 是可以的,使用最新的值。var star2 = "ll";var star2 = "lxxl";console.log(star2);// 2.块级作用域{let girl = "cc"}// 报错：Uncaught ReferenceError: girl is not defined// console.log(girl);// 3.不存在变量提升// 报错：Uncaught ReferenceError: Cannot access 'song' before initialization// console.log(song);let song = 'gg';// var 定义的变量存在变量提升// 4.不影响作用域链{let school = "xinchi";function fn() {console.log(school);}fn();}</script>2.1.2 let实践案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>let 实践案例</title><style>.page-header {border-bottom: 1px #ccc solid;}.item {width: 50px;height: 20px;border: 1px #ccc solid;display: inline-block;margin-right: 10px;}</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指向当前调用事件函数的domconsole.log(this);// 这种也可以，这里想区分 let 和 var 的不同// this.style.background = "pink";// 用var定义变量i时这种方式会报错。items[i].style.background = "pink";}}// 当使用var定义时，实际i为全局变量，并且在最后一次i已经被自增为3// 所以会报错{var i = 0;}{var i = 1;}{var i = 2;}// 但是使用let定义// 在事件函数中找i，找不到，便去上层去找，因为let有块级作用域，所以i是当前的i，不是最后自增之后的i{let i = 0;items[i].onclick = function () {console.log(this)// this.style.background = "pink";items[i].style.background = "pink";}}{let i = 1;}{let i = 2;}</script>
</body></html>2.2 const 声明常量
2.2.1 const声明常量
1.一定要赋初始值；
2.一般常量使用大写（潜规则）；
3.常量的值不能修改
4.块级作用域
5.对于数组和对象的元素修改，不能算作对常量的修改，不会报错
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>const声明常量</title>
</head><body><script>// 声明常量const SCHOOL = "xinchi";// 1.一定要赋初始值// 报错：Uncaught SyntaxError: Missing initializer in const declaration// const A;// 2.一般常量使用大写（潜规则）const a = 100;// 3.常量的值不能修改// 报错：Uncaught TypeError: Assignment to constant variable.// SCHOOL = "heichi";// 4.块级作用域{const PLAYER = "uzi";}// 报错：Uncaught ReferenceError: PLAYER is not defined// console.log(PLAYER);// 5.对于数组和对象的元素修改，不算作对常量的修改，不会报错const TEAM = ['a', 'b', 'c', 'd'];TEAM.push('e');// 直接修改常量就会报错// 报错：Uncaught TypeError: Assignment to constant variable.TEAM = 100;</script>
</body></html>2.3 解构赋值
1.数组的解构赋值
const F4 = ['xl', 'gl', 'll', 'gx']; let [x, g, ll, xg] = F4;
2.对象的解构赋值
const zhao = { name: "zhao", age: 'no',say: function () {console.log('say hello');}}
可以全部取出：let { name, age1, say } = zhao;
也可以单独取一个属性：let { say } = zhao;
注意：对象的解构赋值，变量必须和对象属性名一致
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>解构赋值</title>
</head><body><script>// ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值// 1.数组的解构const F4 = ['xl', 'gl', 'll', 'gx'];let [x, g, ll, xg] = F4;console.log(x); // xlconsole.log(g); // glconsole.log(ll); // llconsole.log(xg); // gx// 2.对象的解构const zhao = {name: "zhao",age: 'no',say: function () {console.log('say hello');}}// 注意：对象的解构赋值，变量必须和对象属性名一致。// let { name, age1, say } = zhao;// console.log(name); // zhao// console.log(age1); // undefined// console.log(say); //function () {console.log('say hello');}// 也可以单独取一个属性let { say } = zhao;console.log(say);</script>
</body></html>2.4 模板字符串
语法：let str = ` hello `;
可以包含参数：let world="world"; let str2 = ` hello ${world}`;
参数语法：${ 变量}
注意：内容中可以出现换行符，空格等；原样输出，不会去掉空格、换行符。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>模板字符串</title>
</head><body><script>// ES5字符串 "" ''// ES6 引入新的声明字符串的方式 【 ` ` 】// 1.声明let str = `我也是一个字符串`;console.log(str, typeof str);// 2.内容可以直接出现换行符、空格,不改动直接输出let str2 = `<ul><li>沈腾</li><li>玛丽</li><li>艾伦</li></ul>`;console.log(str2);// 3.变量拼接// ES5用字符串和+ 一起拼接字符串// ES6 模板字符串可以使用变量来替换需要拼接的值.// 变量语法：${变量}let str3 = "魏翔";let out = `${str3}是一个好演员`;console.log(out);</script>
</body></html>2.5 简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样更简洁。
注意：只有当变量和对象的属性名需要保持一致才能使用对象的简化对象写法。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>简化对象写法</title>
</head><body><script>// ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。// 这样可以更加简洁let name = "ll";let change = function () {console.log('change myself');}// 只有变量名和属性名要保持一致才能简写const school = {name,change,improve() {console.log('简写方式2')},// 就类似于improve: function () {console.log('简写方式')}};console.log(school);school.change();school.improve();</script>
</body></html>2.6 箭头函数
2.6.1 箭头函数定义、注意事项
ES6 允许使用 【箭头函数】 (==>)定义函数
注意：
1.this 是静态的。this 始终指向函数声明的作用域下的 this的值
2.不能作为构造函数实例化对象
3.不能使用 arguments 变量
4.箭头函数的简写
1)省略小括号，当形参有且只有一个的时候; let add = n => {return n + n;}
2)省略花括号，当代码体只有一条语句的时候，此时 return 必须省略;
而且语句的执行结果就是函数的返回值;
let pow = (n) => n * n;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>箭头函数</title>
</head><body><script>// ES6 允许使用 【箭头函数】 (==>)定义函数// 声明一个函数let fn = () => {}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 = "ll";const school = {name: 'lxl'};//直接调用getName(); // ll 指向window的namegetName2(); // ll 指向window的name// call方法调用getName.call(school); // lxl 可以改变this指向，指向schoolgetName2.call(school); // 不能改变this指向// 2.不能作为构造函数实例化对象let Person = (name, age) => {this.name = name;this.age = age;}// 报错：Uncaught TypeError: Person is not a constructor// let me = new Person('ll', 20);// console.log(me);// 3.不能使用 arguments 变量let fnn = () => {// 报错：Uncaught ReferenceError: arguments is not defined// console.log(arguments);}fnn(1, 2, 3);// 4.箭头函数的简写// 1) 省略小括号，当形参有且只有一个的时候let add = n => {return n + n;}console.log(add(9)); // 18// 2) 省略花括号，当代码体只有一条语句的时候，此时 return 必须省略// 而且语句的执行结果就是函数的返回值let pow = (n) => n * n;console.log(pow(2));</script>
</body></html>2.6.2 箭头函数实践
箭头函数适合 与 this 无关的回调；如：定时器，数组的方法回调。
箭头函数不适合与 this有关的回调，事件回调，对象的方法。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>箭头函数实践</title><style>div {width: 200px;height: 200px;background: #58a;}</style>
</head><body><div id="ad"></div><script>// 需求：点击div 2s后颜色变成橘色// 获取元素let ad = document.getElementById('ad');// 绑定事件ad.addEventListener('click', function () {// 定时器console.log(this); // 这里的this指向 当前点击的dom// 解决办法一：在这里保存一个当前的饿thislet _this = this;// setTimeout(function () {// // 修改背景颜色 this// console.log(this);// 指向window，所以报错// // 报错：Uncaught TypeError: Cannot set properties of undefined (setting 'background')// // this.style.background = 'pink';// // 使用当前的this// _this.style.background = 'pink';// }, 2000);// 解决办法二，使用箭头函数，this 始终指向函数声明的作用域下的 this的值setTimeout(() => {// 修改背景颜色 thisconsole.log(this);// 指向当前函数声明的作用域的thisthis.style.background = 'pink';}, 2000);})// 需求2：从数组中返回偶数的元素const arr = [1, 2, 3, 3, 5, 6, 7, 8];const result = arr.filter(function (item) {if (item % 2 === 0) {return true;} else {return false;}})console.log(result);// 使用箭头函数并简写const result1 = arr.filter((item) => { return item % 2 === 0 });// 发现只有一条语句和有且只有一个参数，在简写：去掉() {} 和 returnconst result2 = arr.filter(item => item % 2 === 0);console.log(result2); // [2, 6, 8]// 箭头函数适合 与 this 无关的回调；如：定时器，数组的方法回调。// 箭头函数不适合与 this有关的回调，事件回调，对象的方法const obj = {name: 'll',getName: function () {console.log(this); //指向当前的调用者this.name;(() => {console.log(this) // 指向obj})()},getAge: () => {console.log(this); //指向window(() => {console.log(this) // 指向window})()}}const obj1 = {name: "loo"}obj.getName();obj.getName.call(obj1);obj.getAge();</script>
</body></html>2.7 函数参数默认值
ES6 允许给函数参数赋值初始值
1.形参初始值 具有默认值的参数，一般位置要靠后（潜规则）
2.与解构赋值结合。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><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); //13// 2.与解构赋值结合// 对象解构赋值可以，保证形参和实参名称一致即可function connect({ host = '127.0.0.1', username, age, port }) {console.log(host);console.log(username);console.log(age);console.log(port);}connect({age: "ll",username: 20,port: 500})// 数组解构赋值也可以function connect2([num1, num2, num3 = 10]) {console.log(num1);console.log(num2);console.log(num3);}connect2([1, 2])</script>
</body></html>2.8 rest参数
ES5 的 arguments 的理解：Arguments 对象 - JavaScript | MDN
ES6 引入rest 参数，用于获取函数的实参，用来代替 arguments
注意：
1.rest 参数必须要放到最后。
2.rest 参数是一个数组，可以使用数组的filter，some，every，map 等方法。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>rest参数</title>
</head><body><script>// ES6 引入rest 参数，用于获取函数的实参，用来代替 arguments// ES5 获取实参的方式function date() {// arguments 是一个对应于传递给函数的参数的类数组对象。// arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的Arrayconsole.log(arguments); //console.log(typeof arguments); // 'object'console.log(arguments[0]); //aa 可以通过数组的方式获取// 转换为真正的数组let args = Array.from(arguments);let args2 = [...arguments];console.log(args, args2); // ['aa', 'bb', 'cc']}date('aa', 'bb', 'cc');// rest 参数function date2(...args) {console.log(args); // [1, 2, 3] 是一个数组，就包含filter，some，every，map 等方法}date2(1, 2, 3);// rest 参数必须要放到最后function fn(a, b, ...args) {console.log(a); // 1console.log(b); // 2console.log(args); // [3, 4, 5, 6]}fn(1, 2, 3, 4, 5, 6);// 不放在后面就会报错// Uncaught SyntaxError: Rest parameter must be last formal parameter// function fn1(a, ...args, b) {// console.log(a);// console.log(b);// console.log(args);// }// fn1(1, 2, 3, 4, 5, 6);</script>
</body></html>2.9 spread 扩展运算符
2.9.1 扩展运算符
【...】 扩展运算符能将【数组】转换为逗号分隔的【参数序列】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>spread 扩展运算符</title>
</head><body><script>// 【...】 扩展运算符能将【数组】转换为逗号分隔的【参数序列】// 声明一个数组 ...const tfboys = ['易烊千玺', '王源', '王俊凯'];// 声明一个函数function chunwan() {console.log(arguments);}chunwan(...tfboys); //类似：chunwan('易烊千玺', '王源', '王俊凯');</script>
</body></html>2.9.2 扩展运算符的应用
1.数组的合并。
2.数组的克隆（浅克隆）。
3.将伪数组转为真正的数组。如：arguments参数、获取的一组dom等
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>扩展运算符的应用</title>
</head><body><div></div><div></div><div></div><p>1</p><p>2</p><script>// 1.数组的合并const kuazi = ["肖央", "王太利"];const fenghuang = ['曾毅', '玲花'];// 使用数组的 concat 方法// const zuixuanxiaopingguo = kuazi.concat(fenghuang);// 使用扩展运算符const zuixuanxiaopingguo = [...kuazi, ...fenghuang];console.log(zuixuanxiaopingguo); //['肖央', '王太利', '曾毅', '玲花']// 2.数组的克隆（浅克隆）const sanzhihua = ['E', 'G', 'M'];const sanyecao = [...sanzhihua];console.log(sanyecao); //['E', 'G', 'M']sanzhihua.push({a: 123});// 更改原数组的引用类型的值，就会影响复制的值，所以证明是浅拷贝const me = [...sanzhihua];console.log(me); // ['E', 'G', 'M', 3: {a: 456}]sanzhihua[sanzhihua.length - 1].a = 456;console.log(me); // ['E', 'G', 'M', 3: {a: 456}]// 3.将伪数组转为真正的数组const p = document.querySelector('p');// querySelector 返回的一个dom，且取的是第一个console.log(p);const divs = document.querySelectorAll('div');// 返回的是一组console.log(divs);const divArr = [...divs];console.log(divArr); // [div, div, div]</script>
</body></html>2.10 Symbol基本使用
Symbol 详细了解地址： Symbol - JavaScript | MDN
ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol的特点：
1) Symbol 的值是唯一的，用来解决命名冲突的问题。
2) Symbol 值不能与其他数据进行运算。
3) 定义的对象属性不能使用 for ... in 循环遍历，但是可以使用 Reflect.ownkeys 来获取对象的所有键名
2.10.1 创建Symbol
创建 Symbol方式：
1. 使用Symbol()创建 。 如： let s = Symbol();
2. 使用Symbol.for 创建。 如：let s4 = Symbol.for('aa');
注意：
1.不能与其他数据进行运算（会报错）。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Symbol</title>
</head><body><script>// 创建 Symbollet s = Symbol();console.log(s, typeof s); // Symbol() 'symbol'let s2 = Symbol('尚硅谷');let s3 = Symbol('尚硅谷');console.log(s2, s3); // Symbol(尚硅谷) Symbol(尚硅谷)console.log(s2 == s3); // false// Symbol.for 创建let s4 = Symbol.for('aa');let s5 = Symbol.for('aa');console.log(s4, s5); // Symbol(aa) Symbol(aa)console.log(s4 == s5); // true// 不能与其他数据进行运算// 报错 Uncaught TypeError: Cannot convert a Symbol value to a number// let result = s + 100;// let result = s > 100;// 报错：Uncaught TypeError: Cannot convert a Symbol value to a stringlet result = s + '100';// 整理数据类型// USONB you are so niubility// U undefined// S string Symbol// O object// N null number// B boolean</script>
</body></html>2.10.2 Symbol 创建对象属性
Reflect.ownKeys(youxi)：获取所有的key
调用方式：
可以 拿到key再去调用方法。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Symbol创建对象属性</title>
</head><body><script>// 向对象中添加方法 up downlet game = {up: function () {console.log('up');},down: function () {console.log('down');}}// 声明一个对象let methods = {up: Symbol('up'),down: Symbol('down')};game[methods.up] = function () {console.log('改变形状');}game[methods.down] = function () {console.log('可以下降');}console.log(game); // {up: ƒ, down: ƒ, Symbol(): ƒ, Symbol(): ƒ}game['up']();game[methods.up](); // 改变形状let say = Symbol('say');let youxi = {name: "狼人杀",[say]: function () {console.log('说话');},[Symbol.for('zibao')]: function () {console.log('自爆');},[Symbol('ll')]: function () {console.log('说话');},}console.log(youxi); //{name: '狼人杀', Symbol(say): ƒ, Symbol(zibao): ƒ}youxi[say](); //说话youxi[Symbol.for('zibao')](); //自爆console.log(Reflect.ownKeys(youxi));// ['name', Symbol(say), Symbol(zibao), Symbol(ll)]youxi[(Reflect.ownKeys(youxi)[3])](); // 说话</script>
</body></html>2.10.3 Symbol 内置属性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Symbol 内置属性 </title>
</head><body><script>class Person {static [Symbol.hasInstance](params) {console.log(params); // {}console.log("被用来检测类型");return false;}}let o = {};console.log(o instanceof Person); // falseconst arr = [1, 2, 3];const arr2 = [4, 5, 6];arr2[Symbol.isConcatSpreadable] = false;console.log(arr.concat(arr2)); // [1, 2, 3, Array(3)]</script>
</body></html>2.11 迭代器
迭代器(Iterator) 是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。
1.ES6 创造了一种新的遍历命令 for...of 循环，Iterator接口主要供 for...of 消费
2.原生具备 Iterator 接口的数据（可用 for of 遍历）。
a) Array
b) Arguments
c) Set
d) String
e) TypeArray
f) Map
g) NodeList 如：一组dom
3. 工作原理
a) 创建一个指针对象，指向当前数据结构的起始位置。
b) 第一次调用对象的next方法，指针自动指向数据的第一个成员
c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最会一个成员
d) 每调用 next 方法返回一个包含 value 和 done 属性的对象。
注：需要自定义遍历数据的时候，要想到迭代器。
2.11.1 迭代器原理
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>迭代器</title>
</head><body><script>// 声明一个数组const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];// 使用 for...of 遍历数组for (let v of xiyou) {console.log(v); // '唐僧' '孙悟空' '猪八戒' '沙僧'}let iterator = xiyou[Symbol.iterator]();console.log(xiyou);console.log(iterator);// 调用对象的next方法console.log(iterator.next()); //{value: '唐僧', done: false}console.log(iterator.next()); //{value: '孙悟空', done: false}console.log(iterator.next()); //{value: '猪八戒', done: false}console.log(iterator.next()); //{value: '沙僧', done: false}console.log(iterator.next()); //{value: undefined, done: true}</script>
</body></html>2.11.2 迭代器自定义遍历数据
给需要遍历的变量添加 [Symbol.iterator]() {} 方法。
注意： 索引的自增，和next方法的实现。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>自定义遍历数据</title>
</head><body><script>//声明对象const banji = {name: "z终极一班",stus: ["xiaoming","xiaoning","xiaotian","knight"],//报错：Uncaught TypeError: Result of the Symbol.iterator method is not an object[Symbol.iterator]() {// 索引变量let index = 0;let _this = this;// 报错： undefined is not a functionreturn {// 报错：Uncaught TypeError: Iterator result undefined is not an objectnext: function () {// 一直打印// return { value: 'abc', done: false }if (index < _this.stus.length) {const result = { value: _this.stus[index], done: false };// 下标自增index++;return result;} else {return { value: undefined, done: true }}}}}}console.log(banji);//遍历这个对象for (let v of banji) {// 不定义[Symbol.iterator] 报错// 报错：banji is not iterableconsole.log(v); // xiaoming xiaoning xiaotian knight}</script>
</body></html>2.12 生成器 generator
生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
2.12.1 生成器函数
生成器其实就是一个特殊的函数。
语法：function* fun() {console.log("hello generator");}
必须使用next方法才能调用：let iterator = fun(); iterator.next();
yield：yield 函数代码的分隔符，每调用一个 next 执行一个代码块
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>生成器函数</title>
</head><body><script>// 生成器其实就是一个特殊的函数// 异步编程 纯回调函数 node fs ajax mongodbfunction* fun() {console.log("hello generator");}let iterator = fun();console.log(iterator); //gen {<suspended>}iterator.next(); //hello generator// yield 函数代码的分隔符，每调用一个 next 执行一个代码块function* gen() {// console.log(111);yield '一只没有耳朵';// console.log(222);yield '一只没有尾巴';// console.log(333);yield '真奇怪';// console.log(444);}let iterators = gen();// iterators.next(); //111// iterators.next(); //222// iterators.next(); //333// iterators.next(); //444console.log(iterators.next()); //{value: '一只没有耳朵', done: false}console.log(iterators.next()); //{value: '一只没有尾巴', done: false}console.log(iterators.next()); //{value: '真奇怪', done: false}console.log(iterators.next()); //{value: undefined, done: true}</script>
</body></html>2.12.2 生成器函数参数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>生成器函数参数</title>
</head><body><script>function* gen(arg) {console.log(arg); // AAAyield 111;yield 222;yield 333;}// 执行获取迭代器对象// let iterator = gen('AAA');// console.log(iterator.next()); //{value: 111, done: false}function* fun(arg) {console.log(arg); // AAAlet one = yield 111;console.log(one);let two = yield 222;console.log(two);let three = yield 333;console.log(three);}// 执行获取迭代器对象let iterators = fun('AAA');console.log(iterators.next()); //{value: 111, done: false}// next 方法可以传入实参console.log(iterators.next('BBB'));console.log(iterators.next('CCC'));console.log(iterators.next('DDD'));</script>
</body></html>2.12.3 生成器函数实例1
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><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.4 生成器函数实例2
多理解。
每次调用next传递上次获取的值。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title> 生成器函数实例2</title>
</head><body><script>// 模拟获取 用户数据 订单数据 商品数据function getUser() {setTimeout(() => {let data = "user data";// 调用next方法，并且将数据传入iterator.next(data);}, 1000);}function getUserInfo(users) {setTimeout(() => {console.log(users);let data = "user info data";iterator.next(data);}, 1000);}function getUserGoods(info) {setTimeout(() => {console.log(info);let data = "user goods data";iterator.next(data);}, 1000);}function* gen() {let users = yield getUser();let info = yield getUserInfo(users);let goods = yield getUserGoods(info);}let iterator = gen();iterator.next();</script>
</body></html>2.13 Promise
Promise 是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。
1.Promise 构造函数：Promise (excutor) {}
2.Promise.prototype.then 方法
3.Promise.prototype.catch 方法
2.13.1 Promise基本语法
let p = new Promise( ( resolve, reject )=>{});
两个参数：
resolve：成功的执行的方法。
reject：失败的执行的方法。
需要使用then方法获取执行的结果。
then也可以有两个参数【回调函数】。一个参数时是成功的回调函数，失败用catch方法捕获。
第一个参数回调函数：成功的回调函数
第二个参数回调函数：失败的回调函数
catch：失败的回调函数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Promise基本语法</title>
</head><body><script>// 实例化 Promise 对象const p = new Promise(function (resolve, reject) {setTimeout(function () {// let data = "数据库中的用户数据";// 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.13.2 Promise 读取文件
// 1.引入 fs 模块
const fs = require('fs');// 2.调用方法读取文件
fs.readFile('./file/为学.md', function (err, data) {// 如果失败，则抛出错误if (err) throw err;// 如果没有出错，则输出内容console.log(data);// 输出文件流 bufferconsole.log(data.toString());// 可以使用toString()将buffer转为字符串
})// 3.使用 Promise 封装
const p = new Promise(function (resolve, reject) {fs.readFile('./file/为学.md', function (err, data) {// 如果失败，则抛出错误if (err) throw err;// 更改路径导致失败// 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 name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Promise封装AJAX</title>
</head><body><script>// 接口地址： https://api.apiopen.top/getJokeconst p = new Promise((resolve, reject) => {// 1.创建对象const xhr = new XMLHttpRequest();// 2.初始化xhr.open('GET', 'https://api.apiopen.top/getJoke');// 3.发送xhr.send();// 4.绑定事件，处理响应结果xhr.onreadystatechange = function () {if (xhr.readyState === 4) {// 判断响应状态码if (xhr.status >= 200 && xhr.status < 300) {//表示成功// console.log(xhr.response);resolve(xhr.response);} else {reject(xhr.status);}}}})// 指定回调p.then(function (value) {console.log(value);}, function (reason) {console.log(reason);})</script>
</body></html>2.13.4 Promise-then方法
调用 then 方法 then方法的返回结果是 Promise 对象，对象状态由回调函数的执行结果决定
1.如果回调函数中返回的结果是 非 Promise 类型的属性，状态为成功，返回值为对象的值
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Promise-then方法 </title>
</head><body><script>const p = new Promise(function (resolve, reject) {setTimeout(function () {let data = "数据库中的用户数据";resolve(data);// let err = "数据读取失败";// reject(err);}, 1000);})// 调用 then 方法 then方法的返回结果是 Promise 对象，对象状态由回调函数的执行结果决定// 1.如果回调函数中返回的结果是 非 Promise 类型的属性，状态为成功，返回值为对象的值const result = p.then(value => {// console.log(value);// // 1.非 promise 类型的属性// // return 'lllll'// // 2.是promise 对象// return new Promise((resolve, reject) => {// resolve('ok');// // reject('error');// })// 3.抛出错误throw new Error('出错啦');}, reason => {console.warn(reason);});// // 链式调用// p.then(value => {// }).then(value => {// })console.log(result);</script>
</body></html>2.13.5 Promise实践-读取多个文件
// 引入 fs模块
const fs = require('fs');// 嵌套式的获取
fs.readFile('./file/为学.md', (err, data) => {fs.readFile('./file/插秧诗.md', (err1, data1) => {fs.readFile('./file/观书有感.md', (err3, data3) => {let result = data + '\r\n' + data1 + '\r\n' + data3;console.log(result);})})
})// 使用promise
const p = new Promise((resolve, reject) => {fs.readFile('./file/为学.md', (err, data) => {resolve(data);});
})p.then(value => {return new Promise((resolve, reject) => {fs.readFile('./file/插秧诗.md', (err, data) => {resolve([value, data]);});})
}).then(value => {return new Promise((resolve, reject) => {fs.readFile('./file/观书有感.md', (err, data) => {// 传入value.push(data);resolve(value);});})
}).then(value => {console.log(value.join('\r\n'));
})2.13.6 Promise-catch方法
catch()： 捕获失败，参数为回调函数。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Promise-catch方法</title>
</head><body><script>const p = new Promise((resolve, 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】进行遍历，集合的属性和方法：
1.size 返回集合的元素个数
2.add 增加一个新元素，返回当前集合
3.delete 删除元素，返回boolean值
4.has 检测集合中是否包含某个元素，返回boolean值
5.clear() 清空集合，返回undefined
2.14.1 set集合基本方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Set </title>
</head><body><script>// 声明一个Set let s = new Set();let s2 = new Set(['大事儿', '小事儿', '好事儿', '坏事儿', '小事儿']);// 元素个数console.log(s2.size); // 4// 添加新的元素s2.add('喜事儿');console.log(s2); // Set(5) {'大事儿', '小事儿', '好事儿', '坏事儿', '喜事儿'}// 删除元素s2.delete('坏事儿');console.log(s2); // Set(4) {'大事儿', '小事儿', '好事儿', '喜事儿'}// 检测元素console.log(s2.has('糟心事')); // false// 清空// s2.clear();console.log(s2); // Set(0) {size: 0}for (const v of s2) {console.log(v); // 大事儿 小事儿 好事儿 喜事儿}</script>
</body></html>2.14.2 Set集合实践
1.数组去重
2.取交集
3.取并集
4.取差集
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Set集合实践</title>
</head><body><script>let arr = [1, 2, 3, 4, 3, 2, 5, 1];// 1.数组去重let result = [...new Set(arr)];console.log(result); // [1, 2, 3, 4, 5]// 2.交集let arr2 = [4, 5, 5, 6, 4];let result1 = [...new Set(arr)].filter(item => {let s2 = new Set(arr2);if (s2.has(item)) {return true;} else {return false;}});console.log(result1); // [4, 5]// 简写let result2 = [...new Set(arr)].filter(item => new Set(arr2).has(item));console.log(result2); // [4, 5]// 3.并集let union = [...new Set([...arr, ...arr2])];console.log(union); // [1, 2, 3, 4, 5, 6]// 4.差集let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));console.log(diff); // [1, 2, 3]</script>
</body></html>2.15 Map
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 Iterator 接口，所以可以使用 【扩展运算符】和【for...of】进行遍历，Map的属性和方法：
1.size 返回Map的元素个数
2.set 增加一个新元素，返回当前 Map
3.get 返回键名对象的键值
4.has 检测Map中是否包含某个元素，返回boolean值
5.clear() 清空集合，返回undefined
2.15.1 Map基本方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Map</title>
</head><body><script>// 声明 Maplet m = new Map();// 添加元素m.set('name', 'lll');m.set('change', function () {console.log("我们可以改变");});let key = {school: 'xinchi'};m.set(key, ['北京', '上海', '深圳']);console.log(m);// sizeconsole.log(m.size); //3// 删除m.delete('name');console.log(m); //// 获取console.log(m.get('change')); //function () {console.log("我们可以改变");}console.log(m.get(key)); // ['北京', '上海', '深圳']// 清空// m.clear();// console.log(m.clear()); // undefiendconsole.log(m); // Map(0) {size: 0}// 遍历for (const v of m) {console.log(v); // [{school: 'xinchi'},['北京', '上海', '深圳']}</script>
</body></html>2.16 class类
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看做只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰。更像面向对象编程的语法而已。
知识点：
1.class声明类
2.constructor 定义构造函数初始化
3.extends 继承父类
4.super 调用父级构造方法
5.static 定义静态方法和属性
6.父类方法可以重写
2.16.1 class类
定义属性和方法：
class Phone{ constructor(brand, price){} call() {} }
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>class类</title>
</head><body><script>// ES5写法function Phone(brand, price) {this.brand = brand;this.price = price;}// 添加方法Phone.prototype.call = function () {console.log('我可以打电话');}// 实例化对象let huawei = new Phone('huawei', 5999);huawei.call(); // 我可以打电话console.log(huawei); // Phone {brand: 'huawei', price: 5999}// 使用classclass Shouji {constructor(brand, price) {this.brand = brand;this.price = price;}// 方法必须使用该语法，不能使用 ES5 的对象完整形式call() {console.log('我可以打电话');}}let onePlus = new Shouji("1+", 1999);console.log(onePlus); // Shouji {brand: '1+', price: 1999}onePlus.call(); //我可以打电话</script>
</body></html>2.16.2 类的静态成员
ES5
实例对象的属性和构造函数的属性是不相通的，实例对象的属性和构造函数的原型对象相通。
静态成员只能由对象调用。
实例对象的隐式原型指向构造函数的原型对象。
class类
对于 static 标记的属性和方法它属于类而不属于实例对象。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>类的静态成员 </title>
</head><body><script>function Phone() {}Phone.name = "手机";Phone.change = function () {console.log("我可以改变世界");}Phone.prototype.size = '5.5cm';let nokie = new Phone();// name 和 change 是属于构造函数的属性和方法，不能和new的实例挂钩。console.log(nokie.name); // undefined// 报错： Uncaught TypeError: nokie.change is not a function// nokie.change();// 实例对象和构造函数的原型挂钩console.log(nokie.size); // 5.5cm// 实例对象的属性和构造函数本身的属性和方法不挂钩，和原型的属性和方法挂钩// 实例对象的属性和构造函数的属性是不相通的，实例对象的属性和构造函数的原型对象相通class Phones {// 静态属性static name = "手机";static change() {console.log("call me");}}let nokia = new Phones();console.log(nokia.name); // undefinedconsole.log(Phones.name); // 手机// 对于 static 标记的属性和方法它属于类而不属于实例对象。</script>
</body></html>2.16.3 类继承
ES5的继承方式
子类需要继承父类的属性和方法需要使用call放来建立连接。
注意：必须设置子级构造函数的原型
SmartPhone.prototype = new Phone;
实例对象可以访问子类和父类的属性和方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>ES5继承</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.price = price;}// 设置子级构造函数的原型（必须指定子类的原型）// 将子类的原型和父类构造函数进行挂钩console.log(SmartPhone.prototype); // {constructor: ƒ constructor: ƒ SmartPhone(brand, price, color, size)}SmartPhone.prototype = new Phone;console.log(SmartPhone.prototype);//Phone {brand: undefined constructor: ƒ SmartPhone(brand, price, color, size) photo: ƒ () price: undefined}// 这个可指定也可以不指定SmartPhone.prototype.constructor = SmartPhone;console.log(SmartPhone.prototype);//Phone {brand: undefined constructor: ƒ SmartPhone(brand, price, color, size) photo: ƒ () price: undefined}// 声明子类的方法SmartPhone.prototype.photo = function () {console.log("我可以拍照");}SmartPhone.prototype.playGame = function () {console.log("我可以玩游戏");}const chuizi = new SmartPhone('锤子', 1499, '黑色', '5.5inch');console.log(chuizi);//SmartPhone {brand: '锤子', price: 1499, color: '黑色'}console.log(chuizi.__proto__); // 可以看到子类声明的photo和playGame方法console.log(chuizi.__proto__.__proto__);// 可以看到父类声明的call方法chuizi.call(); //我可以打电话chuizi.photo(); //我可以拍照chuizi.playGame(); //我可以玩游戏</script>
</body></html>ES6 class继承
注意：
1.使用 extends 继承。如：class SmartPhone extends Phone {}
2.必须使用 super(brand, price); // 其实就类似ES5的 Phone.call(this,brand,price)
3.实例对象可以调用子类和父类的属性和方法
4.子类定义和父类一样的方法，可以覆盖父类的方法，实例调用时执行子类的方法。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>class继承</title>
</head><body><script>class Phone {//构造方法[并不一定非得要]constructor(brand, price) {this.brand = brand;this.price = price;};// 父类的成员属性call() {console.log(this.brand);console.log('我可以打电话');}}class SmartPhone extends Phone {// 构造方法constructor(brand, price, color, size) {super(brand, price); // 其实就类似ES5的 Phone.call(this,brand,price)this.color = color;this.size = size;}photo() {console.log('拍照');}playGame() {console.log('玩游戏');}call() {console.log('我可以进行视频通话');}}const xiaomi = new SmartPhone('xiaomi', 2999, 'black', '4.7inch');console.log(xiaomi); //SmartPhone{brand: "xiaomi" color: "black" price: 2999 size: "4.7inch"}// 未覆盖父类的方法，调用父类的方法xiaomi.call(); // xiaomi 我可以打电话 // 子类复写父类的方法，就调用的是子类的方法。xiaomi.call(); // 我可以进行视频通话 xiaomi.photo(); //拍照xiaomi.playGame(); //玩游戏</script>
</body></html>2.16.4 class的set-get
get：获取属性时，执行的方法。
set：设置属性时，执行的方法。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>class的set-get</title>
</head><body><script>// get 和 setclass Phone {price = 500;get _price() {console.log('价格属性被读取了');return this.price;}// 如果不传参数就报错// 报错：Uncaught SyntaxError: Setter must have exactly one formal parameter.set _price(newVal) {this.price = newVal;console.log('价格属性被修改了');}}// 实例化对象let s = new Phone();console.log(s._price);s._price = 'free';console.log(s._price);</script>
</body></html>2.17 数值扩展
2.17.1 Number.EPSILON 【最小精度】
// 1. Number.EPSILON 是 JavaScript 表示的最小精度
// EPSILON 属性的值接近于 2.2204460492503130808472633361816E-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); // false
console.log(equal(0.1 + 0.2, 0.3)); // true2.17.2 二进制和八进制
//2.二进制和八进制
let b = 0b1010; //二进制
let o = 0o777; //八进制
let d = 100; //十进制
let x = 0xff; //十六进制
console.log(b); // 10
console.log(o); // 511
console.log(d); // 100
console.log(x); // 2552.17.3 Number.isFinite 检测数值是否为有限数
// 3.Number.isFinite 检测数值是否为有限数
console.log(Number.isFinite(100)); // true
console.log(Number.isFinite(100 / 0)); //false
console.log(Number.isFinite(Infinity)); //false
console.log(Number.isFinite(-Infinity)); //false
2.17.4 Number.isNaN 检测一个数值是否为 NaN
// 4.Number.isNaN 检测一个数值是否为 NaN
console.log(Number.isNaN(123)); //false
console.log(Number.isNaN(NaN)); //true2.17.5 Number.parseInt Number.parseFloat 字符串转整数
不能以非数字字符串为开头，否则全是NaN
// 5.Number.parseInt Number.parseFloat 字符串转整数
// 不能以非数字字符串为开头，否则全是NaN
console.log(Number.parseInt('5211214love')); //5211214
console.log(Number.parseInt('3.1415神奇')); //3
console.log(Number.parseInt('fff5214love')); //NaN
console.log(Number.parseInt('0.36')); //0
console.log(Number.parseInt('w0.36')); //NaN2.17.6 Number.isInteger 判断一个是否为整数
// 6.Number.isInteger 判断一个是否为整数
console.log(Number.isInteger(5)); // true
console.log(Number.isInteger(2.5)); // false
console.log(Number.isInteger(-5)); // true
console.log(Number.isInteger(NaN)); // false2.17.7 Math.trunc 将数字的小数部分抹掉
// 7.Math.trunc 将数字的小数部分抹掉
console.log(Math.trunc(3.5)); //3
console.log(Math.trunc(2.8)); //2
console.log(Math.trunc(-2.8)); //-22.17.8 Math.sign 判断一个数到底为正数(1) 负数(-1) 还是零(0)
// 8.Math.sign 判断一个数到底为正数(1) 负数(-1) 还是零(0)
console.log(Math.sign(100)); //1
console.log(Math.sign(0)); //0
console.log(Math.sign(-200)); //-12.18 对象方法扩展
2.18.1 Object.is 判断两个值是否完全相等
类似于 === 但是又有些地方不一样 如：对于NaN来言， Object.is(NaN, NaN) 为真，但是 NaN === NaN 为 false
// 1. Object.is 判断两个值是否完全相等
// 类似于 === 但是又有些地方不一样 如：对于NaN来言， Object.is(NaN, NaN) 为真，但是 NaN === NaN 为 false
console.log(Object.is(120, 120)); // true
console.log(Object.is(120, '120')); // false
console.log(Object.is(NaN, NaN)); // true
console.log(NaN === NaN); // false
let obj1 = { name: 123 };
let obj2 = { name: 123 };
console.log(Object.is(obj1, obj2)); // false2.18.2 Object.assign 对象的合并
第一个参数为模板，第二个参数为更新的数据【有则覆盖，没有则添加】
// 2.Object.assign 对象的合并
let cofig1 = {host: '127.0.0.1',port: 200,name: 'll',size: 222
};
let cofig2 = {host: 'localhost',port: 300,name: 'lld',big: 666
};
// 第一个参数为模板，第二个参数为更新的数据【有则覆盖，没有则添加】
console.log(Object.assign(cofig1, cofig2)); // {host: 'localhost', port: 300, name: 'lld', size: 222, big: 666}2.18.3 Object.setPrototypeOf 设置原型对象 Object.getPrototypeOf 获取原型对象
Object.getPrototypeOf(school)
school.__proto__ 获取对象的原型
// 3.Object.setPrototypeOf 设置原型对象 Object.getPrototypeOf 获取原型对象
const school = {name: 'll'
};
const cities = {xiaoqu: ['北京', '上海', '深圳']
};
Object.setPrototypeOf(school, cities);
console.log(Object.getPrototypeOf(school)); //{xiaoqu: (3) ['北京', '上海', '深圳']
console.log(school); //{name: 'll'}
console.log(school.__proto__); // {xiaoqu: (3) ['北京', '上海', '深圳'].2.19 模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
2.19.1 模块化的好处
模块化的优势有以下几点：
1.防止命名冲突
2.代码复用
3.高维护性
2.19.2 模块化规范产品
ES6之前的模块化规范有：
1. CommonJS => NodeJS、Browserify
2. AMD => requireJS
3. CMD => seaJS
2.19.3 ES6 模块化语法
模块功能主要由两个命令构成：export 和 import
1.export 命令用于规定模块的对外接口。
2.import 命令用于输入其他模块提供的功能。
2.19.4 模块化 暴露 【export 】的方式
1. 单个逐条暴露
每个需要暴露的属性和方法前面都加 export 暴露
// 单个逐条暴露
export let school = "尚硅谷";
export function teach() {console.log('我们可以开课');
}2.统一暴露【使用对象暴露】
将需要暴露的属性和方法写入一个对象，对象前加 export，整体暴露对象
// 统一暴露
let school = "尚硅谷";function findJob() {console.log('我们可以开课');
}// 对象的方式暴露【简化写法】
export { school, findJob};3. 默认暴露
采用 export default 的方式将需要暴露的属性和方法写入一个对象暴露
// 默认暴露
export default {school: 'll',change: function () {console.log("change you");}
}2.19.5 模块化 导入【import】的方式
1.通用的导入方式【不管需不需要全部导入】
采用通配符【*】的方式导入，不管用不用模块中的属性全部导入。
as ：作用：起别名；可以解决冲突。
// 1.通用的导入方方式
// 引入 m1.js 模块内容
import * as m1 from './js/m1.js';
// 引入 m2.js 模块内容
import * as m2 from './js/m2.js';
// 引入 m3.js 模块内容
import * as m3 from './js/m3.js';2.解构赋值形式导入
解构赋值的方式导入，可以按需导入，不需要的可以不导入。
// 2.解构赋值形式
import { school, teach } from './js/m1.js';
// 如果导出模块一致，可以使用起别名的方式导入
import { school as guigu, findJob } from './js/m2.js';
import { default as m3 } from './js/m3.js';
console.log(m3); // {school: 'll', change: ƒ}3.简便形式 针对 默认暴露
只针对默认暴露采用这种形式
// 3.简便形式，针对默认暴露
import m3 from './js/m3.js';
console.log(m3);2.19.5 导入模块的写法方式 【标签中导入和专门的导入文件】
标签中导入模块
标签中导入：这种可以，但是文件过多不好管理。可以将模块导入抽离成一个文件。
注意： <script type="module"></script> type类型为 module
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>ES6 模块化</title>
</head><body><!-- 之前的这种引入会报错。Uncaught SyntaxError: Unexpected token 'export'--><!-- 需要添加属性 type 为 module --><!-- <script src="./m1.js"></script> --><!-- 起一个服务打开 --><script type="module">// 1.通用的导入方方式// 引入 m1.js 模块内容import * as m1 from './js/m1.js';// 引入 m2.js 模块内容import * as m2 from './js/m2.js';// 引入 m3.js 模块内容import * as m3 from './js/m3.js';// 2.解构赋值形式import { school, teach } from './js/m1.js';// 如果导出模块一致，可以使用起别名的方式导入import { school as guigu, findJob } from './js/m2.js';import { default as m3 } from './js/m3.js';console.log(m3); // {school: 'll', change: ƒ}// 3.简便形式，针对默认暴露import m3 from './js/m3.js';console.log(m3);</script>
</body></html>专门的导入文件
将导入的模块抽离成一个文件 app.js
// 入口文件// 模块引入
import * as m1 from './m1.js';
import * as m2 from './m2.js';
import * as m3 from './m3.js';
console.log(m1);
console.log(m2);
console.log(m3);
html 文件引入
<script src="./js/app.js" type="module"></script>
注意：type类型为module
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>ES6 模块化</title>
</head><body><!-- 之前的这种引入会报错。Uncaught SyntaxError: Unexpected token 'export'--><!-- 需要添加属性 type 为 module --><!-- <script src="./m1.js"></script> --><!-- 起一个服务打开 --><script src="./js/app.js" type="module"></script>
</body></html>2.19.6 使用ES6的导入导出，在有些浏览器不能识别，所以需要将ES6转为ES5
babel：
地址： Babel 中文网 · Babel - 下一代 JavaScript 语法的编译器
babel-preset-env：转码神器，根据你支持的环境自动决定适合你的Babel插件；
地址： babel-preset-es2015 -> babel-preset-env · Babel
browserify：打包工具【可以使用其他打包工具】
地址：Browserify
安装工具使用命令
初始化：
npm init 初始化文件
安装工具：
npm install babel-cli babel-preset-env browserify -D
使用命令：
1.对ES6文件进行转码
npx babel ./js -d dist/js --presets=babel-preset-env
-d 输入文件到哪个目录
2.对转码后的文件进行打包
npx browserify dist/js/app.js -o dist/bundle.js
-o 输入文件到哪个目录
注意：全局安装可以使用npm运行，局部安装使用npx运行
实现代码
html文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><!-- 1.安装工具 babel-cli babel-preset-env browserify(webpack)babel-cli:将ES6转为ES5浏览器能识别2.npx babel ./js -d dist/jsnpx babel ./js -d dist/js --presets=babel-preset-env3.打包 npx browserify dist/js/app.js -o dist/bundle.js--><script src="./dist/bundle.js"></script>
</body></html>app.js 作为入口文件，打包后引入。
// 入口文件// 模块引入
import * as m1 from './m1.js';
import * as m2 from './m2.js';
import * as m3 from './m3.js';
console.log(m1);
console.log(m2);
console.log(m3);// 修改源文件后一定需要再次编译打包
m1.teach();
m2.findJob();
m3.default.change();
2.19.7 模块化引入npm包
1.下载所需要的npm包。如：jquery
命令： npm i jquery -D
2.使用下载的包。
// 使用下载的npm包
import $ from 'jquery';
// 类似 ES5 的引入 const $ = require('jquery)
// 修改背景颜色
$('body').css('background', 'pink');三、ESMAScript 7 新特性
3.1 Array.prototype.includes
includes 方法检测数组中是否包含某个元素，返回布尔类型值。
// 1.includes 判断数组中是否包含某个元素
// includes 和 indexOf 一样，比
// indexOf 也可以查找数组中的元素，只是返回结果不直观，需要使用判断是否大于-1判断有无该元素。
const mingzhu = ['西游记', '红楼梦', '三国演义', '水浒传'];// 判断
console.log(mingzhu.includes('西游记')); // true
console.log(mingzhu.indexOf('西游记') >= -1 ? true : false); // true
console.log(mingzhu.includes('金瓶梅')); // false3.2 指数操作符
在ES7中引入指数运算符 【**】，用来实现幂运算，功能与 Math.pow 结果相同。
// ** 幂运算
console.log(2 ** 10); // 1024
console.log(Math.pow(2, 10)); // 1024四、ESMAScript 8 新特性
4.1 async 和 await
详细了解：async函数 - JavaScript | MDN
4.1.1 async函数
1.async 函数的返回值为promise对象。
2.promise 对象的结果由 async 函数执行的返回值决定。
1.返回的结果不是一个 Promise 类型的对象，返回的结果就是 成功的 Promise 对象，值为 return的值
fn函数 return 一个字符串，返回的是一个成功的promise,,值为return的值
只return; 返回的是一个成功的Promise，值为undefined
2.抛出异常：返回的是一个失败的promise，值为抛出的值。
3.返回的结果如果是一个 Promise 对象，是根据promise的状态决定，值为Promise返回的值。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>async</title>
</head><body><script>async function fn() {// 返回一个字符串// return '尚硅谷';// 返回的结果不是一个 Promise 类型的对象，返回的结果就是 成功的 Promise 对象// return;// 抛出错误，返回的结果实一个失败的 Promise// throw new Error('出错啦');// 返回的结果如果是一个 Promise 对象return new Promise((resolve, reject) => {// resolve('成功的数据');reject('失败的错误');})}const result = fn();// fn函数 return 一个字符串，返回的是一个成功的promise,,值为return的值// 只return; 返回的是一个成功的Promise，值为undefined// 1.整理：返回的结果不是一个 Promise 类型的对象，返回的结果就是 成功的 Promise 对象，值为 return的值// 2.抛出异常：返回的是一个失败的promise，值为抛出的值。// 3.返回的结果如果是一个 Promise 对象，是根据promise的状态决定，值为Promise返回的值。console.log(result);// 调用then方法result.then(value => {console.log(value);}, reason => {console.log(reason);})</script>
</body></html>4.1.2 await函数
1.await 必须写在 async函数中
2.await 右侧的表达式一般为 promise 对象
3.await 返回的是 promise 成功的值
4.await 的 promise 失败了，就会抛出异常，需要通过 try...catch 捕获处理
await表达式会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。
promise的解决值会被当作该await表达式的返回值。使用
async/await关键字就可以在异步代码中使用普通的try/catch代码块。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>await</title>
</head><body><script>// 创建 promise 对象const p = new Promise((resolve, reject) => {// resolve('用户数组');reject('失败啦');})// await 要放在 async 函数中async function main() {// await p 实际就拿到p的then方法返回的结果try {let result = await p;console.log(result); // 用户数组} catch (error) {console.log(error); // 失败了}}// 调用函数main();</script>
</body></html>4.1.3 async 和 await 结合读取文件
如果函数之间返回值有依赖也可以通过传值的方式。
从打印结果来看，相当于进入了事件队列，先执行同步代码。 await等待
// 1.引入 fs 模块
const fs = require('fs');// 读取function readWeiXue() {return new Promise((resolve, reject) => {fs.readFile('../ES6/file/为学.md', (err, data) => {// 如果失败if (err) reject(err);// 如果成功resolve(data);})})
}function readChayangShi() {return new Promise((resolve, reject) => {fs.readFile('../ES6/file/插秧诗.md', (err, data) => {// 如果失败if (err) reject(err);// 如果成功resolve(data);})})
}function readGuanshu() {return new Promise((resolve, reject) => {fs.readFile('../ES6/file/观书有感.md', (err, data) => {// 如果失败if (err) reject(err);// 如果成功resolve(data);})})
}// 声明一个 async 函数
async function main() {console.log(00)const weixue = await readWeiXue();console.log(11)const chayangshi = await readChayangShi(weixue);console.log(22)const guanshu = await readGuanshu();console.log(33)console.log(weixue.toString());console.log(chayangshi.toString());console.log(guanshu.toString());
}
main();
// 如果相互有依赖也可以传值。
// 相当于放入了事件队列，同步的先执行。// 打印结果
// 0
// 11
// 22
// 33
// 为学
// 天下事有难易乎?为之，则难者亦易矣；
// 不为，则易者亦难矣。
// 人之为学有难易乎?学之，则难者亦易矣；
// 不学，则易者亦难矣。
// 插秧诗
// 手把青秧插满田，低头便见水中天。
// 六根清净方为道，退步原来是向前。
// 观书有感
// 半亩方塘一鉴开，天光云影共徘徊。
// 问渠那得清如许？为有源头活水来。4.1.4 async和await封装AJAX请求
axios 返回结果就是一个promise，用axios发请求，用await接结果，很方便。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>async和await封装AJAX请求</title>
</head><body><script>// 发送ajax请求，返回的结果是 promise 对象。function sendAJAX(url) {return new Promise((resolve, reject) => {// 1.创建对象const xhr = new XMLHttpRequest();// 2.初始化xhr.open('GET', url);// 3.发送xhr.send();// 4.事件绑定xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {resolve(xhr.response);} else {reject(xhr.status);}}}})}let url1 = "https://api.apiopen.top/getJoke";let url2 = "https://tianqiapi.com/api?version=v1&city=北京&appid=23941491&appsecret=TXoD5e8P";// 测试// sendAJAX(url1).then(value => {// console.log(value);// }, reason => {// console.log(reason);// })async function main() {let result = await sendAJAX(url1);let result2 = await sendAJAX(url2);console.log([result, result2]);}main();</script>
</body></html>4.2 Object.values 和 Object.entries
4.2.1 Object.values() 方法返回一个给定对象的所有可枚举属性的数组。
Object.keys()：返回所有的对象的key组成的数组。
Object.values()：返回所有的对象的value组成的数组。
// 声明对象
const school = {name: "lll",cities: ['北京', '上海', '深圳'],xueke: ['web', 'java', 'c++']
}// 获取对象所有的键
console.log(Object.keys(school)); // ["name","cities","xueke"]
// 获取对象所有的值
console.log(Object.values(school)); //['lll', Array(3), Array(3)]4.2.2 Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组
// 声明对象
const school = {name: "lll",cities: ['北京', '上海', '深圳'],xueke: ['web', 'java', 'c++']
}console.log(Object.entries(school));
// 返回一个多维数组，每一个元素是 [键, 值]
//[['name', 'lll'],['cities', Array(3)],['xueke', Array(3)]]
// 创建Map
const m = new Map(Object.entries(school));
console.log(m);
console.log(m.get('cities')); //['北京', '上海', '深圳']
// Object.entries() 和 Map是一个相逆4.2.3 Object.getOwnPropertyDescriptors()方法返回指定对象所有自身属性的描述对象
// 声明对象
const school = {name: "lll",cities: ['北京', '上海', '深圳'],xueke: ['web', 'java', 'c++']
}// 对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));
//[cities: {value: Array(3), writable: true, enumerable: true, configurable: true}]回顾创建object带属性
// 第一个参数为原型对象，第二个参数为描述对象【必须是一个对象】
const obj = Object.create(null, {name: {// 设置值value: 'll',// 属性特点// 是否可写writable: true,// 是否可以删除configurable: true,// 是否可以枚举enumerable: true}
})五、ESMAScript 9 新特性
5.1 对象扩展
5.1.1 扩展运算符
/*Rest参数 与 spread 扩展运算符在 ES6 中已经引入，不过ES6中只针对数组。在ES9中为对象提供了像数组一样的rest参数和扩展运算符*/function connect({ host, port, ...user }) {console.log(host);console.log(port);console.log(user);
}
connect({host: "127.0.0.1",port: 200,user: 'll',pwd: 123
})
5.1.2 rest参数
/*Rest参数 与 spread 扩展运算符在 ES6 中已经引入，不过ES6中只针对数组。在ES9中为对象提供了像数组一样的rest参数和扩展运算符*/
const a = {a: 123
}
const b = {b: 123
}
const c = {c: 123
}
const msg = [...a, ...b, ...c];
console.log(msg)5.2 正则的扩展
5.2.1 命名的捕获分组
?<url> ： 组
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>正则扩展-命名捕获分组</title>
</head><body><!-- <a href="http://www.atguigu.com">尚硅谷</a> --><script>// 声明一个字符串let str = '<a href="http://www.atguigu.com">尚硅谷</a>';// 提取 url 与【标签文本】const reg = /<a href="(.*)">(.*)<\/a>/;// 执行const result = reg.exec(str);console.log(result[1]);console.log(result[2]);let str2 = '<a href="http://www.atguigu.com">尚硅谷</a>';const reg2 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;const result2 = reg2.exec(str2);console.log(result2);console.log(result2.groups.url);console.log(result2.groups.text);</script>
</body></html>5.2.2 反向断言
(?<=么)：前面匹配：反向断言
(?=啦) ：匹配后面：正向断言
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>正则断言</title>
</head><body><script>// 声明字符串let str = 'JS5211314你知道么555啦啦啦';// 正向断言const reg = /\d+(?=啦)/;const result = reg.exec(str);console.log(result); //555// 反向断言const reg2 = /(?<=么)\d+/;const result2 = reg2.exec(str);console.log(result2); //555</script>
</body></html>5.2.3 dotAll
s： dot . 元字符 除换行符以外的任意单个字符。加s . 可以匹配任意字符
g：全局匹配
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>正则dotAll模式</title>
</head><body><ul><li><a>肖生克的救赎</a><p>上映日期：1994-09-10</p></li><li><a>阿甘正传</a><p>上映日期：1994-07-06</p></li></ul><script>// dot . 元字符 除换行符以外的任意单个字符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>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;// 执行破匹配let result;let data = [];while (result = reg.exec(str)) {data.push({ title: result[1], time: result[2] })}console.log(data);</script>
</body></html>六、ESMAScript 10 新特性
6.1 对象扩展方法 Object.fromEntries 【转为对象】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Object.fromEntries</title>
</head><body><script>// 二维数组const arr = Object.fromEntries([['name', 'll'],['xueke', 'Java,web,c++']]);console.log(arr); //{name: 'll', xueke: 'Java,web,c++'}// Mapconst m = new Map();m.set('name', "ll");console.log(m); // Map(1) {'name' => 'll'}const result = Object.fromEntries(m);console.log(result); // {name: 'll'}// Object.const arr2 = Object.entries({name: 'll'})console.log(arr2); //[['name', 'll']]</script>
</body></html>6.2 字符串扩展方法 trimStart trimEnd
trim()： 去掉前后的空格
trimStart()：去掉前面的空格
trimEnd()：去掉后面的空格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>字符串扩展方法trimStart和trimEnd</title>
</head><body><script>// trimlet str = " 123 ";console.log(str.trim()); //123console.log(str.trimStart()); // 123 console.log(str.trimEnd()); // 123</script>
</body></html>6.3 数组扩展方式 flat 与 flatMap
6.3.1 flat 将多维数组转为低位数组
flat (参数)： 参数为降低几个维度；是个数字。
// flat 平
//将多维数组转为低位数组const arr = [1, 2, 3, [4, 5]];
console.log(arr.flat()); // [1, 2, 3, 4, 5]
const arr2 = [1, 2, 3, [4, 5, [6, 7]]];
// 参数为深度 是一个数字,【降低几个维度】，默认是一个维度
console.log(arr2.flat()); // [1, 2, 3, 4, 5, Array(2)]
console.log(arr2.flat(2)); // [1, 2, 3, 4, 5, 6, 7]
const arr3 = [1, 2, 3, [4, 5, [6, 7, [8, 9]]]];
console.log(arr3.flat()); //[1, 2, 3, 4, 5, Array(3)]
console.log(arr3.flat(2)); //[1, 2, 3, 4, 5, 6, 7, Array(2)]
console.log(arr3.flat(3)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]6.3.2 flatMap 相当于map和flat的结合
详细了解：Array.prototype.flatMap() - JavaScript | MDN
// flatMap
// 相当于map和flat的结合
const arr4 = [1, 2, 3, 4];
const result = arr4.map(item => [item * 10]);
const result2 = arr4.flatMap(item => [item * 10]);
console.log(result); //[[10], [20], [30], [40]]
console.log(result2); //[10, 20, 30, 40]6.4 Symbol.prototype.description 获取Symbol描述
// 创建 Symbol
let s = Symbol('ll');
console.log(s.description); //ll七、ESMAScript 11 新特性
7.1 私有属性
属性前面加#，代表私有属性。
#age #weight 就是私有属性，只能在类的内部使用（this.#age）。如果在类的外部使用，就会报错。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><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('xiaohong', 18, '15kg');console.log(girl.name);// 报错：Uncaught SyntaxError: Private field '#weight' must be declared in an enclosing class// console.log(girl.#age);// console.log(girl.#weight);girl.intro();</script>
</body></html>7.2 Promise.allSettled 方法
了解详情：Promise.allSettled() - JavaScript | MDN
该
Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。当多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个
promise的结果时，通常使用它。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Promise.allSettled</title>
</head><body><script>// 声明两个promise对象const p1 = new Promise((resolve, reject) => {setTimeout(() => {// resolve("商品数据 - 1");reject('出错了');}, 1000);})const p2 = new Promise((resolve, reject) => {setTimeout(() => {// resolve("商品数据 - 2")reject('出错了');}, 1000);})// 调用 allSettled 方法const result = Promise.allSettled([p1, p2]);console.log(result);//// Promise.allSettled([p1, p2])</script>
</body></html>7.3 String.prototype.matchAll 方法 分组捕获的结果
详细了解：String.prototype.matchAll() - JavaScript | MDN
方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><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>/sg;// 调用方法const result = str.matchAll(reg);// for (const v of result) {// console.log(v);// }const arr = [...result];console.log(arr);</script>
</body></html>7.4 动态 import
了解详情：import - JavaScript | MDN
import('./hello.js').then(module => {
console.log(module);
})
需求：点击按钮才导入模块
html文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>动态import加载</title>
</head><body><button id="btn">send</button><script src="./js/app.js" type="module"></script>
</body></html>app.js文件
// 之前使用，不管啥时候用直接加载。
// import * as m1 from './hello.js';
// 需求：使用饿时候在加载，类似懒加载功能。const btn = document.getElementById('btn');btn.onclick = function () {import('./hello.js').then(module => {console.log(module);module.hello();})
}hello.js文件
export function hello() {alert('hello');
}7.5 BigInt 类型-基本数据类型
语法：整数后面加n。如：521n;
typeof 521n ==> bigint
BigInt()： 生成一个 bigint类型数字
// 大整型
let n = 521n;
console.log(n, typeof n); //521n 'bigint'// 函数
let b = 123;
console.log(BigInt(b)); // 123n
// 报错：06Bight.html:20 Uncaught RangeError: The number 1.2 cannot be converted to a BigInt because it is not an integer
// console.log(BigInt(1.2));// 大数值运算
let max = Number.MAX_SAFE_INTEGER;
console.log(max + 1); //9007199254740992
console.log(max + 2); //9007199254740992
console.log(max + 3); //9007199254740994
// 发现 结果有问题，不能在加// 可以采用 BigInt
console.log(BigInt(max)); //9007199254740991n
console.log(BigInt(max) + BigInt(1)); //9007199254740992n
console.log(BigInt(max) + BigInt(2)); //9007199254740993n7.6 绝对全局对象 globalThis
了解详情：globalThis - JavaScript | MDN
全局属性
globalThis包含全局的this值，类似于全局对象（global object）
console.log(globalThis);//Window {window: Window, self: Window, document: document, name: '', location: Location, …}7.7 可选链操作符
语法： ?.
// ?.
function main(config) {// 之前取值之前判断// const daHost = config && config.db && config.db.host;// 如果不判断取值，如果没有会报错// 使用 ?. 方式判断const dbHost2 = config ?.db ?.host;console.log(dbHost2); //127.0.0.1// 如不传值就会报错：Uncaught TypeError: Cannot read properties of undefined (reading 'db')console.log(config.db.host); //127.0.0.1
}
main({db: {host: "127.0.0.1",user: "ll"}
});ES6 ~ ES11整理相关推荐
- 最全Es6 - Es11（ Es11篇）
文末有其他篇链接 Es11 1.私有属性 用 #+属性名 声明私有属性 class Rectangle {#height = 0;#width;constructor(height, width) { ...
- ES6 — ES11 新特性一篇通
一.ES6 1.1.let 变量不能重复声明 有块级作用域 不存在变量提升(必须先声明后使用) 不影响作用域链 <script>//声明变量let a;let b, c, d;let e ...
- ES6语法笔记(ES6~ES11)
相关代码和笔记已经同步到gitee,需要自取 链接地址:ES6学习笔记 1.let // let声明变量let a;let b,c,d;let e = 100;let f = 110,g = 'qwe ...
- ES6专题——整理自阮一峰老师的ECMAScript 6入门
这里我仅仅是记录了那些我认为值得注意的ES6知识点,详细版请挪步https://es6.ruanyifeng.com/#docs/let let和const命令 let声明的变量只在它所在的代码块有效 ...
- vue中的ES6语法整理1
1.箭头函数 ES6允许使用"箭头"(=>)定义函数 var f = v => v;//等价于var f = function(v){return v; }; 如果箭头 ...
- javascript的ES6笔记整理
添加小程序,兑换各种视频教程/数据资源. 1. 常量:不能被重新赋值. //ES5中声明一个常量,并挂载到window下: Object.defineProperty(window,'PI',{val ...
- ES6知识点整理模板字符串和标签模板的应用
ES6 中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中实现与变量和方法的混编 之前我们手动拼接字符串的方式 let hello = 'Hello'; let html = ...
- ES6知识点整理Promise的应用
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and ...
- es5 es6 互相转换
- 工具:Visual Studio Code - 具体过程 1.新建项目,dist存放ES6格式的,src存放ES5格式的,如下 index.html内容,此处引用dist中的js 2.打开终端(c ...
最新文章
- 算法总结---最常用的五大算法（算法题思路）
- Co-occurrence网络图在R中的实现
- 计算机知识幼儿园,幼儿园中班计算机教学工作计划
- 深入学习__doPostBack函数
- js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
- hdu 2553 N皇后问题 搜索 回溯法
- 计算机操作系统（3）：操作系统的基本特征
- linux禁止防火墙命令,LINUX关闭打开防火墙命令
- 太极图正确画法_认识道教太极图，了解正规画法
- 网络虚拟化基础协议之Geneve
- yarn－cluster 和yarn－client区别
- 微软输入法数字有间隔_各种中文输入法中输入间隔号“·”的措施
- 微信开发者工具的使用
- 云计算给IT产业结构带来的影响 .
- java摄氏度转华氏度 在控制台输入
- 笔记本损耗60 计算机提示,笔记本电池损耗60%多怎么处理!
- 计算关联系数matlab,matlab相关系数计算公式
- 用Java实现给图片添加文字水印
- pytorch入门篇1 创建tensor
- 我奋斗了18年不是为了和你壹起喝咖啡