目录
6.3. Array.prototype.flat 与 flatMap
6.4. Symbol.prototype.description
7.1. String.prototype.matchAll
相关视频链接： 尚硅谷Web前端ES6教程，涵盖ES6-ES11_哔哩哔哩_bilibili
第 5 章 ECMASript 9 新特性
5.1. Rest/Spread 属性
Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符
//rest 参数
function connect({host, port, ...user}){
console.log(host);
console.log(port);
console.log(user);
}
connect({
host: '127.0.0.1',
port: 3306,
username: 'root',
password: 'root',
type: 'master'
});//对象合并
const skillOne = {
q: '天音波'
}
const skillTwo = {
w: '金钟罩'
}
const skillThree = {
e: '天雷破'
}
const skillFour = {
r: '猛龙摆尾'
}
const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};
console.log(mangseng);
//运行结果：
//Object
//e: "天雷破"
//q: "天音波"
//r: "猛龙摆尾"
//w: "金钟罩"
//[[Prototype]]: Object5.2. 正则表达式命名捕获组
ES9 允许命名捕获组使用符号『?<name>』,这样获取捕获结果可读性更强
//声明一个字符串
let str = '<a href="http://www.atguigu.com">lalal</a>';
//提取 url 与 『标签文本』
const reg = /<a href="(.*)">(.*)<\/a>/;
//第一个(.*)表示http://www.atguigu.com，第二个(.*)表示lalal
//执行
const result = reg.exec(str);
console.log(result);
console.log(result[1]); //http://www.atguigu.com
console.log(result[2]); //lalallet str = '<a href="http://www.atguigu.com">lalal</a>';
//分组命名
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url); //http://www.atguigu.com
console.log(result.groups.text); //lalal5.3. 正则表达式反向断言
ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选
//声明字符串
let str = 'JS5211314你知道么555啦啦啦';
//正向断言
const reg = /\d+(?=啦)/; //判断555这个数字后面是否为啦这个字
const result = reg.exec(str);
console.log(result);//声明字符串
let str = 'JS5211314你知道么555啦啦啦';
//反向断言
const regu = /(?<=么)\d+/; //判断555数字前面是否是么这个字
const result = reg.exec(str);
console.log(result);5.4. 正则表达式 dotAll 模式
正则表达式中点.匹配除回车外的任何单字符，标记『s』改变这种行为，允许行终止符出现
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>/s;
//执行匹配
const result = reg.exec(str);
console.log(result); let str = `
<ul>
<li>
<a>肖生克的救赎</a>
<p>上映日期: 1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映日期: 1994-07-06</p>
</li>
</ul>`;
//声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
let result;
let data = [];
while(result = reg.exec(str)){
data.push({title: result[1], time: result[2]});
}
//输出结果
console.log(data);
第 6 章 ECMASript 10 新特性
6.1. Object.fromEntries
//二维数组
//将二维数组转换为对象
const result = Object.fromEntries([
['name','kblhk'],
['xueke', 'Java,大数据,前端,云计算']
]);
console.log(result);
//Map
// const m = new Map();
// m.set('name','ATGUIGU');
// const result = Object.fromEntries(m);
//Object.entries ES8
//将对象转换为二维数组
//const arr = Object.entries({
// name: "lkjkj"
//})
//console.log(arr);6.2. trimStart 和 和 trimEnd
// trim
let str = ' iloveyou ';
console.log(str);
console.log(str.trimStart()); //清除字符串左边的空白
console.log(str.trimEnd()); //清除右边的空白6.3. Array.prototype.flat 与 flatMap
flat：将多维数组转化为低位数组
参数为深度 是一个数字
const arr = [1,2,3,4,[5,6]];
console.log(arr.flat()); //1,2,3,4,5,6
const arr = [1,2,3,4,[5,6,[7,8,9]]];
console.log(arr.flat()); //1,2,3,4,5,6,[7,8,9]
const arr = [1,2,3,4,[5,6,[7,8,9]]];
console.log(arr.flat(2)); //1,2,3,4,5,6,7,8,9flatMap
const arr = [1,2,3,4];
const result = arr.flatMap(item => [item * 10]);
console.log(result); //10,20,30,406.4. Symbol.prototype.description
//创建 Symbol
let s = Symbol('lalala');
console.log(s.description); //lalala第 7 章 ECMASript 11 新特性
7.1. String.prototype.matchAll
matchAll：对数据的批量提取
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(let v of result){
// console.log(v);
// }
const arr = [...result];
console.log(arr);
7.2. 类的私有属性
class Person{
//公有属性
name;
//私有属性
#age;
#weight;
//构造方法
constructor(name, age, weight){
this.name = name;
this.#age = age;
this.#weight = weight;
}
intro(){
console.log(this.name);
console.log(this.#age);
console.log(this.#weight);
}
}
//实例化
const girl = new Person('晓红', 18, '45kg');
// console.log(girl.name);
// console.log(girl.#age); //会报错
// console.log(girl.#weight);
girl.intro();7.3. Promise.allSettled
//声明两个promise对象
const p1 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('商品数据 - 1');
},1000)
});
const p2 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('商品数据 - 2');
// reject('出错啦!');
},1000)
});
//调用 allsettled 方法
// const result = Promise.allSettled([p1, p2]);
//都为resolve或有一个为rejected时都正常运行
const res = Promise.all([p1, p2]);
//都为resolve时返回值，有一个为rejected就会报错
console.log(res);7.4. 可选链操作符 ?.
// ?.
function main(config){
// const dbHost = config && config.db && config.db.host;
const dbHost = config?.db?.host;
console.log(dbHost);
}
main({
db: {
host:'192.168.1.100',
username: 'root'
},
cache: {
host: '192.168.1.200',
username:'admin'
}
})7.5. 动态 import 导入
在html文件中
<button id="btn">点击</button>
<script src="./js/app.js" type="module"></script>在app.js文件中
// import * as m1 from "hello.js";
//获取元素
const btn = document.getElementById('btn');
btn.onclick = function(){
import('hello.js').then(module => {
module.hello();
});
}在hello.js文件中
export function hello(){
alert('Hello');
}7.6. globalThis 对象
如果想对全局对象做一个操作，那么此时可以忽略环境直接使用globalThis
7.7 BigInt
//大整形
// let n = 521n;
// console.log(n, typeof(n));
//函数
// let n = 123;
// console.log(BigInt(n));
// console.log(BigInt(1.2));
//大数值运算
let max = Number.MAX_SAFE_INTEGER;
console.log(max);
console.log(max + 1);
console.log(max + 2);
console.log(BigInt(max));
console.log(BigInt(max) + BigInt(1));
console.log(BigInt(max) + BigInt(2));
//BigInt型数字不可以直接与整数做运算
//console.log(BigInt(max) + 2); //会报错