ES6-ES11学习记录

ES6

let

1.使用方法和var一样，但是变量不能被重复声明

2.块级作用域
2.1声明的变量只在所在代码块中生效（比如for循环中的i用let声明，那么i只在let所在代码片段小括号中生效）

3.不存在变量提升

4.不影响作用域链效果

const

1.用于声明常量（一定要赋初始值）

const a = 100;

2.常量的值不能被修改

3.块级作用域

4.对于数组和对象的元素修改，不算是对常量的修改不会报错(所以一般用const来声明一个对象或者数组)

变量解构赋值

ES6允许按照一定的模式从对象和数组中提取值，并且对变量进行赋值，这就叫做解构赋值
举例：

const obj = {
            name:"张三",
            age:"18"
        }
        let {name, age} = obj;
        console.log(name);
        console.log(age);

模板字符串``

1.``可以代替双引号、单引号，声明字符串。
2.内容可以有换行符
3.可以与变量直接拼接，省去了使用+连接字符串的麻烦

// 模板字符串
        let name = "沈腾";
        let str = `${name}是最搞笑的喜剧演员`;
        console.log(str);

简化对象写法

ES6允许在对象的大括号里面直接书写对象的属性和方法，作为对象的属性和方法

		let name = "张三";
        let age = 18;

        const info = {
            name, // 省去了以前写name:name
            age
        }
        console.log(info);

箭头函数

先观看区别

		let fn1 = function(){
            console.log("hello world");
        }    // es6以前定义函数

        let fn2 = ()=>{
            console.log("hello world");
        }    // es6箭头函数

特点：
1.this是静态的，始终指向函数声明时所在作用域的this
2.不能构造实例化的对象
3.不能使用arguments
4.箭头函数的简写
4.1省略小括号，当形参只有一个时，可以省略小括号
4.2省略花括号，当函数内部只有一条语句时（注：return也需要省略）

函数参数的默认值

1.ES6允许给参数赋默认值
2.具有默认值的参数，一般位置都要靠后
3.可以和解构赋值相结合

rest参数

//  使用...来类似于arguments，一般rest放在参数的最后面
        function fn(a, b, ...args){
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1, 4, 5, 6, 7);

区别：arguments解析出来得到的参数是一个对象，而rest是一个数组

扩展运算符

…扩展运算符能够将数组转化为逗号分隔的参数序列

const arr = [1, 3, 5, 6, 7];
		
        function fn(){
            console.log(arguments);
        }
		// 和rest区别，方法调用的时候用
        fn(...arr);// 相当于将数组中的每一个元素逐个取出放进实参
        fn(arr);

应用：
1.数组的合并
2.数组的克隆
3.将为数组转换成为真数组

Symbol

1.一种新的数据类型
2.变量值不可被改变
3.Symbol内部具有唯一性
4.不能与其他数据进行运算
比如：

		let a = Symbol("123");
        let b = Symbol("123");

        console.log(a === b); // 打印结果是false，判断的并不是变量值，而是Symbol内部唯一的指向

应用场景：如果想要在未知一个对象中新增方法或者属性，又怕覆盖掉原有的属性和方法，那么就可以使用Symbol。

迭代器

通过Symbol.iterator
工作原理
1.创建一个指针对象，指向当前数据结构的起始位置
2.调用next方法，直到指向函数的最后一个属性
3.每次调用next都会产生一个done和value属性

需要自定义遍历数组时，需要用到迭代器
举例：

const obj = {
            name: "IG",
            people: ['theshy', 'ning', 'rookie', 'jacklove', 'baolan'],
            // 需要定义Symbol中的iterator方法
            [Symbol.iterator]() {
                let index = 0;
                return {
                    next: () => {
                        if (index < this.people.length) {
                            const result = { value: this.people[index], done: false }
                            index++;
                            return result;
                        }
                        else {
                            return { value: undefined, done: true };
                        }
                    }
                }

            }
        }
        // 需求，用面向对象的方式遍历obj对象中的people
        for (let str of obj) {
            console.log(str);
        }

生成器

生成器是ES6提供的异步编程解决方案

