目录

引言

let声明变量的规则

const声明变量的规则

变量的解构赋值

ES6 引入新的声明字符串的方式——模板字符串[``]  '' ""

ES6 箭头函数

ES6 rest参数

ES6 扩展运算符 ... 

ES6 Symbol

JavaScript的七种数据类型：

ES6 迭代器

ES6 生成器

yield 可作为代码的分隔符

Promise

Promise-then方法

Promise-catch方法

Set

Map

class类

数值扩展

对象方法扩展

模块化

ES6模块化语法

    export暴露方式有三种：

    import引入方式：

浏览器使用ES6模块化方式二

babel对ES6模块化代码的转换及打包

ES6模块化与npm包的结合使用（步骤）

ES7-ES11的新特性

ES7 新特性

ES8新特性

1.async和await

    2.await表达式

ES8对象方法的扩展——Object.values和Object.entries

ES9新特性

ES9 扩展运算符和rest参数

ES9 正则扩展——命名捕获分组

ES9 正则扩展——反向断言

ES9 正则扩展——dotAll模式 

ES10新特性

ES10 对象扩展方法Object.fromEntries

ES10 字符串方法扩展trimStart与trimStart

ES10 数组方法扩展flat与flatMap

ES10 symbol.prototype.description

ES11新特性

ES11 String.prototype.matchAll()

ES11 可选链操作符 ?.

ES11 动态import 即 按需加载，可实现import的懒加载效果

ES11 BigInt类型

---

引言

        这篇笔记是在b站上，看尚硅谷的课程，主讲老师是李强老师，主讲的是《尚硅谷Web前端ES6教程，涵盖ES6-ES11》，以下是我的ES6学习笔记，如有不对之处，请多指正，大家相互学习，共同进步......

let声明变量的规则

    1.let声明的变量不能重复声明   但是var就没有这个问题

    2.let 是块级作用域  全局 函数 eval  但是var则是全局变量

        这里的块级作用域是指 if else while for 等{}中的作用域

    3.let 定义的变量,不存在变量提升  但是var可以，如果是var定义的话则会显示undefined

    4.不影响作用域链

const声明变量的规则

    1.const 是声明和定义常量的，声明时一定要赋初始值

    2.一般常量使用大写(潜规则)，常量的值是不能修改的

    3.const定义的常量也是块级作用域

    4.对于数组和对象的元素修改，不算做对常量的修改  

    5一般在定义数组 或是 对象时都定义为const形式，防止误改、数据污染

变量的解构赋值

    ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值。 这被称为 解构赋值

ES6 引入新的声明字符串的方式——模板字符串[``]  '' ""

    1.``再模板字符串中可以直接出现换行

    2.变量拼接       

let lovest = 'JIAJIA';

let out = `${lovest}是我最喜欢的小美女`;

ES6 箭头函数

    1.this是静态的，this始终指向 函数声明 时所在作用域下的this的值（大多数情况this都是指window）

    2.箭头函数 不能作为构造器，实例化对象

    3.箭头函数 不能使用arguments 变量

    4.箭头函数的简写

        1)省略小括号，当形参有且只有一个的时候

        2)省略花括号，当代码体只有一条语句的时候，此时 return 也要省略 即语句的执行结果就是函数的返回值

   

    箭头函数 适合 与this无关的回调。  例如：定时器、数组方法回调

    箭头函数 不适合 与this有关的回调。 例如：实践回调，对象的方法

ES6 rest参数

    rest参数，用于获取函数的实参，用来代替arguments （rest参数必须放在参数最后）

    rest 与 arguments不同之处在于 返回的结果不同 前者返回的是 “数组”；后者返回的是“对象”

ES6 扩展运算符 ... 

    [...] 扩展运算符能将 [数组] 转化为<逗号>分割的 [参数序列];(扩展运算符和rest参数很像，但是rest的<...>是在函数的<形参>中，扩展运算符是在调用函数的<实参>里)

    扩展运算符的应用:

        1.数组合并

        2.数组克隆  (若拷贝目标中有<对象>,则是浅拷贝)

        3.将为数组转为真正的数组

ES6 Symbol

    Symbol 是ES6引入的一种新的原始数据类型；表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型

    Symbol 特点：

        1)Symbol 的值是唯一的，用来解决命名冲突的问题

        2)Symbol 值不能与其他数据进行运算(比较 和 字符串的拼接 都不可以)

        3)Symbol 定义的对象属性不能使用 for...in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

   

    Symbol 的两种创建方式       

 let s = Symbol();

 let b = Symbol.for('xxx');

        第一种创建方式的得到的结果 永远不相同 即： Symbol('佳佳') !== Symbol('佳佳');

        第二种创建方式的得到的结果 相同 即： Symbol.for('佳佳') === Symbol.for('佳佳')

