學(xué)習(xí)計劃

• ES6
• Node.js
• VUE.JS
• Uni-App

學(xué)習(xí)日志之ES6(完結(jié))

2020/12/27一2021/1/19
用時24天

• 2020/12/27 es6 P27-P29

• Promise

  const P = new Promise((resolve,reject)=>{
    settimeout(()=>{
      resolve('用戶數(shù)據(jù)');//成功
      //reject('程序出錯');//錯誤
    },1000);
  });
  //調(diào)用then()方法
  //then()包含兩個方法參數(shù){1.當成功(resolve)時運行value方法2.當失敗(reject)時運行reason方法}且賦值
  P.then(value=>{
    console.log(value);
  },reason=>{
    console.error(reason);
  });
  //調(diào)用catch()方法
  //catch()與then()類似冤寿，但then()包含成功(value)和失敗(reason)兩個參數(shù)，而cantch()只有失敗參數(shù)(reason)
  P.catch(reason=>{
    console.error(reason);
  });
  

• 2020/12/29 es6 P30-P31

• Set

• //Set基本語法及屬性
  //去重性
  const a = new Set(['張三','李四','王五','張三']);//'張三','李四','王五'
  const b = new Set(['111','222']);
  
  //向集合中添加一個對象
  a.add('張飛');//'張三','李四','王五','張飛'
  
  //向集合中刪除一個對象
  a.delete('張三');//'李四','王五','張飛'
  
  //查看集合中是否包含一個對象
  a.has('李四');//true
  a.has('李逵');//false
  
  //清除一個集合
  a.clear();
  
  //遍歷一個集合
  for(let v of b){
    console.log(v);
    //111
    //222
  }
  

• //Set集合實踐
  //設(shè)置兩組數(shù)組
  let a = [1,2,3,5,6,6];
  let b = [2,3,4,5,7];
  //a數(shù)組去重
  const result = new Set(a);//1,2,3,5,6
  
  //a與b交集
  const result2 = [...new Set(a)].filter(item => {
    let b2 = new Set(b);
    if(b2.has(item))return true;
    else return false;
  });
  console.log(result);//2,3,5
  //簡寫語法
  const r2 = [...new Set(a)].filter(item => new Set(b).has(item));//2重慢，3沃饶，5
  
  //a與b并集
  const result3 = [...new Set(...a,...b)];//1,2,3,4,5,6,7
  
  //a與b差集
  const r2 = [...new Set(a)].filter(item => !(new Set(b).has(item)));//1,4,6,7
  

• 2020/12/31 es6 P32-P34

• Map

• //Map的基本語法及使用
  //聲明一個Map
  let m = new Map();
  
  //給Map m添加一個普通類型的元素
  m.set('name','kjkjkl');//第一個參數(shù)為鍵值key,第二個參數(shù)為值value
  //給Map m 添加一個對象鍵值類型的元素,值為方法
  let n = {
    sex:'男'
  }
  m.set(n,function(){
    console.log('我是一個方法');
  });
  //刪除Map中的一個元素
  m.delete('name');
  //獲取Map中的一個鍵的值
  m.get(n);//f();
  //聲明一個變量用作存儲Map中n鍵值的方法
  let f = m.get(n);
  f();
  

• Class

• //聲明一個Class
  class Phone{
    //constructor方法(每個類中有且只有一個constructor方法,該方法采用固定名稱)即:構(gòu)造函數(shù)方法
      constructor(brand,price){
        this.brand = brand;
        this.price = price;
      }
      //聲明一個功能方法
      vivo(){
        console.log('我是一部vivo手機');
      }
      iphoneX(){
        console.log('我是一部iphoneX,我比vivo手機貴');
      }
  }
  //vivo手機初始化
  let vivo = new Phone('vivo',1999);
  vivo.vivo();//我是一部vivo手機
  
  //蘋果X初始化
  let iphonex = new Phone('iphoneX',9999);
  iphonex.iphoneX();//我是一部iphoneX,我比vivo手機貴
  

• //class靜態(tài)成員
  //聲明一個class
  class Phone{
    //聲明靜態(tài)變量name
    static name = 'kjkjkl';
    //生命靜態(tài)方法f()
    static f(){
      console.log('test test test');
    }
  }
  //初始化類
  let p = new Phone();
  console.log(Phone.name);//kjkjkl
  console.log(p.name);//undefined
  Phone.f();//test test test
  p.f();//直接報錯
  //結(jié)論:靜態(tài)化變量，方法，對象無法被賦值給初始化的對象直接讀取
  

