ES7

Array.prototype.includes

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

  1. // includes   indexOf
  2. const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];
  4. //判断
  5. console.log(mingzhu.includes('西游记')); //true
  6. console.log(mingzhu.includes('金瓶梅')); //false

指数操作符 - **

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

  1. console.log(2 ** 10);// 1024
  2. console.log(Math.pow(2, 10));// 1024

ES9

正则表达式命名捕获组

ES9 允许命名捕获组使用符号『?』,这样获取捕获结果可读性更强

不采取命名捕获组

image.png

采取命名捕获组

image.png

正则表达式反向断言

ES9 支持反向断言(?<=)，通过对匹配结果前面的内容进行判断，对匹配进行筛选。
以下列出 ?=、?<=、?!、?<!= 的使用
exp1(?=exp2)：查找 exp2 前面的 exp1。
image.png
(?<=exp2)exp1：查找 exp2 后面的 exp1。
ES7 - ES11 - 图5
exp1(?!exp2)：查找后面不是 exp2 的 exp1。
ES7 - ES11 - 图6
(?<!=exp2)exp1：查找前面不是 exp2 的 exp1。
ES7 - ES11 - 图7
参考链接: 菜鸟正则断言

正则表达式 dotAll 模式

正则表达式中点.匹配除回车外的任何单字符，标记『s』改变这种行为，允许行 终止符出现 

  1. //dot  .  元字符  除换行符以外的任意单个字符
  2. //[\s\S] 匹配所有。\s 是匹配所有空白符，包括换行，\S 非空白符，不包括换行。
  3. // ? 匹配前面的子表达式零次或一次，或指明一个非贪婪限定符
  4. //* 和 + 限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面
  5. //加上一个 ? 就可以实现非贪婪或最小匹配。
  6. let str = `
  7. <ul>
  8.     <li>
  9.         <a>肖生克的救赎</a>
  10.         <p>上映日期: 1994-09-10</p>
  11.     </li>
  12.     <li>
  13.         <a>阿甘正传</a>
  14.         <p>上映日期: 1994-07-06</p>
  15.     </li>
  16. </ul>`;
  17. //老的声明正则
  18. //匹配 <li>+换行+<a>匹配区<\/a>+换行+<p>匹配区</p>
  19. //一直要使用换行符\s
  20. // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;
  22. //[s]使用 / /s表示允许.匹配所有
  23. const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
  24. //执行匹配
  25. // const result = reg.exec(str);
  26. let result;
  27. let data = [];
  28. //下方使用String.prototype.matchAll代替while
  29. while(result = reg.exec(str)){
  30.     console.log(result)
  31.     data.push({title: result[1], time: result[2]});
  32. }
  33. //输出结果
  34. console.log(data);

result & data
image.png

ES11 - String.prototype.matchAll

上边使用while获取result每一项，此处可以使用该方法代替

  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>`;
  12. //声明正则
  13. const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
  15. //matchAll生产可遍历对象
  16. const result = str.matchAll(reg);
  17. for(let v of result){
  18.     console.log(v);
  19. }
  21. //const arr = [...result];
  23. //console.log(arr);

image.png

ES10

Object.fromEntries

将二维数组转化为对象

  1. //将二维数组转化为对象
  2. const result = Object.fromEntries([
  3.     ['name','尚硅谷'],
  4.     ['xueke', 'Java,大数据,前端,云计算']
  5. ]);
  6. console.log(result); //{name: "尚硅谷", xueke: "Java,大数据,前端,云计算"}
  8. //Map + fromEntries
  9. const m = new Map();
  10. m.set('name','ATGUIGU');
  11. const result1 = Object.fromEntries(m);
  12. console.log(result1); //{name: "ATGUIGU"}
  14. //Object.entries ES8
  15. //将对象转化为二维数组
  16. const arr = Object.entries({
  17.     name: "尚硅谷"
  18. })
  19. console.log(arr); //["name", "尚硅谷"]

trimStart 和 trimEnd

  1. // trim
  2. let str = '   iloveyou   ';
  4. console.log(str.trim());
  5. console.log(str.trimStart());
  6. console.log(str.trimEnd());

Array.prototype.flat 与 flatMap

  1. //flat 平
  2. //将多维数组转化为低位数组
  3. // const arr = [1,2,3,4,[5,6]];
  4. // const arr = [1,2,3,4,[5,6,[7,8,9]]];
  5. //参数为深度 是一个数字
  6. // console.log(arr.flat(2));  
  8. //flatMap
  9. const arr = [1,2,3,4];
  10. const result = arr.flatMap(item => [item * 10]);
  11. console.log(result);

Symbol.prototype.description

  1. //创建 Symbol
  2. let s = Symbol('尚硅谷');
  4. console.log(s.description); //尚硅谷

ES11

类的私有属性

  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.     }
  14.     intro(){
  15.         console.log(this.name); //晓红
  16.         console.log(this.#age); //18
  17.         console.log(this.#weight); //45kg
  18.     }
  19. }
  21. //实例化
  22. const girl = new Person('晓红', 18, '45kg');
  24. // console.log(girl.name); 
  25. // console.log(girl.#age);//报错
  26. // console.log(girl.#weight);//报错
  28. girl.intro();

BigInt 大整形

//n表示大整形
// 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))

globalThis 对象

无论什么开发环境(正常环境、node…)输出的都是全局对象

console.log(globalThis); //Window