ECMAScript——ES6--ES11笔记3

ES6–ES11笔记3

一、ES7新增的功能
1、新增了一个数组的方法,includes， 这是用来判断数组中是否有某个元素的。

// 1、includes()  和 indexOf()
const arr = ['王者', '吃鸡', '光遇'];
console.log(arr.includes('王者'));      // true, 返回的是布尔值
console.log(arr.indexOf('王者'));       // 0, 返回的是下标

2、添加了幂函数的运算方式 a**b === a^b

console.log(2**3);      // 8
console.log(Math.pow(2, 4));        // 16
/*
    幂函数的计算方式有两种,一种是运算符: ** 另一种是 Math的pow方法
*/ 

二、ES8新增的功能
1、async函数
① 什么是async函数?
一种特殊的函数，特殊在这个函数的返回值是Promise对象，Promise对象是用来解决异步编程的一种方式。
② 只需要在普通函数之前加上async便可

function fun(){}
console.log(fun());     // undefined
async function fun1(){}
console.log(fun1());    // Promise { undefined }

2、await表达式
在大概了解了什么是async函数后，就是在普通函数之前加上async关键字，
并且调用了这个async函数的返回值是Promise对象，也就意味着可以解决异步编程的问题。这个时候有了await的配合，会使得这一步骤更为的简洁和舒适。

① awaitt表达式
await和async的关系就是，有await就一定有async, 有async可以没有await, await是建立在async函数上的。

② 如何使用await表达式？
await是用在await Promise的表达式的，Promise的值的。

// 使用异步的方式读取文件夹的内容
const fs = require('fs');

// 给每个 读取文件 都定义一个函数
function readOne(){
    return new Promise((resolve, reject)=>{
        fs.readFile('C:/Users/ASUS/Desktop/各类文件夹/html+css+javastript/ES6--ES11/3_资源文件夹/one.md', (err, data)=>{
            if(err) reject(err);
            resolve(data);
        });
    });
}

function readTwo(){
    return new Promise((resolve, reject)=>{
        fs.readFile('C:/Users/ASUS/Desktop/各类文件夹/html+css+javastript/ES6--ES11/3_资源文件夹/two.md', (err, data)=>{
            if(err) reject(err);
            resolve(data);
        });
    });
}

function readThree(){
    return new Promise((resolve, reject)=>{
        fs.readFile('C:/Users/ASUS/Desktop/各类文件夹/html+css+javastript/ES6--ES11/3_资源文件夹/three.txt', (err, data)=>{
            if(err) reject(err);
            resolve(data);
        });
    });
}

// 使用async函数
async function main(){
    try{
        let one = await readOne();
        let two = await readTwo();
        let three = await readThree();
        console.log(one.toString(), + '\n' + two.toString() + '\n' + three.toString());
    }catch(e){
        console.log(e);
    }
}

main();

3、对象新增的方法（混个眼熟，到需要用的时候，可以查笔记查文档）

		Object.is(NaN, NaN)     === 
            判断两个变量或值 是否相等

        Object.assign(obj1, obj2)   
            合并对象    obj2覆盖obj1
        
        Object.getPrototypeOf 
            设置原型对象    
        Object.setPrototypeOf 
            获取原型对象

        Object.keys()
            获取一个对象中 所有的键
        Object.values()
            获取一个对象中 所有的值

        Object.entries()
            生成 
                0 [key0, value0]
                1 [key1, value1]

        Object.getOwnPropertyDescriptors();
            获取 该对象的属性 的 描述对象

三、ES9新增的功能
1、对象的rest参数和解构运算符
其实他们两者都是三个点 … rest是用在函数形参的位置的，而解构运算符多是用在合并对象的时候。

// rest参数
function fun(a, ...args){
    console.log(a, args);   // 1 [ 2, 3, 4 ]
}
fun(1, 2, 3, 4);        

// 对象的rest参数, 通常是配合解构赋值一起使用的
function fun1({one, two, ...args}){
    console.log(one, two, args);        // 3306 127.0.0.1 { three: '淘宝', four: '京东' }
}
fun1({
    one: 3306,
    two: "127.0.0.1",
    three: "淘宝",
    four: "京东"
});     
/*
    可以看到，普通的rest参数，多余的参数是放到了数组里面的,
            对象的rest参数, 对于的参数是放到了 对象里面的，并且是以键值对的形式显示的
*/ 


