1傍菇、let

let 關(guān)鍵字 不可重復(fù)聲明一個(gè)變量名稱(chēng)将鸵； let 的作用域?yàn)閴K級(jí)作用域丸升； let 沒(méi)有變量提升铆农；let不影響作用域鏈效果；

let a =123; 

2狡耻、const

const 一般值為大寫(xiě)英文字母 塊級(jí)作用域 一定要附初始值 常量值不可以修改墩剖；對(duì)于數(shù)組和對(duì)象元素修改不算常量不報(bào)錯(cuò)；

const b = 456;

3夷狰、解構(gòu)賦值 以數(shù)組為例

const F4 = ['小沈陽(yáng)', '劉能', '宋小寶', '趙四'];
let [xiao, liu, song, zhao] = F4;

4岭皂、 模板字符串 字符串可以換行

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

5、簡(jiǎn)化對(duì)象

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

6爷绘、箭頭函數(shù)

this是靜態(tài)的 始終指向當(dāng)前聲明所在的作用域； 不能作為構(gòu)造函數(shù)實(shí)例化對(duì)象进倍，也就是不能和new一起使用土至； 不能使用arguments變量；

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

7猾昆、rest參數(shù)

獲取函數(shù)實(shí)參陶因；代替argument, rest參數(shù)必須放在參數(shù)最后；

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

8垂蜗、擴(kuò)展運(yùn)算符

... 將數(shù)組轉(zhuǎn)為逗號(hào)分隔的參數(shù)序列楷扬；數(shù)組合并 , 數(shù)組克隆(淺拷貝) 將偽數(shù)組轉(zhuǎn)為真數(shù)組解幽；

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

9、symbol

值是唯一的毅否，不能進(jìn)行運(yùn)算，定義對(duì)象屬性不能使用 for in 但是可以使用Reflect.ownKeys來(lái)獲取對(duì)象的所有鍵名蝇刀；

            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')
            }; //當(dāng)不確定對(duì)象中有哪些方法時(shí)；可以使用此方式安全添加;
            let youxi = { //給對(duì)象添加一個(gè)唯一的key
                name: 'youxi',
                [Symbol("fun1")]: function() {},
            }
            //獲取symbol的字符串描述
            console.log(s2.description)//test

10吞琐、迭代器

iterator 是一種接口捆探；(可用for of 遍歷)循環(huán)時(shí)先創(chuàng)建一個(gè)指針對(duì)象指向數(shù)據(jù)結(jié)構(gòu)起始位置 然后調(diào)用next方法指向數(shù)據(jù)結(jié)構(gòu)的每一個(gè)成員，返回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 循環(huán)
                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、生成器

其實(shí)就是一個(gè)特殊的函數(shù)切诀，用來(lái)進(jìn)行異步編程的新解決方案揩环；

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

            let iterator = gen();

            iterator.next(); //hello

            function * gen2() {
                console.log(1);
                yield '一個(gè)'; //理解為函數(shù)代碼的分隔符；
                console.log(2);
                yield '兩個(gè)';
                console.log(3);
                yield '三個(gè)';
            }
            for (let v of gen2()) { //此處結(jié)合迭代器一起理解
                console.log(v); //一個(gè)幅虑，兩個(gè)丰滑，三個(gè)
            }

            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');

            //異步編程 避免出現(xiàn)回調(diào)地獄
            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

異步編程新解決方案 一個(gè)構(gòu)造函數(shù) 封裝異步操作獲取成功或失敗的結(jié)果 有三種狀態(tài) 初始化 成功 失敯；

            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 批量執(zhí)行promise 整體永遠(yuǎn)為成功狀態(tài)擎宝；
           
           console.log(Promise.allSettled(['promise對(duì)象','promise對(duì)象']))

           Promise.all(['promise對(duì)象','promise對(duì)象'])  //全成功整體才會(huì)成功

13郁妈、set 集合

            let s = new Set();
            let s2 = new Set([1, 2, 3, 1, 2, 3]); //會(huì)自動(dòng)去重；

            size //元素個(gè)數(shù)绍申；
            add // 添加元素;
            delete //刪除元素圃庭；
            has //判斷是否存在這個(gè)元素
            clear //清空集合
            // 可使用 for of遍歷set集合

            用處： 數(shù)組去重 求交集 求并集 求差集;

            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

類(lèi)似對(duì)象 鍵值對(duì)集合 但是建不限于字符串失晴；

            let m = new Map();

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

            m.size //

            m.delete(key); //刪除

            m.get(key); //取值

            m.clear(); //清空

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

15剧腻、class 類(lèi) 對(duì)象模板

            class Phone {
                //構(gòu)造方法 new 之后自動(dòng)執(zhí)行
                constructor(brand, price) {
                    this.brand = brand;
                    this.price = price;
                }

                //靜態(tài)屬性 只屬于Phone自己 不屬于實(shí)例對(duì)象
                static name = '手機(jī)';

                call() {
                    console.log('我是手機(jī)');
                }
            }
            //繼承
            class child extends Phone {
                constructor(brand, price, size) {
                    super(brand, price); //相當(dāng)于調(diào)用父類(lèi)構(gòu)造方法
                    this.size = size;
                }
                call() { //重寫(xiě)父類(lèi)方法（不繼承父類(lèi)使用自己的同名函數(shù)）
                    console.log('我是新手機(jī)');
                }
            }

            //類(lèi)的 get 和 set;
            class newPhone {
                get price() {
                    console.log('價(jià)格被讀取了');
                }
                set price(newVal) {
                    console.log('價(jià)格被修改了');
                }
            }
            let huawei = new Phone('華為', 10000);
            let xiaomi = new newPhone();


            //公有屬性&&私有屬性
            class Person{
                //公有屬性 類(lèi)內(nèi)類(lèi)外都能拿到
                name
                //私有屬性 只能在類(lèi)內(nèi)使用 外部拿不到
                #age
                
                constructor(name,age){
                    
                    this.name = name;
                    this.#age = age;
                    
                }
                
            }

