es7~es11相关知识

1. es7新特性

(1). 数组的includes()方法

数组的includes(value)方法，用来检测数组中是否包含某个元素，返回布尔值。

const aa = ["张颜齐","段宜恩","郑秀晶"];
console.log(aa.includes("张颜齐"));//true

(2). [**]用来实现幂运算

[**]与Math.pow()是一样的。

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

2. es8新特新

(1).Object.keys()方法和Object.values()方法

Object.keys(obj)方法返回一个给定对象的所有可枚举属性名的数组。
Object.values(obj)方法返回一个给定对象的所有可枚举属性值的数组。

(2). Object.entries()方法

Object.entries()方法返回一个给定对象自身可遍历属性[key,value]的数组

(3). Object.getOwnPropertyDescriptors

该方法返回指定对象所有自身属性的描述对象

<script>
	const school = {
		name:"山东大学",
		cities:["济南","青岛","威海"],
		xueke:["医学","计算机","美术"]
	}
	//获取对象所有的键
	console.log(Object.keys(school));//(3)["name", "cities", "xueke"]
	//获取对象所有的值
	console.log(Object.values(school));//(3)["山东大学", Array(3), Array(3)]
	//获取对象所有的键值对
	console.log(Object.entries(school));
	/*
	 * (3) [Array(2), Array(2), Array(2)]
			0: (2) ["name", "山东大学"]
			1: (2) ["cities", Array(3)]
			2: (2) ["xueke", Array(3)]
			length: 3
	 */
	
	const obj = Object.create(null,{
		name:{
			//设置值
			value:"小迟",
			writable:true,
			configurable:true,
			enumerable:true
		}
	})
	console.log(Object.getOwnPropertyDescriptors(obj));
	/*
	 * {name: {…}}
			name:
				value: "小迟"
				writable: true
				enumerable: true
				configurable: true
	 */
</script>

3. es9新特性

(1). es9的rest参数

扩展了es6中rest参数只针对数组的功能，在 es9中对象也可以使用。

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' 
});
/*
 * 127.0.0.1
 * 3306
 * {username: "root", password: "root", type: "master"}
 */

(2). 正则表达式命名捕获组

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

let str = '<a href="http://www.atguigu.com">尚硅谷</a>'; 
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/; 
const result = reg.exec(str); 
console.log(result);
console.log(result.groups.url); 
console.log(result.groups.text); 

4. es10 新特性

(1). Object.fromEntries ()

<script>
    //二维数组
    const result1 = Object.fromEntries([
        ['name','尚硅谷'],
        ['xueke', 'Java,大数据,前端,云计算']
    ]);
    console.log(result1);
    //{name: "尚硅谷", xueke: "Java,大数据,前端,云计算"}

    //Map
    const m = new Map();
    m.set('name','ATGUIGU');
    const result2 = Object.fromEntries(m);
	console.log(result2);
	//{name: "ATGUIGU"}
</script>

(2). trimStart() 和 trimEnd()方法

trimStart() 清除字符串左侧的字符·
trimEnd() 清除字符串右侧的字符

 let str = '   iloveyou   ';

 console.log(str);
 console.log(str.trimStart());
 console.log(str.trimEnd());

(3). 数组扁平化 — flat() 与 flatMap()方法

<script>
   //flat
	//将多维数组转化为低位数组
	const arr = [1,2,3,4,[5,6,[7,8,9]]];
	//数组.flat()降一维
	console.log(arr.flat());//(7) [1, 2, 3, 4, 5, 6, Array(3)]
	//参数为深度 是一个数字，三维转一维深度为2
	console.log(arr.flat(2));//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
	//flatMap
	//回调函数对数组进行操作后如果返回的是多维数组会自动降维
	const arr1 = [1,2,3,4];
	const result = arr1.flatMap(item => [item * 10]);
	console.log(result);
</script>

(4). Symbol的description()方法

<script>
    let s = Symbol('尚硅谷');
    console.log(s.description);//尚硅谷
</script>

5.es11 新特性

(1). 类的私有属性

<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('小红', 18, '45kg');

       console.log(girl.name);//小红
       girl.intro();
       /*
        * 小红
        * 18
        * 45kg
        */
       console.log(girl.#age);//Error: Private field '#age' must be declared in an enclosing class
</script>

(2). Promise.allSettled()

与Promise.all()类似，但返回结果不受参数promises对象的影响，永远为成功状态。

<script>
  //声明两个promise对象
       const p1 = new Promise((resolve, reject)=>{
           setTimeout(()=>{
               resolve('商品数据 - 1');
           },1000)
       });

       const p2 = new Promise((resolve, reject)=>{
           setTimeout(()=>{
           	reject('出错啦!');
           },1000)
       });

       //调用 allsettled 方法
       const result = Promise.allSettled([p1, p2]);
       console.log(result);
       /*
        * Promise {<pending>}
        *  [[PromiseStatus]]: "resolved"
        *  [[PromiseValue]]: Array(2)
        */
       //调用 all 方法
       const res = Promise.all([p1, p2]);
       console.log(res);
       /*
        * Promise {<pending>}
        *   [[PromiseStatus]]: "rejected"
        *   [[PromiseValue]]: "出错啦!"
        */
       
</script>

(3). 可选链操作符 【.?】

可选链操作符 【.?】

(4). 动态 import 导入

//import('模块的路径')返回的是一个promise
import('模块的路径').then(module => {
});

(5). 新的数据类型 — BigInt 大整数

<script>
     //大整形
     let n1 = 521n;
     console.log(n1, typeof(n1));//521n "bigint"

     //函数
     let n2 = 123;
     console.log(BigInt(n2));//123n
     //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);//9007199254740991
     console.log(max + 1);//9007199254740992
     console.log(max + 2);//9007199254740992

     console.log(BigInt(max))//9007199254740991n
     console.log(BigInt(max) + BigInt(1))//9007199254740992n
     console.log(BigInt(max) + BigInt(2))//9007199254740993n
 </script>

(6). globalThis 对象

globalThis始终指向全局对象