• 2021/1/1 es6 p35-p38

• //class之類的繼承
  //聲明一個父類Phone
  class Phone{
    constructor(brand,price){
      this.brand = brand;
      this.price = price;
    }
    call(){
      console.log('我可以打電話');
    }
  }
  //聲明一個子類SmartPhone
  //固定寫法extends
  class SmartPhone extends Phone{
    constructor(brand,price,color,size){
      //繼承 固定寫法super
      super(brand,price);
      this.color = color;
      this.size = size;
    }
    //生成成員函數(shù)
    Photo(){
      console.log('我可以照相');
    }
    PlayGame(){
      console.log('我可以打游戲');
    }
    //繼承/重寫成員函數(shù)call()
    call(){
      console.log('我可以打視頻電話');
    }
  }
  //實例化對象
  let p = new SmartPhone('vivo',1200,'black',6.3);
  p.Photo();//我可以照相
  p.PlayGame();//我可與打游戲
  p.call();//我可以打視頻電話
  console.log(p);//SmartPhone{vivo,1200,black,6.3}Photo:f();PlayGame:f();/Phone:call():f()
  

• //class中g(shù)etter和setter設(shè)置
  //聲明一個類Phone
  class Phone{
    //設(shè)置price的get
    get price(){
      console.log('價格屬性被讀取了');
      return '返回結(jié)果';
    }
    //設(shè)置price的set
    //set中至少要有一個參數(shù)
    set price(newVal){
      console.log('價格參數(shù)被修改了');
    }
    //實例化對象
    let s = new Phone();
    s.price = 'free';//價格參數(shù)被修改了
    console.log(s.price);//1.價格參數(shù)被讀取了2.返回結(jié)果
  }
  //結(jié)論:使用場景{get:處理動態(tài)數(shù)據(jù)}{set:多種條件處理}
  

• 2021/1/2 es6 p39-p40

• //數(shù)值擴展
  //1.Javascript的最小精度 Number.EPSILON
  console.log(0.1 + 0.2);//0.3000000000004 非0.3
  function eq(a,b){
    if(Math.abs(a + b) < Number.EPSILON){
      return true;
    }else{
      return false;
    }
  }
  console.log(eq(0.1 + 0.2,0.3));//true
  
  //2.二進制和八進制
  console.log(0b1010);//10
  console.log(0o777);//511
  console.log(100);//100
  console.log(0xff);//255
  
  //3.檢測一個數(shù)是否為有限數(shù) Number.isFinite
  console.log(Number.isFinite(100));//true
  console.log(Number.isFinite(0));//true
  console.log(Number.isFinite(Infinity));//false
  
  //4.檢測一個數(shù)值是否為NaN Number.isNaN
  console.log(Number.isNaN(123));//false
  console.log(Number.isNaN(123/'test'));//true
  
  //5.字符串轉(zhuǎn)整數(shù)筹煮，字符串轉(zhuǎn)浮點數(shù) Number.ParseInt||Number.parseFloat
  console.log(Number.ParseInt('123abc'));//123
  console.log(Number.ParseFloat('1.23a'));//1.23
  
  //6.判斷一個數(shù)是否為整數(shù) Number.isInteger
  console.log(Number.isInteger(10));//true
  console.log(Number.isInteger(10.2));//false
  
  //7.將數(shù)字的小數(shù)部分抹掉 Math.trunc
  console.log(Math.trunc(10.2));//10
  
  //8.判斷一個數(shù)字為正數(shù) 負數(shù) 還是0 Math.sign
  console.log(Math.sign(100),Math.sign(-100),Math.sign(0));//1 -1 0
  

• //對象方法擴展
  //1.判斷兩個值是否完全相等 Object.is
  console.log(Object.is(1,1));//true;
  console.log(Object.is(1,0));//false;
  console.log(Object.is(NaN,NaN));//true;
  console.log(NaN === NaN);//false
  
  //2.對象的合并 Object.assign
  let Config1 = {
    host:'127.0.0.1',
    port:8080,
    uid:'kjkjkl',
    pwd:'123456',
    add:'test'
  }
  let Config2 = {
    host:'localhost',
    port:80,
    uid:'lmf',
    pwd:'123'
  }
  Object.assign(Config1,Config2);//第一個對象屬性會被第二個對象屬性覆蓋
  console.log(Config1);//{host:'localhost',port:80,uid:'lmf',pwd:'123',add:'test'}
  
  //3.設(shè)置原型對象 setPrototypeOf
  let s1 = {
    name:'kjkjkl'
  }
  let s2 = {
    game:['CF','LOL','MC']
  }
  Object.setPrototypeOf(s1,s2);
  console.log(s);//{name:'kjkjkl',_proto_:Object(play:['CF','LOL','MC'])}
  
  //獲取原型對象 getPrototypeOf
  //截取上面例子
  console.log(getPrototypeOf(s));//play:['CF','LOL','MC'],_proto_:Object
  