ES6 Symbol内置属性： 扩展对象功能

       

JavaScript的七种数据类型：

        USONB  <you are so niubility >

            U  undefined

            S  String Symbol

            O  object

            N  null number

            B boolean

ES6 迭代器

    迭代器(Iterator)是一种接口<指的是 对象 中的一个属性Symbol.iterator>，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。

    1)ES6 创造了一种新的遍历命令 for...of循环。Iterator接口主要供for...of消费

    2)原生具备iterator接口的数据(可用for...of遍历)

        Array、Arguments、Set、Map、String、TypedArray、NodeList

ES6 生成器

    生成器函数(一种特殊的函数) 是ES6提供的一种 <异步编程解决方案>，语法行为与传统函数完全不同

<!-- 异步编程 -->  文件操作 网络操作(ajax,爬虫request) 数据库操作

   

yield 可作为代码的分隔符

    yield  函数代码的分隔符  有next()函数调用 一下yield用分为5块

        生成器的创建及调用：           

function * gener() {

                yield '两只老虎,两只老虎';  //一块

                yield '一直没有耳朵';//二块

                yield '一直没有尾巴';//三块

                yield '真奇怪,真奇怪...';//四块

                                        //五块

            }

            let iterator = gener();

            console.log(iterator.next());

   

    生成器 中的调用 生成器函数时，next方法中可传入参数，next中传入的 [参数] 可作为上一个yield的返回结果.

Promise

    Primise 是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装 异步操作  并可以获取 成功或失败的 结果

    1)Promise 构造函数：Promise(excutor){}

    2)Promise.prototype.then 方法

    3)Promise.prototype.catch 方法

<script>

    //实例化 Promise对象

    const p = new Promise(function(resolve,reject) {

        // 如果成功则调用 resolve方法

        // let data = '数据库中的用户数据读取成功...'

        // resolve(data);

        // 如果失败则调用 reject方法

        let data = '数据库中的用户数据读取异常...'

        reject(data);

    },1000);
//调用 Promise 对象的 then方法;    默认情况下then的两个回调函数中第一个参数为value的接受的是成功   另一个参数为reason的处理的是失败的

    p.then(function(value){

        console.log(value);

    },function(reason){

        console.error(reason);

    })

</script>

Promise-then方法

    在调用then方法时， then方法的返回结果是Promise 对象，这个 结果对象状态 是由回调函数的执行结果决定的。即：

        1)如果回调函数中返回的结果是 <非>Promise 类型的属性，状态为成功，返回值为对象的成功值

        2)如果回调函数中返回的结果是 Promise 对象， 则状态要看返回的Promise对象是什么resolve还是reject，如果为resolve则成功，否则失败

        3)抛出错误  throw new Error('出错啦'); 不管抛出的是什么类型的错误，状态都为失败，返回值为对象的失败值

Promise-catch方法

    Promise-then方法可链式调用，Promise-catch方法是Promise-then的一种简练形式，它只处理状态为失败的时候。

Set

    ES6提供了新的数据结构Set(集合)。它类似于数组，但是成员的值都是唯一的，集合实现了iterator接口，所以可以使用 [扩展运算符] 和 [for...of..] 进行遍历。

    集合的属性和方法：

        1)size(属性)   返回集合元素个数

        2)add          增加一个新元素，返回当前集合

        3)delete       删除元素，返回boolean值

        4)has          检测集合中是否包含某个元素，返回boolean值

        5)clear        清空集合

Map

    ES6提供了Map数据结构，他类似于对象，也是键值对的集合。但是'键'的范围不限于字符串，各种类型的值(包括对象)都可以当作键。Map 也实现了iterator接口，所以可以使用 [扩展运算符] 和 [for...of]进行遍历。Map的属性和方法。

    1)size     返回Map的元素个数

    2)set      增加一个新元素，返回当前Map

    3)get      返回键名对应的键值

    4)has      检测Map中是否包含某个元素，返回boolean值

    5)clear    清空集合，返回undefined

class类

    ES6提供了更接近传统语言的写法，引入了Class(类)这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，他的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面型对象编程的语法而已。

    知识点：

        1)class声明类

        2)constructor 定义构造函数

        3)extends 继承父类

        4)super 调用父级构造函数

        5)static 定义静态方法和属性   这里的静态对象是属于 [类] 但不属于 [实例对象]

        6)父类方法可以重写       ***可完全重写，但是子类不能且不允许通过super()调用父类方法

   

    class中的getter和setter的设置:

        get 属性名(){return 属性值}     动态绑定属性值

        set 属性名(要更改的参数值){}     动态设置属性值