// 生成器案例，模拟获取数据的回调地狱
        function getUser(){
            setTimeout(() => {
                let data = "用户数据"
                iteratol.next(data);
            }, 1000);
        }
        function getOrder(){
            setTimeout(() => {
                let data = "订单数据"
                iteratol.next(data);
            }, 1000);
        }
        function getLogin(){
            setTimeout(() => {
                let data = "登录数据"
                iteratol.next(data);
            }, 1000);
        }

        // 使用生成器
        function * data(){
            let data1 = yield getUser(data);
            console.log(data1);
            let data2 = yield getOrder(data);
            console.log(data2);
            let data3 = yield getLogin(data);
            console.log(data3);
        }
        let iteratol = data();
        iteratol.next();

Promise

// 实例化Promise对象
        // reslove表示成功后的回调方法
        // reject表示失败后的回调方法
        const Pro = new Promise((reslove, reject)=>{
            setTimeout(() => {
                let data = "S8夺冠"
                // reslove(data);
                reject(err);
            }, 1000);
        })

        Pro.then(function(value){
            // 成功
            console.log(value);
        },function(err){
            // 失败
            console.log(err);
        })

这里只提供了简单入门的理解，具体摆脱回调地狱的教程可以看此教学视频
https://www.bilibili.com/video/BV1uK411H7on?p=29&spm_id_from=pageDriver

Set

新的数据结构Set，它类似于数组，但成员的值都是唯一的，内部实现了iteratol接口，
所以可以使用for of和扩展运算符遍历数组

// Set创建
        let data = new Set(['111', '222', '333', '444', '111'])

        console.log(data);// Set(4) {111, 222, 333, 444}   自动去重

        console.log(data.size);// 4 输出元素个数

        console.log(data.add('555'));// Set(5) {111, 222, 333, 444, 555}

        console.log(data.has('222')); // 判断是否包含某个元素

        console.log(data.clear); // 清空
        
        for (const iterator of data) {
            console.log(iterator);
        }

Map

和Set类似，不过Map类似于对象（添加元素通过set，获取元素通过get，可以添加元素、数组、对象、方法）

class类

ES6引入了class（类）这个概念，作为对象的一个模板

		class student {
            constructor(name, age){
                this.name = name;
                this.age = age;
            }
            speak(){
                console.log("我可以说英文");
            }
        }

        const student1 = new student("张三", 20);
        console.log(student1);
        student1.speak();

可以有static（静态）、继承、方法重写等等，有兴趣的可以去学一下java基础，再来看js ES6的class会比较容易看懂

对象方法

Object.is，判断两个值是否完全相等，有点类似于===，但是，===不能判断NaN,NaN,此对象方法可以
使用方法：

console.log(Object.is(NaN, NaN)); // true

console.log(NaN === NaN); // false

模块化

ES6之前的模块化产品：
CommonJS：NodeJS，Browserify
AMD:requireJS
CMD:seaJS

模块功能主要有两个命令构成：export、import
export主要是用来导出模块的接口
import主要用来输入其他模块的功能

暴露模块的语法：
分别暴露
统一暴露
默认暴露(default)

导入方式：

        // 1.通用导入方式
        import * as m1 from "./js/index.js";
        console.log(m1);
        m1.say();

        // 2.解构赋值形式
        import {name} from "./js/index.js"
        console.log(name);

        // 3.简便方式，但只适用于默认暴露
        // import m2 from "./js/index.js"

使用babel对ES6模块化代码的转换和打包

        1.先安装工具
        babel-cli(命令行工具)   babel-preset-env(es6转换工具)   browserify(打包工具)
        2.项目初始化
        npm init --yes
        3.npm下载安装工具
        npm i babel-cli babel-preset-env browserify -D
        4.通过babel-preset-env转换语法
        npx babel js(源文件目录) -d dist(目标文件目录，可不存在) --preset=babel-preset-env
        5.打包
        npx browserify dist/index.js(源dist文件夹下的) -o bundle/bundle.js

ES7

Array.prototype.includes

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

         const arr = ['111', '222', '333', '444'];
         console.log(arr.includes('111')); // true

**

console.log(2 ** 10); //1024

ES8

async和await

可以使异步代码像同步代码一样

async函数

        // 在函数前加上一个async，定义async函数
        async function http(){
            // 默认返回的是一个promise对象
            return new Promise((reslove, reject)=>{
                // reslove("成功的数据");
                reject("出错了！！！");
            })
        }
        http().then(data=>{
            console.log(data);
        },err=>{
            throw Error(err);
        })

await表达式