• 2021/1/4 es6 模塊化

• 導(dǎo)出模塊 export

• //分別暴露
  export let name = 'm1';
  export function test(){
    console.log('這里是m1，分別暴露');
  }
  

• //統(tǒng)一暴露
  let name = 'm2';
  function test(){
    console.log('這里是m2,統(tǒng)一暴露')居夹；
  }
  export {
    name,
    test
  }
  

• //默認暴露
  export default {
    name: 'm3',
    test: function(){
      console.log('這里是m3败潦，默認暴露');
    }
  }
  

• 導(dǎo)入模塊 import

• //通用導(dǎo)入方法
  import * as m1 from './這里填寫模塊文件路徑/m1.js';
  import * as m2 from './這里填寫模塊文件路徑/m2.js';
  import * as m3 from './這里填寫模塊文件路徑/m3.js';
  m1.test();//這里是m1,分別暴露
  m2.test();//這里是m2,統(tǒng)一暴露
  m3.default.test();//這里是m3,默認暴露 默認暴露的固定寫法本冲，方法或變量前加default
  

• //解構(gòu)賦值形式
  import {name as m1_name,test as m1_test} from './這里填寫模塊文件路徑/m1.js';
  import {name as m1_name,test as m1_test} from './這里填寫模塊文件路徑/m2.js';
  import {default as m3} from './這里填寫模塊文件路徑/m3.js';
  m1_test();//這里是m1,分別暴露
  m2_test();//這里是m2，統(tǒng)一暴露
  m3.test();//這里是m3,默認暴露
  //注意:解構(gòu)賦值形式導(dǎo)入默認暴露固定寫法default后必須加as 別名
  

• //簡便導(dǎo)入方式 --- 只針對于默認暴露
  import m3 from './這里填寫模塊文件路徑/m3.js';
  m3.test();//這里是m3,默認暴露
  

以上方式用于在html文件內(nèi)導(dǎo)入 <script>必須有type="module"屬性

在js文件內(nèi)導(dǎo)入方式如下↓

index.html使用m1.js的test方法

//m1.js
export default {
  name: 'm1';
  test: function(){
    console.log('test');
  }
}

//app.js
import m1 from './路徑/m1.js';
m1.test();

<!--index.html-->
<html>
  <head>
    <title>ES6模塊化</title>
  </head>
  <body>
    <!--test-->
    <script scr='./路徑/app.js' type="module"></script>
  </body>
</html>

• 2021/1/6 es7 featrue

• //includes 查看一個數(shù)組中是否包含一個元素 包含返回true,不包含返回false
  //includes與indexOf相同作用变屁，返回值不一樣 indexOf包含返回0,不包含返回-1
  const sdmz = ['西游記','水滸傳','三國演義','紅樓夢'];
  //includes
  console.log(sdmz.includes('西游記'));//true
  console.log(sdmz.includes('道德經(jīng)'));//false
  
  //indexOf
  console.log(sdmz.indexOf('西游記'));//0
  console.log(sdmz.indexOf('道德經(jīng)'));//-1
  
  //冪運算
  //正常情況下
  console.log(Math.pow(2, 10));//1024 表示2的10次方
  //ES7
  console.log(2 ** 10);//1024
  

• 2021/1/9 es8 async和await

• async

• //async函數(shù)一般情況下用來返回Promise的值
  //生成async類型的函數(shù)Main()
  const Main = async()=>{
    return new Promise((resolve,reject)=>{
      resolve('Success!');
      reject('Error~');
    });
  }
  
  const result = Main();
  
  result.then(value=>{
    console.log(value);
  },reason=>{
    console.error(reason);
  });
  
  Main();
  //控制臺:Success!
  

• await

• //await一般包含在async函數(shù)里
  //await返回的是Promise成功的值
  const P = new Promise((resolve,reject)=>{
    resolve('Success');
    reject('Error');
  });
  
  const Main = async()=>{
    try{
      const result = await P;
      console.log(result);
    }catch(e){
      console.error(e);
    }
  }
  Main();
  //控制臺:Success
  