数值扩展

        1.Number.EPSILON 是 JavaScript表示的最小精度  

                EPSILON接近的数值很小，通常用在 浮点数是否相等 的判断中

                如果两个浮点数相减的结果小于EPSYLON，则认为他们相等

        2.二进制0b、八进制0o、十六进制0x

        3.Number.isFinite()  检测一个数值是否为有限数

        4.Number.isNaN()     检测一个数值是否为 NaN

        5.Number.parseInt()、Number.parseFlaor()将一个字符串转化为整数、浮点数

        6.Number.isInteger()  判断一个数是否为整数

        7.Math.trunc()        将小数部分抹去

        8.Math.sign()         判断一个数到底为正数(返回1)、负数(返回-1)还是零(返回0)

对象方法扩展

    1.Object.is(xxx,xxx)        判断两个值是否完全相等

    2.Object.assign(xxx,xxx)    对象的合并

    3.Object.setPrototypeOf(xxx,xxx)  设置原型对象  (一般不提倡使用，效率低)

    3.Object.getPrototypeOf(xxx)  获取原型对象值  (一般不提倡使用，效率低)

模块化

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

    模块化的优势：

    1)防止命名冲突

    2)代码复用

    3)高维护性

ES6模块化语法

    模块功能主要由两个命令构成：export和import

        export命令用于规定模块的对外接口

        import命令用于输入其他模块提供的功能

    export暴露方式有三种：

        分别暴露：export+代码

        统一暴露：export{变量名，函数名,...}

        默认暴露：export default{xxxx,xxx,....}

    import引入方式：

    1.通用方式：import * as 模块名 from '模块路径'

    2.解构赋值形式：import {变量名，函数名} from '模块路径'(分别暴露和统一暴露)  import {default as 模块名} from '模块路径'

    3.简便形式(针对 默认暴露)：import 模块名 from '模块路径'

浏览器使用ES6模块化方式二

  新建一个app.js,在app.js中去引入模块，然后再.html中写:<script scr='xxx/xxx/app.js' type='module'></script>

babel对ES6模块化代码的转换及打包

    1.安装工具  babel-cli babel-preset-env browserify(webpack)

    2.npx babel xxx/xxx -d dist/js(如果安装工具时是局部安装就用这条命令，全局安装直接babel xxx/xxx -d dist/js)

    3.打包 npx browserify dist/js/app.js -o dist/bundle.js(如果安装工具时是局部安装就用这条命令，全局安装直接browserify dist/js/app.js -o dist/bundle.js)

ES6模块化与npm包的结合使用（步骤）

    1.下载模块(nmp i 模块名)

    2.import 变量名 from 包名/模块名

ES7-ES11的新特性

ES7 新特性

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

    指数操作符  在ES7中引入指数操作符 【**】，用来实现幂运算功能与Math.pow结果相同。

ES8新特性

1.async和await

    async函数

        1.async函数的返回值为promise对象

        2.promise对象的结果由async函数执行的返回值决定

    async返回的结果：

            1.只要返回的结果不是一个Promise 类型的对象，那么，async的结果都是一个成功的promise对象

            2.如果抛出错误，则返回的结果是一个失败的Promise

            3.如果返回的结果是一个Promise对象，那么结果取决于这个Promise对象的值

        

    2.await表达式

        1.await必须写在async函数中 (但是async中可以没有await)

        2.await右侧的表达式一般为promise对象

        3.await返回的是promise成功的值

        4.await的promise失败了，就会抛出异常，需要通过try...catch捕获处理

ES8对象方法的扩展——Object.values和Object.entries

    1.Object.values()方法返回一个给定对象的所有可枚举属性值的数组 (就是返回字典中的键值)

    2.Object.entries()方法返回一个给定对象自身可遍历属性[key,value] 的数组 （就相当于是获取字典中的一整个条目,方便创建Map对象）

    3.Object.getOwnPropertyDescriptors()该方法返回指定对象所有自身属性的描述对象。（方便深克隆对象）

 

ES9新特性

ES9 扩展运算符和rest参数

    Rest 参数与 spread 扩展运算符在 ES6 中已经引入

    不过ES6中只是针对于数组

    在ES9 中为对象提供了像数组一样的rest 参数和扩展运算符

 

ES9 正则扩展——命名捕获分组

   

<script>

        //声明一个字符串

        let str = '<a href="http://www.baidu.com">百度</a>'



        // 提取url 与 标签文本

        // const reg = /<a href="(.*)">(.*)<\/a>/



        //执行  原始

        // const result = reg.exec(str);

        // console.log(result);

        // console.log(result[1]);

        // console.log(result[2]);



        //命名 分组groups

        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)



    </script>

