总结一下 ES6到ES11 出现的新东西吧

1、let

let 关键字 不可重复声明一个变量名称； let 的作用域为块级作用域； let 没有变量提升；let不影响作用域链效果；

let a =123; 

2、const

const 一般值为大写英文字母 块级作用域 一定要附初始值 常量值不可以修改；对于数组和对象元素修改不算常量不报错；

const b = 456;

3、解构赋值 以数组为例

const F4 = ['小沈阳', '刘能', '宋小宝', '赵四'];
let [xiao, liu, song, zhao] = F4;

4、 模板字符串 字符串可以换行

let str = `字符串${obj}`;

5、简化对象

let name = 123；
const obj = {
    name,
}

6、箭头函数

this是静态的 始终指向当前声明所在的作用域； 不能作为构造函数实例化对象，也就是不能和new一起使用； 不能使用arguments变量；

let fun = a => console.log(1234);

7、rest参数

获取函数实参；代替argument, rest参数必须放在参数最后；

            function rest(a, b, ...args) {
                console.log(args);
            }

8、扩展运算符

... 将数组转为逗号分隔的参数序列；数组合并 , 数组克隆(浅拷贝) 将伪数组转为真数组；

            const tfboys = [1, 2, 3];
            const kuaizi = [1, 2, 3];
            const 合并 = [...tfboys, ...kuaizi];
            const 克隆 = [...kuaizi];

9、symbol

值是唯一的，不能进行运算，定义对象属性不能使用 for in 但是可以使用Reflect.ownKeys来获取对象的所有键名；

            let s1 = new Symbol('test');
            let s2 = Symbol('test');
            let s3 = Symbol.for('fun');
            let s4 = Symbol.for('fun'); //注意这里 s1不等于s2  但是 s3等于s4；
            let game = {
                up: 123,
                down: 456
            };
            let methods = {
                up: Symbol('up'),
                down: Symbol('down')
            }
            game[methods.up] = function() {
                console.log('hello up')
            };
            game[methods.down] = function() {
                console.log('hello down')
            }; //当不确定对象中有哪些方法时；可以使用此方式安全添加;
            let youxi = { //给对象添加一个唯一的key
                name: 'youxi',
                [Symbol("fun1")]: function() {},
            }
            //获取symbol的字符串描述
            console.log(s2.description)//test

10、迭代器

iterator 是一种接口；(可用for of 遍历)循环时先创建一个指针对象指向数据结构起始位置 然后调用next方法指向数据结构的每一个成员，返回value和done；

const xiyou = ['孙悟空'，
                '猪八戒'
            ];
            let iterator = xiyou[Symbol.iterator]();

            console.log(iterator.next()); //{value:'孙悟空',done:false};

            for (let name of xiyou) {
                console.log(name); //孙悟空，猪八戒；
            }
            let arr = { //自定义 for of 循环
                child: [1, 2, 3],
                name: 'parent',
                [Symbol.iterator]() {
                    //索引变量
                    let index = 0;
                    let that = this;
                    return {
                        next: function() {
                            let result = {};
                            if (index < that.child.length) {
                                result = {
                                    value: this.child[index],
                                    done: false
                                };
                                index++;
                                return result;
                            } else {
                                result = {
                                    value: undefined,
                                    done: true
                                };
                                return result;
                            }

                        }
                    }
                }
            }
            for (let name of arr) {
                console.log(name); //1，2,3

            }

11、生成器

