ES6~11新特性学习笔记

ES6到ES11新特性学习

本笔记内容课程来源于B站尚硅谷视频学习记录
文件下载链接：https://download.csdn.net/download/shaoyahu/85266922
javascript ES6~11 新特性学习

ECMA 欧洲计算机制造商协会

ES6

**

1.let 变量声明以及声明特性

**

1.变量不能重复声明

        let a = 1
        let b = 2 //报错

2.块级作用域    (全局，函数，eval)

        {
            let a = 1
        }
        console.log(a)  //undefined

3.不存在变量提升

        console.log(a)  //报错
        let a = 1

4.不影响作用域链

        {
            let a = 1
            function fn(){
                console.log(a)
            }
            fn()    //1,从函数体找到外面
        }

2.const 声明变量以及特点

1.一定要赋初始值

        const a;    //报错

2.一般常量使用大写(潜规则)

        const A = 1;

3.常量的值不能修改

        const A = 1
        A = 2   //报错

4.块级作用域

        {
            const A = 1
        }
        console.log(A)  //报错

5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

        const TEAM = ['a','b']
        TEAM.push('c')  //正常执行
        const OBJ = {name:'shaoyahu'}
        OBJ.age = 18    //正常执行 

3.变量的解构赋值

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值
1.数组的解构 - 变量名可以不同

        const TEAM = ['a','b','c','d']
        let [aa,bb,cc,dd] = TEAM
        console.log(aa) //'a'
        console.log(bb) //'b'
        console.log(cc) //'c'
        console.log(dd) //'d'

2.对象的解构 - 变量名要求相同

        const OBJ = {
            name:'shaoyahu',
            age:18,
            read:function(){
                console.log('read something !')
            }
        }
        let {name,age,read} = OBJ
        console.log(name)  //'shaoyahu'
        console.log(age)   //18
        console.log(read)   //function(){console.log('read something !')}
        read()              //read something !

4.模板字符串

ES6 引入新的声明字符串的方式 ``
1.声明

        let a = `字符串一个`

2.内容中可以直接出现换行符(可以直接换行)

        let a = `<ul>
                    <li>1</li>
                    <li>2</li>
                </ul>`

3.变量拼接

        let name = 'shaoyahu'
        let age = 18
        let person = `我叫${name},今年${age}`
        console.log(person) //我叫shaoyahu，今年18

5.对象的简化写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
1.书写简洁

        let name = 'shaoyahu'
        let read = function(){
            console.log('do some reading !')
        }
        const PERSON = {
            name,
            read,
            run(){
                console.log('run now !')
            }
        }
        PERSON.name     // 'shaoyahu'
        PERSON.read()   // do some reading !
        PERSON.run()    // run now !

6.箭头函数以及声明特点

ES6 允许使用箭头(=>)定义函数
适合与 this 无关的回调，定时器，数组的方法回调
不适合与 this 有关的回调，事件回调，对象的方法
1.声明一个函数

        let fn = (a) => {
            return a
        }
        fn(2)

2.this是静态的，始终指向函数声明时所在作用域下的this的值

        function fn1(){
            console.log(this.name)
        }
        let fn2 = () => {
            console.log(this.name)
        }
        window.name = 'shaoyahu'
        const PERSON = {
            name:'邵雅虎'
        }
        //直接调用
        fn1()   // shaoyahu
        fn2()   // shaoyahu

        //call调用
        fn1.call(PERSON)  // 邵雅虎
        fn2.call(PERSON)  // shaoyahu

3.不能作为构造函数实例化对象

        let Person = (name, age) => {
            this.name = name
            this.age = age
        }
        let me = new Person('shaoyahu',18)
        console.log(me) // 报错:Person不是一个构造器

4.不能使用arguments变量

        let fn = () => {
            console.log(arguments)
        }
        fn(1)   // 报错:arguments未定义

5.箭头函数的简写
    1.省略小括号，当形参有且只有一个时

            let fn = a => {
                return a
            }

    2.省略花括号，当代码体只有一条语句时,此时return必须省略，而且语句的执行结果就是函数的返回值

            let fn = (a,b) => a + b

7.函数参数默认值设置

ES6 允许给函数参数赋值初始值
1.形参初始值 - 具有默认值的参数，一般位置要靠后(潜规则)

        let fn = (a, b, c = 3) => {
            return a + b + c
        }
        let result = fn(1,2)    // fn(1,2,3)
        console.log(result)     // 6

