ES6-11随手记（2）

模块化的优势及产品

模块化：将一个大的程序文件拆分为许多小的文件然后将小文件组合起来。

优势：防止命名冲突、代码复用（将一些功能性代码封装成一个文件，对外暴漏一个接口以重复利用）、高维护性（对文件修改不会产生过度冲突，升级只需要对某一些模块进行升级即可）

模块化规范产品：CommonJS(NodeJS,Browserify), AMD(requireJS), CMD(seaJS)

ES6模块化语法

模块功能主要由两个命令构成：export（用于规定模块的对外接口）， import（用于输入其他模块提供的功能）

<script type=module>
    //通用的导入方式
    import * as c from "路径"//此时将模块中的内容存在了c中
    console.log(c);
    //若是默认暴露可以通过以下方式调用
    c.default.b();

    //解构赋值形式
    import{a,b}from"路径";//针对前两种暴露方式
    import{default as c}from "路径";//针对默认暴露

    //简便形式，只能针对默认暴露
    import c from "路径";
<script>

//路径对应的js文件
//分别暴露
export let a = ' '
export function b(){
    console.log(" ");
}
//统一暴露
let a = ' '
function b(){
    console.log(" ");
}
export(a,b);
//默认暴露
export default{暴露的数据（可以是任何类型）}

babel对模块化代码转换

https://blog.csdn.net/laplacepoisson/article/details/120984743

ES7新特性

Array.prototype.includes，该方法用来检测数组中是否包含某个元素，返回布尔类型（indexOf存在返回下标，不存在返回-1）

引入指数运算符（**），实现幂运算，功能Math.pow结果相同

ES8新特性

async和await

async和await结合可以让异步代码像同步代码一样。

async函数的返回值为promise对象，可以使用then方法添加回调函数，promise对象的结果由async函数执行的返回值决定。只要返回的不是一个promise对象，则返回的结果就是一个成功的promise。抛出错误返回的结果是一个失败的promise。

await表达式必须写在async函数中，其右侧表达式一般为promise对象，返回的是promise成功的值，如果await的promise失败了就会抛出异常，需要通过try...catch捕获处理。

const p = new Promise((resolve,reject)=>{
    //resolve("成功了");
    reject("失败了");
})

async function main(){
    try{
    let result = await p;//此时result为“成功了”
    }catch(e){
        console.log(e);
    }
}
main();

ES9新特性

rest参数与spread扩展运算符再ES6中只针对数组，在ES9中为对象提供了rest参数和扩展运算符。

function connect({host,port,...user}){
    console.log(host);
    console.log(port);
    console.log(user);
}
connect({
    host: ,
    port: ,
    username: ,
    password: ,
    ......
}//若下面还有更多的参数都会存在user变量中

//若对上述对象使用扩展运算符输出结果为：host: ,port:,......

ES10新特性

字符串方法扩展

ES5中有字符串方法trim，用来清除字符串两侧的空白字符。ES10添加了两种方法trimStart和trimEnd用来指定清除左侧和右侧。

数组方法扩展

flat：将多维数组转化为低维数组。arr.flat(a),其中的a为深度参数，若为2则表示两层（例如3维~1维）。

flatMap：把map的结果做维度降低，即执行map操作然后对返回值组成的数组执行flat操作。

Symbol.prototype.description

用来获取symbol的描述字符串。

let s = Symbol('西瓜');
console.log(s.description);//操作台打印西瓜

ES11新特性

私有属性

即对属性的封装。

calss Person{
    //共有属性
    name;
    //私有属性
    #age;
    //构造方法
    constructor(name,age){
        this.name = name;
        thia.#age = age;
    }
    print(){
        console.log(this.#age);
}

const boy = new Person('zhangsan',18);
console.log(boy.#age);//出现报错，无法得到结果
boy.print();//控制台打印年龄

Promise.allSettled方法

接收promise数组，返回结果为promise对象（永远为成功状态，且成功的值为内部每一个promise对象的状态和结果）。

const p1 = new Promise((resolve,reject)=>{
    resolve('haha');
});
const p2 = new Promise((resolve,reject)=>{
    resolve('hahaha');
});
const result = Promise.allSettled([p1,p2]);

与该方法类似的还有all()方法，也是接收数组对象，但是返回的结果要根据内部每一个promise对象的状态和结果决定（均成功则成功，否则失败，失败的值就是失败的promise对象的值）。

两者皆用于批量异步任务的情况。

String.prototype.matchAll（reg）方法

用于数据批量提取，返回一个包含所有匹配正则表达式的结果及其分组捕获组的迭代器(可以使用for...of，扩展运算符等），其中reg为正则表达式，如果不是正则表达式则会使用new RegExp(obj)隐式转换为正则表达式，表达式必须设置为全局变量。

可选链操作符（?.)

允许读取位于连接对象链深处的属性的值，而不需要做层层判断。 

1、查找深度嵌套的可能不存在的子属性

let result = obj.first?.second;
//在访问second之前检查并确认first是否为null或者undefined,若是则直接返回undefined

2、调用一个可能不存在的方法，如果被调用的方法不存在，使用可选链可以使表达式自动返回undefined而不是抛出一个异常。

3、可选链不可用于赋值

动态import

动态import的作用就是按需加载想要引入的模块。Import()返回的结果是一个promise对象，promise对象成功的值module就是引入的这个模块往外抛出的对象。

btn.onclick = function(){
    import('路径').then(module =>{
        
    });
}

BigInt类型

赋值时直接在数据后面加n即可，数据类型变为bigInt型。注意不可以用浮点数。

转换函数：let n = 123; console.log(BigInt(n));//打印结果为123n。

BigInt型不可以与普通整型做运算。

绝对全局对象globalThis

无论执行环境是什么始终指向全局对象。

• 浏览器的全局是 window

• node.js 的全局是 global