第 5 章 ECMASript 9 新特性

5.1. Rest/Spread 属性

5.2. 正则表达式命名捕获组

5.3. 正则表达式反向断言

5.4. 正则表达式 dotAll 模式

第 6 章 ECMASript 10 新特性

6.1. Object.fromEntries

6.2. trimStart 和和 trimEnd

6.3. Array.prototype.flat 与 flatMap

6.4. Symbol.prototype.description

第 7 章 ECMASript 11 新特性

7.1. String.prototype.matchAll

7.2. 类的私有属性

7.3. Promise.allSettled

7.4. 可选链操作符 ?.

7.5. 动态 import 导入

7.6. globalThis 对象

7.7 BigInt

相关视频链接：尚硅谷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]]: Object

5.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]);  //lalal

let 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.comconsole.log(result.groups.text);  //lalal

5.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

        // trimlet 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,6const 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,9

flatMap

const arr = [1,2,3,4];const result = arr.flatMap(item => [item * 10]);console.log(result); //10,20,30,40

6.4. Symbol.prototype.description

        //创建 Symbollet 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);  //会报错

ES9,ES10,ES11知识点相关推荐

ES6/ES7/ES8/ES9/ES10常用特性和新特性最全总结
ES6 ES6在ES5的基础上新增了一系列特性,这里仅列出常用特性变量的改变,添加了块级作用域的概念 let声明变量(块级作用域),let是更完美的var,它声明的全局变量不是全局属性widow的变 ...
ES7 ES8 ES9 ES10 新特性总结思考
学习在于总结,发现并没有对于新出的一些语言特性进行总结,正好最近有时间,可以把这些进行总结以及运用,也许在项目中已经使用. ES7 Array includes方法求幂运算符 ES8 Async F ...
ES7-ES11新特性汇总
前言 ES全称ECMAScript,ECMAScript 和 JavaScript 的关系是,前者是后者的规范,后者是前者的一种实现,从15年es6发版后,到目前的es11,es的新特性被广泛使用,成 ...
ES10~ES13常见新特性
文章目录 1.ES10新特性 1.1 flat/flatMap 1.2 Object fromEntries 1.3 trimStart/trimEnd 2.ES11新特性 2.1 BigInt 2. ...
ES7-12内容详解
ES7-ES12知识点解析一.ES7主要内容 1. Array Includes 在ES7之前,如果我们想判断一个数组中是否包含某个元素,需要通过 indexOf 获取结果,并且判断是否为 -1. ...
【JavaScript高级】ES7-ES13常用新特性
文章目录 ES7 Array Includes 指数 ES8 Object.values Object.entries String Padding Trailing-Commas Object De ...
ES6、ES7、ES8、ES9、ES10、ES11、ES12知识点总结
前言:ES6大家已经在工作中用的炉火纯青了,那么ES6的知识点就不再详细介绍了,一起学习一下ES7 --- ES12 的知识点吧!为了年后的金三银四冲.冲.冲!!! 目录一.ES6 二.ES201 ...
ES7、ES8、ES9、ES10、ES11、ES12、ES13、ES14(ES进阶之路二)
简介 JavaScript是世界上发展最快的编程语言之一,不仅可以用于编写运行在浏览器的客户端程序,随着Node.js的发展,JavaScript也被广泛应用于编写服务端程序.而随着JavaScrip ...
ES7、ES8、ES9、ES10、ES11 新特性总结
目录 ES7新特性一.Array.prototype.includes 二.指数操作符 ES8新特性一.async 和 await 1.async 函数 2.await 表达式 async和awa ...

ES9,ES10,ES11知识点

第 5 章 ECMASript 9 新特性

5.1. Rest/Spread 属性

5.2. 正则表达式命名捕获组

5.3. 正则表达式反向断言

5.4. 正则表达式 dotAll 模式

第 6 章 ECMASript 10 新特性

6.1. Object.fromEntries

6.2. trimStart 和和 trimEnd

6.3. Array.prototype.flat 与 flatMap

6.4. Symbol.prototype.description

第 7 章 ECMASript 11 新特性

7.1. String.prototype.matchAll

7.2. 类的私有属性

7.3. Promise.allSettled

7.4. 可选链操作符 ?.

7.5. 动态 import 导入

7.6. globalThis 对象

7.7 BigInt

ES9,ES10,ES11知识点相关推荐

最新文章

热门文章

ES9,ES10,ES11知识点

第 5 章 ECMASript 9 新特性

5.1. Rest/Spread 属性

5.2. 正则表达式命名捕获组

5.3. 正则表达式反向断言

5.4. 正则表达式 dotAll 模式

第 6 章 ECMASript 10 新特性

6.1. Object.fromEntries

6.2. trimStart 和 和 trimEnd

6.3. Array.prototype.flat 与 flatMap

6.4. Symbol.prototype.description

第 7 章 ECMASript 11 新特性

7.1. String.prototype.matchAll

7.2. 类的私有属性

7.3. Promise.allSettled

7.4. 可选链操作符 ?.

7.5. 动态 import 导入

7.6. globalThis 对象

7.7 BigInt

ES9,ES10,ES11知识点相关推荐

最新文章

热门文章

6.2. trimStart 和和 trimEnd