其实就是一个特殊的函数，用来进行异步编程的新解决方案；

            function * gen() {
                console.log('hello');
            }

            let iterator = gen();

            iterator.next(); //hello

            function * gen2() {
                console.log(1);
                yield '一个'; //理解为函数代码的分隔符；
                console.log(2);
                yield '两个';
                console.log(3);
                yield '三个';
            }
            for (let v of gen2()) { //此处结合迭代器一起理解
                console.log(v); //一个，两个，三个
            }

            function * gen3(arg) { //生成器传参
                console.log(arg); //A
                let one = yield 1; // B
                let two = yield 2; //C
            }

            let iterator3 = gen3('A');
            iterator3.next(); //传递A；
            iterator3.next('B');
            iterator3.next('C');

            //异步编程 避免出现回调地狱
            function one() {
                setTimeout(() => {
                    console.log(1);
                    iterator4.next();
                }, 1000);
            }

            function two() {
                setTimeout(() => {
                    console.log(2);
                    iterator4.next();
                }, 2000);
            }

            function three() {
                setTimeout(() => {
                    console.log(3);
                }, 3000);
            }

            function * gen4() {
                yield one();
                yield two();
                yield three();
            }
            let iterator4 = gen4();
            iterator4.next();

12、Promise

异步编程新解决方案 一个构造函数 封装异步操作获取成功或失败的结果 有三种状态 初始化 成功 失败；

            const p = new Promise(function(resolve, reject) {
                resolve(123); //成功
                reject(456); //失败
            })
            p.then(value => {
                console.log(value); //123
            });
            p.catch(err => {
                console.log(err); //456
            });


           //Promise.allSettled 批量执行promise 整体永远为成功状态；
           
           console.log(Promise.allSettled(['promise对象','promise对象']))

           Promise.all(['promise对象','promise对象'])  //全成功整体才会成功

13、set 集合

            let s = new Set();
            let s2 = new Set([1, 2, 3, 1, 2, 3]); //会自动去重；

            size //元素个数；
            add // 添加元素;
            delete //删除元素；
            has //判断是否存在这个元素
            clear //清空集合
            // 可使用 for of遍历set集合

            用处： 数组去重 求交集 求并集 求差集;

            let arr1 = [1, 2, 3], //交集
                arr2 = [2, 3, 4];
            let result = [...new Set(arr1)].filter(item => new Set(arr2).has(item));
            let union = [...new Set([...arr1, ...arr2])]; //并集
            let diff = [...new Set(arr1)].filter(item => !(new Set(arr2).has(item))); //差集

14、map

类似对象 键值对集合 但是建不限于字符串；

            let m = new Map();

            m.set(Key, value); //添加

            m.size //

            m.delete(key); //删除

            m.get(key); //取值

            m.clear(); //清空

            // 可使用 for of遍历set集合

15、class 类 对象模板

            class Phone {
                //构造方法 new 之后自动执行
                constructor(brand, price) {
                    this.brand = brand;
                    this.price = price;
                }

                //静态属性 只属于Phone自己 不属于实例对象
                static name = '手机';

                call() {
                    console.log('我是手机');
                }
            }
            //继承
            class child extends Phone {
                constructor(brand, price, size) {
                    super(brand, price); //相当于调用父类构造方法
                    this.size = size;
                }
                call() { //重写父类方法（不继承父类使用自己的同名函数）
                    console.log('我是新手机');
                }
            }

            //类的 get 和 set;
            class newPhone {
                get price() {
                    console.log('价格被读取了');
                }
                set price(newVal) {
                    console.log('价格被修改了');
                }
            }
            let huawei = new Phone('华为', 10000);
            let xiaomi = new newPhone();


            //公有属性&&私有属性
            class Person{
                //公有属性 类内类外都能拿到
                name
                //私有属性 只能在类内使用 外部拿不到
                #age
                
                constructor(name,age){
                    
                    this.name = name;
                    this.#age = age;
                    
                }
                
            }

16、Number的扩展

            Number.EPSILON //js表示的最小精度
            二进制 && 八进制
            Number.isFinite() //判断一个数值是否为有限数字
            Number.isNaN() //判断数值是否为nan
            Number.parseInt() Number.parseFloat() //放在了number下 取整数 包含小数
            Number.isInteger() //判断是否为整数
            Math.trunc() //将数字小数部分抹除
            Math.sign() //判断一个数到底为正数负数还是0   返回 1 0 -1