2.与解构赋值结合使用 - 无需考虑顺序，只需要属性名对上

        let fn = ({a, b, c = 3, d}) => {
            return a + b + c + d
        }
        fn({
            a:1,
            b:2,
            d:4
        })  // 10

8.rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
1.获取实参

        let fn = (...args) => {
            console.log(args)
        }
        fn('shaoyahu','邵雅虎') // ['shaoyahu','邵雅虎']

2.rest 参数必须要放到参数最后

        let fn = (a, b, ...args) => {
            console.log(a)
            console.log(b)
            console.log(args)
        }
        fn(1,2,3,4,5)   // [3,4,5]

9.扩展运算符

ES6 扩展运算符能将数组转换为逗号分隔的参数序列
1.分隔数组

        const nums = [1,2,3,4,5]
        let fn = (a, b, c) => {
            return a + b + c
        }
        fn(...nums) // 6 = 1 + 2 + 3

10.Symbol 的介绍和创建

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值，他是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型
1.特点
    1.Symbol 的值是唯一的，用来解决命名冲突的问题
    2.Symbol 值不能与其他数据进行运算
    3.Symbol 定义的对象属性不能使用 for...in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

•   // 数据类型总结
  

•   // USONB you are so niubility
  

•   // u undefined
  

•   // s string symbol
  

•   // o object
  

•   // n null number
  

•   // b boolean
  

  2.Symbol 内置值 -> Symbol的属性作为对象的属性来使用 (用到再学，机会不大)

11.迭代器 Iterator

Iterator是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据解构只要部署 Iterator 接口，就可以完成遍历操作
ES6 创造了一种新的遍历命令 for...of 循环，Iterator接口主要供 for...of 消费
原生具备 Iterator 接口的数据
    Array
    arguments
    Set
    Map
    String
    TypedArray
    NodeList
工作原理
    1.创建一个指针对象，指向当前数据结构的起始位置
    2.第一次调用对象的next方法，指针自动指向数据结构的第一个成员
    3.接下来不断调用next方法，指针一直向后移动，知道指向最后一个成员
    4.每调用next方法返回一个包含value和done属性的对象

12.生成器

ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

13.promise

ES6 引入的异步编程的新解决方案，语法上是一个构造函数
用来封装异步操作并可以获取其成功或失败的结果
const p = new Promise((resolve,reject)=>{})

14.Set

ES6 提供了新的数据结构 Set (集合)，它类似于数组，但是成员的值都是唯一的，集合实现了 iterator接口，所以可以使用扩展运算符和 for..of 进行遍历
集合的属性和方法
1.size      返回集合的元素个数
2.add       增加一个新元素，返回当前集合
3.delete    删除元素，返回boolean值
4.has       检测集合中是否包含某个元素，返回boolean值

15.Map

ES6 提供了 Map 数据结构，它类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值包括对象都可以当作键。 Map 也实现了iterator接口，所以可以使用扩展运算符和 for...of 进行遍历
Map的属性和方法
1.size      返回 Map 的元素个数
2.set       增加一个新元素，返回当前 Map 
3.get       返回键名对象的键值
4.has       检测 Map 中是否包含某个元素，返回boolean值
5.clear     清空集合 ，返回 undefined

16.class 类

ES6 提供了更接近传统语言的写法，引入了 Class 类这个概念，作为对象的模板。通过 class 关键字，可以定义类，基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已
知识点
1.class声明类
2.constructor定义构造函数初始化
3.extends继承父类
4.super调用父级构造方法
5.static定义静态方法和属性
6.父类方法可以重写

17.模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来
1.模块化的优势
    1.防止命名冲突
    2.代码复用
    3.高维护性
2.模块化规范产品 ES6 之前的模块化规范有
    1.CommonJS => NodeJS、Browserify
    2.AMD      => requireJS
    3.CMD      => seaJS
3.ES6 模块化语法
    模块功能主要由两个命令构成：export和import
    export命令用于规定模块的对外接口
    import命令用于输入其他模块提供的功能
    分别暴露、统一暴露、默认暴露

ES7

18.Array.prototype.includes

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

    const arr = ['A','B','C','D']
    arr.includes('A')   //true
    arr.includes('E')   //false

**19.指数操作符 ****

ES7 提供 ** 指数运算符，用来实现幂运算，功能与Math.pow结果相同

    2 ** 3 // 8
    Math.pow(2,3) // 8

ES8

20.async 函数