// 普通的扩展运算符, 针对数组的, 多用于数组的合并, 和集合配合使用以达到去重目的
const arr = [1, 2, 3, 2, 3, 4];
console.log([...new Set(arr)]);     // 去重     [ 1, 2, 3, 4 ]
const arr1 = [2, 3, 4, 2];
console.log([...arr,...arr1]);  
/*
    [
        1, 2, 3, 2, 3,
        4, 2, 3, 4, 2
    ]
*/ 

// 对象的扩展运算符
const a = {name: "孙悟空", age: 18};
const b = {sex: '男', address: '花果山'};
console.log({...a, ...b});  // { name: '孙悟空', age: 18, sex: '男', address: '花果山' }

/*
    总结: rest参数可以用在一般函数和有对象解构赋值时候的函数
        扩展运算符，可以用在数组和对象上
*/ 

四、ES10
1、对象扩展方法
Object.entries()

        对象 --> 二维数组
     	把对象的key 和 value 都封装到数组中 ['key', value]
                方便创建 Map
        let m = new Map(Object.entries(对象));

        Object.fromEntries()
            用于创建对象, 接收的参数是 二维数组或者是Map对象
            二维数组 --> 对象
            Map --> 对象

2、字符串扩展

  trim() 		清除字符串两边的空白
  trimStart() 	清除字符串左边(开头)的空白
  trimEnd()   	清除字符串右边(结尾)的空白

 let str = ' 我爱你 爱到天荒地老  aaa  ';
 console.log('+++' + str.trim() + '+++');
 console.log('+++' + str.trimStart() + '+++');
 console.log('+++' + str.trimEnd() + '+++');

3、

 Array.prototype.flat(depth)
            depth: 默认值是 1, 当值是 2的时候, 则是将三维数组变成 一维数组,
                    1的话就是, 只降一个维度 
            将多维数组 转化为 低维数组
flatMap()
            将map 变成 数组

 const arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

        // 遍历二维数组
        for(let i = 0; i < arr.length; i++){
            for(let j = 0; j < arr[i].length; j++){
                console.log(arr[i][j]);
            }
        }

        const arr2 = arr.flat();
        // 此时的 arr1 已经是一维数组
        console.log(arr2);


        var arr1 = [1, 2, 3, 4];

        arr1.map(x => [x * 2]);
        // [[2], [4], [6], [8]]

        arr1.flatMap(x => [x * 2]);
        // [2, 4, 6, 8]

        // only one level is flattened
        arr1.flatMap(x => [[x * 2]]);
        // [[2], [4], [6], [8]]

4、获取Symbol的描述内容的属性 description

let one = Symbol('你不知道我一直爱着你');
        console.log(one);
        console.log(one.description);

五、ES11
1、私有属性

		/*
            私有属性 和 共有属性 
            在私有属性前 加上 #, 便可以变成私有属性
        */ 

        class Person{
            name;
            #age;
            #weight;

            //构造方法
            constructor(name, age, weight){
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }

            getInfo(){
                console.log(this.#age);
                console.log(this.#weight);
            }
        }

        const girl = new Person('小芳', 18, '50kg');
        console.log(girl.name);
        console.log(girl.weight);   // undefined
        // console.log(girl.#age);  报错

        girl.getInfo();

2、BigInt数据类型

		/*
            BigInt: 用于更大的数据的运算 
        */ 

        // 定义 BigInt数值  在整数后面加上n 便可以了
        let bigint = 123n;  

        console.log(bigint, typeof bigint);     // 123n "bigint"

        // 还可以将整数 变成 大整数, 如果是浮点数的话 会报错
        let num = 11;
        console.log(BigInt(num));       // 11n


        let max = Number.MAX_SAFE_INTEGER;  // 最大安全整数
        console.log(max);   
        console.log(max + 1);
        console.log(max + 2);   // 这两者的值是一样的

        // 需要注意的是 大整数和整数之间是不能运算的, 需要都是同一类型才可以
        console.log(BigInt(max) + BigInt(22));

3、绝对全局对象
globalThis: 始终指向全局对象