• 2021/1/10 es8 async和await結(jié)合使用案例

• #### 使用Promise方法以及async和await新特性通過node('fs')模塊讀取.md文件
  

• test1.md    test2.md    test3.md
  

• //大體解題思路:
  //獲取test1.md
  const fs = require('fs');
  function gettest1(){
    return new Promise((resolve, reject)=>{
      fs.readFile('路徑/test1.md',(err,data)=>{
        if(err)reject(err);
        resolve(data);
      })
    });
  }
  //獲取test2.md
  function gettest2(){
    return new Promise((resolve, reject)=>{
      fs.readFile('路徑/test2.md',(err,data)=>{
        if(err)reject(err);
        resolve(data);
      })
    });
  }
  //獲取test3.md
  function gettest3(){
    return new Promise((resolve, reject)=>{
      fs.readFile('路徑/test3.md',(err,data)=>{
        if(err)reject(err);
        resolve(data);
      })
    });
  }
  //讀取數(shù)據(jù)
  async function Main(){
    const test1 = await gettest1();
    const test2 = await gettest2();
    const test3 = await gettest3();
    //輸出結(jié)果
    console.log(test1);//test1
    console.log(test2);//test2
    console.log(test3);//test3
  }
  //執(zhí)行函數(shù)
  Main();
  

通過async和await封裝ajax請求

• //定義ajax請求
  function ajax(url){
    return new Promise((resolve, reject)=>{
      const xhr = new XMLHttpRquest();
      xhr.open('GET',url);
      xhr.send();
      xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
          resolve(xhr.response);
        }
      }
    });
  }
  //調(diào)用請求并傳參
  async function Main(){
    const shi = await ajax('http://poetry.apiopen.top/sentences');
    console.log(JSON.Parse(shi).result.name);//白日依山盡眼俊，黃河入海流意狠。
  }
  //調(diào)用函數(shù)Main
  Main();
  

• 2021/1/12 es8 對象方法擴展

Object.keys(object)返回一個對象的所有鍵粟关，返回類型為數(shù)組

• const kjkjkl = {
    id: '1001',
    pwd: '123456',
    address: '山東淄博'
  }
  console.log(Object.keys(kjkjkl));//Array['id','pwd','address']
  

Object.values(object)返回一個對象的所有值,返回類型為數(shù)組

• const kjkjkl = {
    id: '1001',
    pwd: '123456',
    address: '山東淄博'
  }
  console.log(Object.values(kjkjkl));//Array['1001','123456','山東淄博']
  

Object.entries(object)返回一個對象的所有元素,類型為數(shù)組包含鍵與值

• const kjkjkl = {
    id: '1001',
    pwd: '123456',
    address: '山東淄博'
  }
  console.log(Object.entries(kjkjkl));//[Array{"id","1001"},Array{"pwd","123456"},Array{"address","山東淄博"}]
  //放入Map
  const m = new Map(Object.entries(kjkjkl));
  //取出鍵為id的值
  console.log(m.get('id'));//1001
  

Object.getOwnPropertyDescriptors(object)對象屬性的描述對象

• const kjkjkl = {
    id: '1001',
    pwd: '123456',
    address: '山東淄博'
  }
  console.log(Object.getOwnPropertyDescriptors(kjkjkl));//{id:{...},pwd:{...},address:{...}}
  //ps:其中...為value,writable,enumerable,configurable固定四個屬性
  //value 值,比如id{values:'1001'}
  //writable 是否可寫|默認為true
  //configurable 是否可以刪除|默認為true
  //enumerable 是否可以枚舉|默認為true
  //定義一個對象,且設(shè)置屬性
  const obj = Object.create(null, {
    id: {
      value: '1001',
      writable: true,
      configurable: true,
      enumerable: true
    },
    pwd: {
      value: '123'
    }
  })
  console.log(obj);//{id: "1001", pwd: '123'}
  

• 2021/1/13 es9 對象展開|正則擴展

對象展開...

• function connect({host,port,..user}){
    console.log(host);//127.0.0.1
    console.log(port);//80
    console.log(user);//{userid: "1001",username: "kjkjkl",password: "123456"}
  }
  connect({
    host: '127.0.0.1',
    port: '80',
    userid: '1001',
    username: 'kjkjkl',
    password: '123456'
  });
  