17、对象方法扩展

            Object.is() //判断两个对象是否相等
            Object.assign() //对象合并
            Object.setPrototypeOf() Object.getPrototypeOf() //设置&&获取原型对象
            Object.values() //返回一个给定对象的所有可枚举属性值的数组
            Object.entries() //返回一个给定对象自身可遍历属性[key,value]的数组
            Object.getOwnPropertyDescriptor() //返回指定对象所有的自身属性的描述对象
            Object.fromEntries([
                [name:小明],
                [age:18]
            ]) //二维数组转为对象 还可将map转为普通对象 和entries相反

18、es6模块化

防止命名冲突 代码复用 高维护性 export import

           export let a = 123 ;
            
            <script type = 'module'>
               import * as obj from 'url';
               console.log(obj);
            </script>
            
             export{ 
                //批量导出
             }
            export default{
                //默认导出
            }

19、includes

检测数组中是否包含某个元素 返回布尔值；

const arr = [1,2,3,4];      
arr.includes(1)//true;

20、 指数操作符 「**」

用来实现幂运算 功能和 math.pow结果相同

  2**10 //2的十次方 1024

21. async await

           // async函数返回结果为promise
              
              async function fun(){
                  return 123;
              }
              const result = fun();
              result.then(res=>{
                   console.log(res);
              })

 //await 必须写在 asyuc 函数中  右侧一般为promise对象  返回的peomise成功的值  如果失败了 使用 try catch 捕获
        //async await 结合使用可以让异步代码像同步一样执行       
               async function fun2(){
                   try{
                       let result1 =  await new Promise();
                       let result2 =  await new Promise(); //此处代码将同步执行
                       
                   }catch (e){
                       console.log(e);
                   }
               }

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

               function fun({color,...info}){
                   // info 为 {type:1,size:2}
               }
               fun({color:'red',type:1,size:2});
               
               
               const obj = {
                   q:1,
                   w:2,
               }
               // ...obj =>  'q:1,w:2'
                const obj1 = {
                    e:3
                } 
                const obj2 = {
                    r:4
                }
                
                const obj3 ={
                    ...obj1,...obj2
                } //可以做对象合并

23、正则部分

                命名捕获分组 ：
                   let str = `<a href='https://www.baidu.com'>百度</a>`;
                   // 提取url 和 test
                   const reg = /<a href='(?<url>.*)'>(?<text>.*)<\/a>/;
                   const result = reg.exec(str); //result.groups.url || result.groups.text；
                
                反向断言：
                   let str =`12345中国地大物博666啦啦啦`;
                   
                   const reg = /\d+(?=啦)/; //正向断言 根据后面内容判断
                   
                   const result = reg.exec(str); //666
                 
                   const reg = /(?<=博)\d+/; //反向断言
                   
                   
                 dotAll模式：
                   // dot . 元字符 除换行符以外的任意单个字符；
                   //dotAll 可以匹配任意字符，包括换行符；
                   let str = `
                       <ul>
                          <li>
                             <a>百度</a>
                             <p>搜狗</p>
                          </li>
                       </ul>
                   `
                     const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
                     let result;
                     while(result = reg.exec(str)){
                         console.log(result)
                     }

24、 字符串方法扩展

trimStart trimEnd 清除左侧右侧空白
matchAll(正则)； 根据正则返回数据

25、数组方法扩展

flat() 将多维数组转化低位数组 参数为深度是一个数字
flatMap() 将map和flat结合 既能遍历又降维

26、可选链操作符 ?.

obj?.name //当obj存在的时候去获取name

27、动态import

                btn.onclick=function(){
                    import('./1.js').then(module=>{
                        //可调用1.js中的方法
                    })
                }               

28、bigint 类型 大整形 用于大数值运算 不能直接和普通number进行运算

              let n = 521n; 
              
              let n1 = 123 ;
              
              console.log(BigInt(n1))//123n
              

29、绝对全局对象 globalThis

我们在写代码时想对全局对象进行操作，可以忽略任何限制直接使用globalThis