16、Number的擴(kuò)展

            Number.EPSILON //js表示的最小精度
            二進(jìn)制 && 八進(jìn)制
            Number.isFinite() //判斷一個(gè)數(shù)值是否為有限數(shù)字
            Number.isNaN() //判斷數(shù)值是否為nan
            Number.parseInt() Number.parseFloat() //放在了number下 取整數(shù) 包含小數(shù)
            Number.isInteger() //判斷是否為整數(shù)
            Math.trunc() //將數(shù)字小數(shù)部分抹除
            Math.sign() //判斷一個(gè)數(shù)到底為正數(shù)負(fù)數(shù)還是0   返回 1 0 -1

17涂屁、對(duì)象方法擴(kuò)展

            Object.is() //判斷兩個(gè)對(duì)象是否相等
            Object.assign() //對(duì)象合并
            Object.setPrototypeOf() Object.getPrototypeOf() //設(shè)置&&獲取原型對(duì)象
            Object.values() //返回一個(gè)給定對(duì)象的所有可枚舉屬性值的數(shù)組
            Object.entries() //返回一個(gè)給定對(duì)象自身可遍歷屬性[key,value]的數(shù)組
            Object.getOwnPropertyDescriptor() //返回指定對(duì)象所有的自身屬性的描述對(duì)象
            Object.fromEntries([
                [name:小明],
                [age:18]
            ]) //二維數(shù)組轉(zhuǎn)為對(duì)象 還可將map轉(zhuǎn)為普通對(duì)象 和entries相反

18书在、es6模塊化

防止命名沖突 代碼復(fù)用 高維護(hù)性 export import

           export let a = 123 ;
            
            <script type = 'module'>
               import * as obj from 'url';
               console.log(obj);
            </script>
            
             export{ 
                //批量導(dǎo)出
             }
            export default{
                //默認(rèn)導(dǎo)出
            }

19、includes

檢測(cè)數(shù)組中是否包含某個(gè)元素 返回布爾值拆又；

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

20儒旬、 指數(shù)操作符 「**」

用來(lái)實(shí)現(xiàn)冪運(yùn)算 功能和 math.pow結(jié)果相同

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

21. async await

           // async函數(shù)返回結(jié)果為promise
              
              async function fun(){
                  return 123;
              }
              const result = fun();
              result.then(res=>{
                   console.log(res);
              })

 //await 必須寫(xiě)在 asyuc 函數(shù)中  右側(cè)一般為promise對(duì)象  返回的peomise成功的值  如果失敗了 使用 try catch 捕獲
        //async await 結(jié)合使用可以讓異步代碼像同步一樣執(zhí)行       
               async function fun2(){
                   try{
                       let result1 =  await new Promise();
                       let result2 =  await new Promise(); //此處代碼將同步執(zhí)行
                       
                   }catch (e){
                       console.log(e);
                   }
               }

22栏账、在es9 中為對(duì)象提供了像數(shù)組一樣的 rest參數(shù)和擴(kuò)展運(yùn)算符

               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
                } //可以做對(duì)象合并

23、正則部分

                命名捕獲分組 ：
                   let str = `<a >百度</a>`;
                   // 提取url 和 test
                   const reg = /<a href='(?<url>.*)'>(?<text>.*)<\/a>/;
                   const result = reg.exec(str); //result.groups.url || result.groups.text栈源；
                
                反向斷言：
                   let str =`12345中國(guó)地大物博666啦啦啦`;
                   
                   const reg = /\d+(?=啦)/; //正向斷言 根據(jù)后面內(nèi)容判斷
                   
                   const result = reg.exec(str); //666
                 
                   const reg = /(?<=博)\d+/; //反向斷言
                   
                   
                 dotAll模式：
                   // dot . 元字符 除換行符以外的任意單個(gè)字符挡爵；
                   //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茶鹃、 字符串方法擴(kuò)展

trimStart trimEnd 清除左側(cè)右側(cè)空白
matchAll(正則)； 根據(jù)正則返回?cái)?shù)據(jù)

25艰亮、數(shù)組方法擴(kuò)展

flat() 將多維數(shù)組轉(zhuǎn)化低位數(shù)組 參數(shù)為深度是一個(gè)數(shù)字
flatMap() 將map和flat結(jié)合 既能遍歷又降維

26闭翩、可選鏈操作符 ?.

obj?.name //當(dāng)obj存在的時(shí)候去獲取name

27、動(dòng)態(tài)import

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

28迄埃、bigint 類(lèi)型 大整形 用于大數(shù)值運(yùn)算 不能直接和普通number進(jìn)行運(yùn)算

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

29疗韵、絕對(duì)全局對(duì)象 globalThis

我們?cè)趯?xiě)代碼時(shí)想對(duì)全局對(duì)象進(jìn)行操作，可以忽略任何限制直接使用globalThis