ES8 提供 async 函数
async函数返回值为promise对象且这个对象的结果由async函数执行的返回值决定
当返回值不是一个promise对象，那就返回成功的promise

21.await 表达式

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

22.对象方法扩展

ES8 提供新的对象方法
1.Object.values
    返回一个给定对象的所有可枚举属性 值 的数组

            const school={
                name:'一小',
                add:['浙江','温州']
            }
            Object.values(school)   // ['一小',['浙江','温州']]

2.Object.entries
    返回一个给定对象自身可遍历属性[key,value]的数组

            Object.entries(school)  // [['name','一小'],['add',['浙江','温州']]]

3.Object.getOwnPropertyDescriptors
    返回对象属性的描述对象

Object.getOwnPropertyDescriptors(school)    // name:{value:'一小',writable:true,enumerable:true,configurable:true}

ES9

23.扩展运算符

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

24.正则扩展-命名捕获分组

ES9 提供正则的命名捕获分组

25.正则扩展-反向断言

ES9 提供反向断言 (?<=)

26.正则扩展-dotAll模式

.*

ES10

27.对象方法扩展

ES10 提供新的对象方法
1.Object.fromEntries

        //二维数组
        const result = Object.fromEntries([
            ['name','邵雅虎'],
            ['age','18,20,22']
        ])
        //Map
        const m = new Map()
        m.set('name','邵雅虎')
        const result = Object.fromEntries(m)

28.字符串方法扩展

ES10 提供新的字符串方法
1.trimStart 
    清除字符串左侧空白
2.trimEnd
    清除字符串右侧空白

29.数组方法扩展

ES10 提供新的数组方法
1.flat
    将多维数组转化为低维数组

            const arr = [1,2,3,[4,5]]
            arr.flat()  // [1,2,3,4,5]
            const arr = [1,2,[3,4,[5,6]]]
            arr.flat()  // [1,2,3,4,[5,6]]
            // 参数为深度 是一个数字，默认值是1
            arr.flat(2) // [1,2,3,4,5,6]

2.flatMap

        const arr = [1,2,3,4]
        arr.map(item => [item * 10])    // [[10],[20],[30],[40]]
        arr.flatMap(item => [item * 10])    // [10,20,30,40]

30.Symbol扩展

ES10 提供新的Symbol方法
1.Symbol.prototype.description
    获取Symbol的字符串描述

            let s = new Symbol('邵雅虎')
            s.description   // 邵雅虎

ES11

31.私有属性

ES11 新增私有属性

        class Person{
            //共有属性
            name
            //私有属性
            #age
            #hobby
            //构造方法
            constructor(name,age,hobby){
                this.name = name
                this.#age = age
                this.#hobby = hobby
            }
            intro(){
                console.log(this.name)
                console.log(this.#age)
                console.log(this.#hobby)
            }
        }
        //实例化
        const p = new Person('邵雅虎',18,'read')
        console.log(p.name) // 邵雅虎
        console.log(p.#age) // 报错获取不到
        p.intro()   // 邵雅虎 18 read

32.Promise.allSettled

ES11 新增方法

        const p1 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('数据1')
            },1000)
        })
        const p2 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('数据2')
            },1000)
        })
        //调用 allSettled 方法
        Promise.allSettled([p1,p2]) // 总是为成功，返回的数组中的结果由p1,p2决定
        //调用 all 方法
        Promise.all([p1,p2])    // 都成功为成功，有失败为失败

33.字符串方法扩展

ES11 提供新的字符串方法
1.String.prototype.matchAll
    用来得到正则批量匹配的结果

34.可选链操作符

ES11 新增可选链操作符 ?.
省略层层判断的操作

35.动态import => 按需加载、懒加载

可以动态引入 import
    静态引入 一开始就加载进来

            import * as m from './练习使用附件/29模块化js文件.js'

    动态引入 使用时才加载进来

            import('./练习使用附件/29模块化js文件.js').then(module=>{
                module.teach()
            })

36.BigInt类型

ES11 提供新的数据类型大整形 BigInt
1.声明 在正常的定义整形的末尾加个n

        let n = 123n

2.将普通整数转为大整形 浮点型会报错，只能使用整数

        let n = 123
        BigInt(n)   // 123n

3.大数值运算

        let max = Number.MAX_SAFE_INTEGER
        max+1 == max+2  //true
        BigInt(max) + 1n == BigInt(max) + 2n //false

37.绝对全局对象 globalThis

ES11 新增globalThis全局绝对对象，始终指向全局对象