ES9 正则扩展——反向断言

   

 <script>

        let str = 'JS5211314你晓呆吗5555呜呜呜';



        //正向断言  取5555

        // reg = /\d+(?=呜)/

        // const result = reg.exec(str);

        // console.log(result);



        // 反向断言

        reg = /(?<=吗)\d+/;

        let result = reg.exec(str);

        console.log(result);

    </script>

 

ES9 正则扩展——dotAll模式 

   

<script>

        //dot  有 . 的意思 而.在正则里表示  元字符（除换行符以外的任意单个字符）

        let str = `

        <ul>

            <li>

                <a>肖生克的救赎</a>

                <p>上映时间:1994-09-10</p>

            </li>

            <li>

                <a>阿甘正传</a>

                <p>上映时间:1994-20-10</p>

            </li>

        </ul>`;

        // 声明正则

        // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/

        // const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s    //这样表示可匹配所有 字符包括换行符

        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs    //这样表示可匹配所有 字符包括换行符  g表示全局匹配，利用循环得到结果

        let result;

        let data = [];

        while(result = reg.exec(str)){

            data.push({title:result[1],time:result[2]})

        }

        console.log(data);

    </script>

ES10新特性

ES10 对象扩展方法Object.fromEntries

    Object.fromEntries 和 Object.entries是逆运算，Object.entrise是将对象转换为数组，而Object.fromEntries则是将数组转化为对象。

ES10 字符串方法扩展trimStart与trimStart

    trimStart是去除字符串左侧空格，trimEnd是去除字符串右侧空格。

ES10 数组方法扩展flat与flatMap

    flat可译为：平 ；能将 多位数组 转化为 低位数组；如果传参，那么参数位数字，这个数字为转化的深度

    flatMap是一个符合操作，可以将Map方法生成的多维数组 转化为 一维数组

<script>

        // const arr1 = [1,2,3,4,5,[6,8,5]];

        // console.log(arr1.flat());



        const arr2 = [1,2,3,4,5,[6,8,5,[8,9,10,11]]];

        console.log(arr2.flat(2));

       

        const arr1 = [1,2,3,4,5]

        // const arr3 = arr1.map(item => item*10)   // [10, 20, 30, 40, 50]

        const arr3 = arr1.flatMap(item => [item*10])

        console.log(arr3);

    </script>

ES10 symbol.prototype.description

   Symbol对象的description属性可以获得Symbol对象的值；即：       

 let s = Symbol（“肖佳佳”）

 console.log(s.description)     //的值是  肖佳佳

       ES11 的私有属性 前要加 # 来区分，私有属性只能在类里面使用，不能用 实例化的对象 直接调用

        ES11 Promise.allSettled() 接收的是一个 Promise对象数组 ； 返回的结果永远是Promise对象状态永远是resolve，该结果是数组中的Promise值的返回结果状态+值

        ES11 Promise.all() 接收的是一个 Promise对象数组 ； 返回的结果永远是Promise对象状态和数组中的Promise对象的状态有关，只有数组中的Promise对象的状态都为成功时，它的返回结果状态才是成功，否则就是失败。

        ES11 字符串方法扩展 String.prototype.matchAll() 该方法是用来得到 正则批量的匹配的结果

ES11新特性

ES11 String.prototype.matchAll()

   

<script>

        let str = `

        <ul>

            <li>

                <a>肖生克的救赎</a>

                <p>上映时间:1994-09-10</p>

            </li>

            <li>

                <a>阿甘正传</a>

                <p>上映时间:1994-20-10</p>

            </li>

        </ul>`;



        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg



        let result = str.matchAll(reg);

        const arr = [...result]

        console.log(arr)

    </script>

 

ES11 可选链操作符 ?.

 ?. 是用来判断对象的层级属性是否存在   

<script>

        function main(config) {

            // 不用可选操作符？.

            // const dbHost = config && config.db && config.db.host  

            const dbHost = config?.db?.host  //这两条语句 等价




            console.log(dbHost);

        }



        main({

            db:{

                host:'127.0.0.1:8000',

                username:'jiajia'

            },

            dba:{

                username:'xiaojiajia',

                password:'123456'

            }

        })

    </script>

ES11 动态import 即 按需加载，可实现import的懒加载效果

        ES11的动态import就是不在开头引入，是在需要引入时调用import方法，这个方法返回的是一个Promise对象，可通过这个Promise对象调用模块方法。import(传入的是模块路径).then(module=>{module.hello()});

ES11 BigInt类型

        1.在整型数字后面加个n，或是直接用BigInt(整数)，将整数转换为大整形。BigInt类型主要是用作 大整数运算。