[JavaScript知识库]2021-09-09

ES6–ES11笔记2

一、Promise对象,用来解决异步编程的，配合then()方法或者catch方法使用

const fs = require('fs');

// 1、Promise对象是解决异步编程的，多用来配合文件的读写以及ajax
const p = 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);
    });
});

p.then((value)=>{
    console.log(value.toString());
}, (reason)=>{
    console.warn(reason);
});

1.1、Promise对象是解决异步编程的，多用来配合文件的读写以及ajax

const fs = require('fs');
const p = 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);
    });
});


// 1.1、Promise中then方法的嵌套使用, 一般是以返回Promise对象居多
p.then((value)=>{
    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([value, data]);
        })
    });
}, (reason)=>{}).then((value)=>{
    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);
            value.push(data);
            resolve(value);
        })
    })
}, (reason)=>{}).then((value)=>{
    console.log(value.toString());
});

二、类的引入，构造函数，父类的继承，静态static
1、类的创建 和 静态static 以及调用

// 2、类的引入
class Person{
    // 静态属性和方法, 所谓静态就是只属于 类名Person的， 不属于Person实例化的对象per的
    static secret = "很能吃";
    static fly(){
        console.log('不会飞');
    }

    // 所谓constructor构造器就是, 在实例化对象的时候，就会自动执行的代码块
    constructor(name, age){
        this.name = name;
        this.age = age;
        console.log('我是在实例化对象时输出的内容');
    }

    speak(){
        console.log(this.name + "会说话");
    }

    run(dis){
        console.log(this.name + "可以跑" + dis + '米');
    }

    eat(food){
        console.log(`${this.name}认为${food}很好吃`);
    }
}

// 类的实例化
const per = new Person('小白', 18);     //  我是在实例化对象时输出的内容
per.eat('猪头肉');          				// 小白认为猪头肉很好吃

Person.fly();               			// 不会飞
console.log(per.secret);    			// undefined

2.1、类的继承 extends, 以及父类方法的重写

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    sleep(){
        console.log('会睡觉');
    }
}

// extends是继承的意思, 这样写就继承了Person, 这样Person这个类就是Student的父类了
class Student extends Person{
    // 参数需要传完整
    constructor(name, age, sex, subject){
        // super是超级的意思, 将父类的属性都传递进去
        super(name, age);
        this.sex = sex;
        this.subject = subject;
    }
    // 在方法里面使用属性，是要带上this的，因为已知的是有this的
    teach(){
        console.log(`${this.name}是教${this.subject}的`);
    }
}

const stu = new Student('药老', 88, '男', '炼药术');
// 调用父类的方法
stu.sleep();        // 会睡觉
// 调用子类的方法
stu.teach();        // 药老是教炼药术的

三、模块(module)的引入，以及模块内属性和方法的暴露
1、模块的引入,是使用export关键字来的

// 1.1、分别暴露
export function add(a, b){
    return a+b;
}
export let name = 10;

// 1.2、统一暴露
function mul(a, b){
    return a*b;
}
let age = 18;
export{mul, age};

// 1.3、默认暴露：以对象的形式来暴露的
export default{
    name: "小小怪",
    age: 18,
    call(){
        console.log('会叫大大怪来帮忙');
    }
}

2、使用方式,使用import来导入

3、总结

① 什么是暴露？为什么要使用暴露？有哪几种暴露的方式?
首先一个JS文件就是一个模块，在编写代码时，如果都将所有功能放到一起的话会很混乱，
而且会出现一些重复性的代码，这个时候就需要将代码模块化。既然模块化之后了，就要使用
这些模块的属性和方法以及功能，那么就需要使用到暴露(export:出口的意思)，export关键字
可以将需要给外部使用的方法和属性进行暴露。
目前来说是有三种暴露的方式的，在ES6之前使用的是 exports和module.exports，
也就是所谓的COMMANDJS规范。

ES6之后的暴露方式便是: 
1、分别暴露，分别给想要的属性和方法之前暴露
2、统一暴露，将需要暴露的方法或属性，以对象的形式向外暴露
3、默认暴露，使用export default{}, 在大括号内使用对象的语法向外暴露功能。

四、集合Set和Map的引入
1、集合的引入
1.1、集合的定义方式 new Set();

let set = new Set(['消炎', '秦岭', '药老']);
console.log(set, typeof set);   // object
set.add('元素1');               // set.add(elem) 添加元素,一次只能添加一个元素
console.log(set.size);          // set.size 获取集合元素的个数
set.delete('元素1');            // set.delete(elem) 删除集合中的某个元素
set.has('消炎');                // set.has(elem) 检查集合中是否含有某个元素
console.log(set);

1.2、集合的应用: 多用来和 数组使用, 集合有去重的功能

let set1 = new Set([1, 2, 3, 3, 2, 4, 3]);      // 传递了有多个重复数字的数组
console.log(set1);          // Set(4) { 1, 2, 3, 4 }

const arr1 = [23, 34, 23, 34, 22];
console.log([...new Set(arr1)]);      // [ 23, 34, 22 ]
//将数组arr1传入集合,集合会去重,再使用扩展运算符 ... 将非数组的转化成数组,并且使用数组的括号[]包括起来

1.3、集合总结

① 集合是什么？
集合是一种数据结构, 有去重功能，实质上还是object

② 集合有什么用?
集合中的元素称为成员。集合的两个最重要特性是：
首先，集合中的成员是无序的；其次，集合中不允许相同成员存在。
当你想要创建一个数据结构用来保存一些独一无二的元素时就可以用到集合。

1.4、Map的引入

let map = new Map();		   // 创建一个map
map.set('name', '小白');       // 增加元素, 使用 set(key,value)
console.log(map.size);         // map.size用来获取Map的元素个数，和set集合的方式一样
console.log(map.get('name'));  // map.get(key), 获取的是key对应的value
console.log(map.has('name'));  // map.has(key), 检查map是否含有某个元素
map.clear();                   // 清空map
/*
    可以看到，map中操作的都是key, 而不是value
    Map是类似于对象的形式的, 也是有key和value
*/ 

1.5、Map总结

① 什么是Map?
	Map是一组键值对的结构，具有极快的查找速度。类似于对象，
	特别之处是，Map中的key可以是任意的数据类型，不像对象Object局限于字符串。
② Map有什么特性？
	Map中的key可以是任意数据类型

let map1 = new Map();
const arr4 = ['王者', '吃鸡', '光遇'];
const obj2 = {
    name: '孙悟空'
};
map1.set(obj2, arr4);
console.log(map1);      // Map(1) { { name: '孙悟空' } => [ '王者', '吃鸡', '光遇' ] }

③ Map有什么用？
    Map的作用就是做映射。对象也可以用来做映射，
    但由于对象的键名只能是字符串（或Symbol），因此存在一些限制，
    例如不能对对象进行映射。
    Map就没有这个限制，可以对任意类型进行映射。
	简而言之，在需要对除字符串以外的数据类型进行映射的时候，Map就可以派上用场。

那么什么是映射？
    打个比方，老王一家有3个孩子，映射就好比把老王家的3个孩子都拉出来认一遍。
    有点类似是对数组元素的for...of遍历了