• const skillOne = {
    q: '天音波'
  }
  const skillTwo = {
    w: '金鐘罩'
  }
  const skillThree = {
    e: '天雷破'
  }
  const skillFour = {
    r: '猛龍擺尾'
  }
  const skillzhs = {
    d: '懲戒',
    f: '閃現(xiàn)'
  }
  const mangseng = {...skillOne, ...skillTow, ...skillThree, ...skillFour, ...skillzhs};
  console.log(mangseng);//{q: '天音破',w: '金鐘罩', e: '天雷破', r: '猛龍擺尾', d: '閃現(xiàn)', f: '懲戒'}
  

正則擴展---命名捕獲分組

• //聲明一個數(shù)組
  const baidu = '<a ;
  //聲明正則
  const reg = /<a href=".*?">.*?<\/a>/;
  //執(zhí)行匹配
  const result = reg.exec(baidu);
  //輸出結(jié)果
  console.log(result);//三個元素
  //0: "<a 
  //1: "http://www.baidu.com"
  //2: "百度"
  //屬性groups: undefined
    //進行分組
  const bili = '<a ;
  const reg1 = /<a href="?<url>.*?">?<text>.*?<\/a>/;//在獲取匹配數(shù)據(jù)的前面加?<組名稱>
  //執(zhí)行匹配
  const result1 = reg1.exec(bili);
  //輸出結(jié)果
  console.log(result1.groups.url);//http://www.bilibili.com
  console.log(result1.groups.text);//嗶哩嗶哩
  
  

正則擴展---反向斷言

• //聲明一個字符串str
  const str = 'yd10086聯(lián)通10010電話';
  //正向斷言 => 匹配數(shù)字且后一位為‘電’
  const reg = /\d+(?=電)/;
  //執(zhí)行匹配
  const result = reg.exec(str);
  //輸出
  console.log(result);//0:10010
  //反向斷言 => 條件為前面為‘通’ 匹配數(shù)字
  const reg1 = /(?<=通)\d+/;
  console.log(reg.exec(str));//0:10010
  

  正則擴展---dotAll模式

• //要求:正則表達式獲取a標簽以及p標簽內(nèi)的內(nèi)容
  const str = `<ul>
                  <li>
                      <a>肖申克的救贖</a>
                      <p>上映時間: 1994-09-10</p>
                  </li>
                  <li>
                      <a>阿甘正傳</a>
                      <p>上映時間: 1994-07-06</p>
                  </li>
          </ul>`;
  //普通模式
  const reg1 = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;
  //dotAll模式 單個匹配為s 全局匹配為gs
  const reg2 = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
  let result;
  let data = [];
  while(result = reg2.exec(str)){
    data.push({title: result[1],time: result[2]});
  }
  console.log(data);
  //0: {title: "肖申克的救贖", time: "上映時間: 1994-09-10"}
  //1: {title: "阿甘正傳", time: "上映時間: 1994-07-06"}
  

• 2021/1/9 ES10-ES11

ES10 Object.fromEntries() 數(shù)組與對象之間的轉(zhuǎn)化

• //二維數(shù)組
  console.log(Object.fromEntries([
    ["name","kjkjkl"],
    ["love",'javascript,C#,Asp.Net']
  ]));//{name: "kjkjkl",like: "javascript","C#","Asp.Net"}
  

• //Map
  const m = new Map();
  m.set('name','kjkjkl');
  console.log(Object.fromEntries(m));//{name: "kjkjkl"}
  

• //ES8 - Object.Entries
  console.log(Object.entries({
    name: 'kjkjkl'
  }));//[Array(2) => 0:name,1:kjkjkl]
  

ES10 字符串擴展trimStart()和trimEnd()

• //trim()去字符串所有空格
  //trimStart()去字符串起始位置空格
  //trimEnd()去字符串末尾空格
  const str = '   test   ';//前后各有三個空格
  console.log(str.trim());//test;
  console.log(str.trimStart());//test   ;
  console.log(str.trim()End);//   test;
  

ES10 flat()和flatMap()

• //flat 平 數(shù)組降維 => 三維降二維|二維降一維
  const arr = [1,2,3,[4,5,6,[7]]];
  //三維降二維
  console.log(arr.flat());//[1,2,3,4,5,6,Array(1) => 0:7]
  //三維降二維再降一維
  console.log(arr.flat().flat());//[1,2,3,4,5,6,7]
  

• //flatMap將Map中的對象進行降維
  const arr = [1,2,3,4,5];
  console.log(arr.flatMap(item => (item*10)));//[10,20,30,40,50]
  

ES10 Symbol.prototype.description屬性