1.await必须写在async函数中
2.await右侧的表达式一般为promise对象
3.await返回的是promise成功的值
4.await的promise失败了，就会抛出异常，所以需要结合try，catch捕获处理

结合发送ajax请求：

// async和await结合发送ajax请求 
        function sendAJAX(url) {

            return new Promise((resolve, reject) => {
                // 创建一个异步对象
                const http = new XMLHttpRequest();
                // 初始化
                http.open("get", url);
                // 发送请求
                http.send();
                // 监听事件
                http.onreadystatechange = function () {
                    if (http.readyState === 4) {
                        if (http.status >= 200 && http.status <= 300) {
                            resolve(http.response)
                        }
                        else {
                            reject(http.status)
                        }
                    }
                }
            })
        }
        // 使用async和await
        async function getdata(){
            try {
                const res = await sendAJAX('https://api.apiopen.top/getJoke');
                console.log(res);
            } catch (error) {
                console.log(error);
            }
        }
        // 调用async函数
        getdata();

ES8对象方法的扩展

// 对象方法
        const obj = {
            name:"zs",
            age:19,
            arr:[1, 3, 5, 8, 6, 6]
        }
        // 获取对象中的键
        console.log(Object.keys(obj));  // Array(3) 返回一个数组
        // 获取对象中的值
        console.log(Object.values(obj));  //(3) ["zs", 19, Array(6)] 
        // 获取对象中的键值
        console.log(Object.entries(obj));
        /* 
        (3) [Array(2), Array(2), Array(2)]
            0: (2) ["name", "zs"]
            1: (2) ["age", 19]
            2: (2) ["arr", Array(6)]
            length: 3
            __proto__: Array(0)
        */
    //    使用map进行转换
        const newOBJ = new Map(Object.entries(obj));
        console.log(newOBJ);

        /* 
        Map(3) {"name" => "zs", "age" => 19, "arr" => Array(6)}
                [[Entries]]
                0: {"name" => "zs"}
                1: {"age" => 19}
                2: {"arr" => Array(6)}
                size: (...)
                __proto__: Map
        */

ES9

rest和扩展运算符

		const a = {
            a:111
        }
        const b = {
            b:222
        }
        const c = {
            c:333
        }
        const d = {
            d:444
        }

        const obj = {...a, ...b, ...c, ...d}
        console.log(obj);
        /* 
        Object
            a: 111
            b: 222
            c: 333
            d: 444
            __proto__: Object
        */

function connfig({host, port, ...user}){
            console.log(host);  // localhost
            console.log(port);  // 3306
            console.log(user);  // {username: "root", pass: "root"}
        }
        connfig({
            host:"localhost",
            port:3306,
            username:"root",
            pass:"root"
        })

正则

命名捕获分组

		// 正则命名捕获分组
        let str = `<a href="http://www.baidu.com">百度</a>`;
        // 创建一个正则
        let zz = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
        // 需求：提取出其中的url和标签内容
        let newRes = zz.exec(str);
        console.log(newRes);
        /* 
        groups:
            text: "百度"
            url: "http://www.baidu.com"
        */

反向断言

// 随意声明一个字符串
        let str = "ASD123424发射点反对999顾客"
        // 需求：获取其中的999
        // 正向断言
        let zz = /\d+(?=顾)/
        let res = zz.exec(str);
        console.log(res);

        // 反向断言
        let zz2 = /(?<=对)\d+/
        let res2 = zz2.exec(str);
        console.log(res2);

dot-All模式

新增一个点“.”的元字符，表示匹配除换行符以外的任意字符

ES10

Object.fromEntries

		const obj = [
            [111, 222],
            [444, 555]
        ]
        const res = Object.fromEntries(obj);
        // Object.fromEntries将二维数组或者map转化为对象
        // 与entries方法刚好相反
        console.log(res);

trimStart()、trimEnd()

		let str = "   hello    ";
        // 清除左侧空白
        console.log(str.trimStart());
        // 清除右侧空白
        console.log(str.trimEnd());

ES11

私有属性

		class person {
            name;
            age;
            // 私有属性
            #weight;
            // 构造方法
            constructor(name, age, weight){
                this.name = name;
                this.age = age;
                this.#weight = weight
            }
        }

        let girl = new person("xiaohong", 18, "45kg");

        console.log(girl.#weight);// 报错

参照学习视频分享一些比较常用的，其他的可以参照一下官方文档
https://tc39.es/ecma262/#sec-intro