• //description去Symbol標簽
  let a = Symbol(123);
  console.log(typeof(a),typeof(a.description));//Symbol String
  console.log(a.description);//123
  

ES11 私有屬性 (#)

• //聲明一個類
  class Person{
    //設(shè)置公有屬性name
    name;
    //設(shè)置私有屬性age,weight
    #age;
    #weight;
    //生成構(gòu)造函數(shù)
    constructor(name,age,weight){
      //指向?qū)傩圆①x值
      this.name = name;
      this.#age = age;
      this.#weight = weight;
    }
    //私有屬性只能進行內(nèi)部調(diào)用
    info(){
      //因為是類的屬性，所以前面必須要加this
      console.log(this.name);//小宇
      console.log(this.#age);//17
      console.log(this.#weight);//58kg
    }
  }
  //初始化類
  let girl = new Person('小宇',17,'58kg');
  //調(diào)用函數(shù)
  girl.info();
  //外部調(diào)用類的屬性
  console.log(girl.name);//小宇
  //調(diào)用私有屬性會報錯
  //console.log(girl.#age);//Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class
  

ES11 Promise.allSettled()與Promise.all()

• //定義兩個Promise對象
  const p1 = new Promise((resolve, reject)=>{
    resolve('商品數(shù)據(jù) -1');
  });
  const p2 = new Promise((resolve, reject)=>{
    reject('出錯啦');
  });
  //allSettled返回的結(jié)果永遠為fulfilled 值為所有promise的攜帶參數(shù),包含resolve和reject
  console.log(Promise.allSettled([p1, p2]));//state:fulfilled
  //all返回的結(jié)果：當一個Promise為reject時环戈，返回rejected 值為reject中的參數(shù)
  console.log(Promise.all([p1, p2]));//state:rejected
  

ES11 string.prototype.matchAll()

• //要求:提取全局a標簽和p標簽的值
  const str = `<ul>
                <li>
                    <a>肖生克的救贖</a>
                    <p>上映日期:1994-09-10</p>
                </li>
                <li>
                    <a>阿甘正傳</a>
                    <p>上映日期:1994-07-06</p>
                </li>
                </ul>`;
                //聲明正則表達式
            const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;
            //給定一個字符串和一個正則表達式闷板，.matchAll（）為所有匹配的匹配對象返回一個迭代器
            let result = str.matchAll(reg);
            //遍歷內(nèi)容并輸出
            for(let v of result){
                console.log(v);
            }
  

ES11 可選鏈操作符?.

• //?.檢測屬性是否存在
  function main(config){
    console.log(config?.db?.host);
  };
  main({
    db: {
      host: '192.168.1.11',
      username: 'kjkjkl'
    },
    cache: {
      host: '127.0.0.1',
      usernmae: 'admin'
    }
  });
  

動態(tài)import

• <!DOCTYPE html>
  <html>
    <head>
        <meta charset="utf-8">
        <title>動態(tài)import</title>
    </head>
    <body>
        <script src="js/app_1.js" type="module"></script>
    </body>
  </html>
  

• //app_1.js
  //局部引用方法，節(jié)省資源占用
  import('./hello.js').then(module=>{
    module.hello();
  })
  

• //hello.js
  export function hello(){
    console.log('Hello World!');
  }
  

ES11 - BigInt

• //聲明一個大整形n
  //大整形不可與整形直接運算
  let n = 111n;
  console.log(n,typeof(n));//111n BigInt
  
  //大數(shù)值運算
  //聲明最大安全整數(shù)Number.MAX_SAFE_INTEGER
  let max = Number.MAX_SAFE_INTEGER;
  console.log(max);//9007199254740991
  console.log(max +1);//9007199254740992
  
  //轉(zhuǎn)換為大整形
  console.log(BigInt(max));//9007199254740991n
  //直接BigInt(max) +1會報錯,必須轉(zhuǎn)換為BigInt(1)
  console.log(BigInt(max) + BigInt(1));//9007199254740992n
  

ES11 - 全局對象globalThis

• //任何環(huán)境下院塞，globalThis 都是存在的遮晚，都可以從它拿到頂層對象，指向全局環(huán)境下的 this
  //瀏覽器里面拦止，頂層對象是 window县遣，但 Node 和 Web Worker 沒有window
  //瀏覽器和 Web Worker 里面，self 也指向頂層對象汹族，但是 Node 沒有 self
  //Node 里面萧求，頂層對象是 global，但其他環(huán)境都不支持
  console.log(globalThis);