1、let和const
let a / let a,b,c,d / let a=10
特點:
1、變量不能重復聲明
2、作用域為塊級作用域(塊級,全局,函數(shù),eval)
3、不存在變量提升
4、不影響作用域鏈
const a='hello'
特點:
1、要賦予初始值
2、通常大寫(小寫也行)
3、常量的值不能修改
4、塊級作用域
5、對于數(shù)組和對象的元素進行修改不會報錯(不算對常量進行修改)
2、解構賦值
1、數(shù)組結構
const array = ['云間月','林間雪','心上人']
let [a,b,c] = array //a:云間月,b:林間雪,c:心上人
2、對象結構
const ruleForm = {
page:20,
size:10,
total:100,
fun:function(){
console.log('頁碼20,每頁10條,總數(shù)100')
}
}
let {page,size,total,fun} = ruleForm //20,10,100,和fun這個函數(shù)
fun();//可以直接調(diào)用
3、模板字符串
引入字符串的方式 `` (反引號)
特點:
1、內(nèi)容中可以直接出現(xiàn)換行符(單引號或者雙引號則不行)
2、變量拼接
let a = '魏海量'
console.log(`${a}一杯就倒`) //魏海量一杯就倒
必須使用${}的形式
4、簡化對象的寫法
ES6允許在大括號里面直接寫入變量和函數(shù),作為對象的屬性和方法--更加簡潔
let time= '12:00'
let date = function(){
return new Date()
}
const TEMP = {time,date,};//12:00,當前時間
等同于
const TEMP = {
time:time,
date:date
}
函數(shù)簡化:
let fun = function(a,b){
console.log(a,b)
}
等同于
fun(a,b){
console.log(a,b)
}
5、箭頭函數(shù)及其聲明特點
使用 => 定義函數(shù)
原始聲明:
let fun = function(a,b){console.log(a+b)}
原始調(diào)用 fun(1,2);//3
ES6聲明:
let fun = (a,b) =>{console.log(a+b)}
ES6調(diào)用 fun(1,2);//3
特點:
1、this是靜態(tài)的,始終指向函數(shù)聲明時所在作用域下的this的值
2、不能作為構造函數(shù)實例化對象
let fun = (a,b) =>{
console.log(a+b)
}
let funs = new fun(1+2);//報錯
3、不能使用arguments變量
let fun = () =>{console.log(arguments)}
fun(1,2,3);//報錯 argements未定義
4、箭頭函數(shù)的簡寫
01、省略小括號,當形參有且又有一個的時候可簡寫
例:let fun = (a) =>{console.log(a)}
等同于 let fun= a =>{console.log(a)}
調(diào)用:fun(1);//1
02、省略花括號,當代碼體只有一條語句的時候,此時return必須省略,且語句的執(zhí)行結果就是函數(shù)的返回值
例:let fun = a =>{return a+a};
等同于 let fun = a => a+a
調(diào)用:console.log(fun(1));//2
5、使用場景:
01、適合與this無關的回調(diào)、定時器、數(shù)組的方法回調(diào)
02、不適合與this有關的回調(diào),事件的回調(diào),對象的方法等
6、允許給函數(shù)的參數(shù)(形參)賦予初始值
原始:function add(a,b,c){return a+b+c}
add(1,2);//undefined
ES6:function add(a,b,c=3){return a+b+c}
add(1,2);//6
特點:
1、形參初始值,具有默認值的參數(shù),一般放到后面
2、可以與解構賦值相結合
例:
function fun({name='王朱',age}){return name+'年齡'+age}
fun({age:10});//王朱年齡10
7、rest參數(shù)(用于代替arguments)
用于獲取函數(shù)的實參是ES6獲取實參的方式
原始:
function fun(){console.log(arguments)}
fun('周米粒,暖樹,景清');//{0:‘周米粒’,1:'暖樹',2:'景清'} 是一個對象
ES6:
function(...params){console.log(params)}
fun('周米粒,暖樹,景清');//['周米粒,暖樹,景清'] 是一個數(shù)組,可以使用數(shù)組的方法
限制:當有多個參數(shù)時,rest參數(shù)必須放到最后
例:function fun(a,b,...params){console.log(a,b,params)}
fun(1,2,3,4,5,6,7);//1,2,[3,4,5,6,7]
8、擴展運算符 ...
擴展運算符能將數(shù)組轉化為逗號分割的參數(shù)序列
let params = [1,2,3]
function fun(){console.log(arguments)}
原始:fun(params);// {0:[1,2,3]} 是一個對象,只有一個參數(shù)
擴展運算符:fun(...params);//[[1,2,3]] 是一個數(shù)組,有多個參數(shù)
運用:
例:const arr = ['aa','bb']
例:const arr2 = ['dd','ee']
1、數(shù)組合并
原始:arr.concat(arr2);//['aa','bb','dd','ee']
擴展運算符 [...arr,...arr2];//['aa','bb','dd','ee']
2、數(shù)組的克隆
let arr3 = [...arr];//['aa','bb'] 如果只是值類型,則可以創(chuàng)建一個新的數(shù)組,如果有引用類型的話,則只是淺拷貝。
3、將偽數(shù)組轉化為真正的數(shù)組(假如有三個div)
const arr = document.querySelectAll('div');//對象類型
let arrs = [...arr];//數(shù)組類型
例:轉化arguments
9、Symbol(用得少)
Symbol是ES6引入的一種新的原始數(shù)據(jù)類型,表示獨一無二的值;是js的第七種數(shù)據(jù)類型,類似字符串的數(shù)據(jù)類型。
特點:
1、Symbol的值是唯一的,用來解決命名沖突的問題;
2、Symbol值不能與其它數(shù)據(jù)類型進行運算;
3、Symbol定義的對象屬性不能使用for...in循環(huán)遍歷,但是可以使用Reflect.ownkeys獲取對象的所有鍵名。
Symbol創(chuàng)建的幾種方式:
1、let Sy1 = Symbol();//Symbol()
2、let Sy2 = Symbol('temp1');//Symbol('temp1')
3、let Sy3 =Symbol('temp1');//Symbol('temp1)
console.log(SY2===Sy3);//false 兩個是不一樣的,在內(nèi)部會做區(qū)別,外部無法獲知
4、let Sy4 = Symbol.for('temp2');//Symbol('tamp2')
let Sy5 = Symbol.for('temp2');//Symbol('tamp2')
console.log(SY2===Sy3);//true這樣創(chuàng)建是一樣的
Symbol的使用場景:向對象中添加屬性和方法
1、方法1
let obj = {
add:()=>{},
minus:()=>{}
}
let methods = {
add:Symbol('add'),
minus:Symbol('minus')
}
obj[methods.add] = (a)=>{return a+a}
obj[methods.minus] = (a)=>{return a+a}
2、方法2
let obj= {
name:'temp',
[Symbol('fun')]:a=>return a+a
}
Symbol 還有十一個內(nèi)置屬性
js的數(shù)據(jù)類型:USONB
u:undefined
s:String Symbol
o:Object
n:null Number
b:Boolean
10迭代器(用得少)
迭代器是一種接口,為各種不同的數(shù)據(jù)結構提供統(tǒng)一的訪問機制,任何數(shù)據(jù)結構只要部署interrator接口(interrator接口是對象的一個屬性:Symbol.interator),就可以完成遍歷操作
Es6創(chuàng)造一種新的遍歷命令for...of循環(huán),interator主要提供for..of循環(huán)
具備interator接口的數(shù)據(jù)(可用for...of循環(huán)遍歷)
1、Array;
2、arguments;
3、Set;
4、Map;
5、String;
6、TypeArray;
7、NodeList;
例:
const arr = ['景清','暖樹']
for(let i of arr){
console.log(i);//景清,暖樹
}
可打印數(shù)組,在得到的數(shù)據(jù)中找到Symbol.interator這個函數(shù) console.log(arr)
調(diào)用這個函數(shù),然后打印返回值,可以找到next()方法 let temp = arr[Symbol.interator]()
之后可以調(diào)用next()方法 temp.next()
工作原理:
1、創(chuàng)建一個指針對象,指向當前結構的起始位置
2、第一次調(diào)用對象的next()方法,指針自動指向數(shù)據(jù)結構的第一個成員
3、接下來不斷調(diào)用next()方法,指針一直往后移動,直到指向最后一個成員=
4、每次調(diào)用next()方法返回一個包含value和done 的屬性的對象
11、生成器
是一種特殊的函數(shù),是一種異步編程的解決方案
聲明方式:函數(shù)和函數(shù)名之間加 * 號
function * fun(){console.log('hello')}
let interator = fun()
console.log(interator);//返回值是一個迭代器對象
調(diào)用:interator.next();//hello 調(diào)用的是里面的next()方法
yield語句
function * fun(){
console.log('111');
yield '第二次調(diào)用';
console.log('222');
yield '第三次調(diào)用';
console.log('333');
}
let interator = fun()
interator.next();//111
interator.next();//222
interator.next();//333
生成器函數(shù)參數(shù)
function * fun(parmas){
console.log(params);
let first = yield 1
console.log(first)
let second = yield 2
console.log(second)
}
let interator = fun('A');//獲取迭代器對象
interator.next();//A {value:1,done:false}
//在調(diào)用時可以傳入實參,實參作為yield語句的返回結果(第二次調(diào)用傳入的實參會作為第一個yield語句的返回結果)
interator.next();//A {value:1,done:false}
//同樣;第三次調(diào)用的參數(shù)會作為第二個yield語句的返回結果,以此類推
實例:
1、回調(diào)地獄函數(shù):
function fun1(){
console.log(111)
function fun2(){
console.log(222)
function fun3(){
console.log(333)
//...
}
}
}
2、生成器函數(shù)
function fun1(){
console.log(111)
interator.next();//可傳參數(shù),作為第一個yield語句的返回值
}
function fun2(){
console.log(222)
interator.next()
}
function fun3(){
console.log(333)
interator.next()
}
function * fn(){
yield fun1()
yield fun2()
yield fun3()
}
let interator = fn()
interator.next()
12、Promise(重要)
ES6引入的異步編程的解決方案,語法上是一個構造函數(shù),用來封裝異步操作,并可以獲取成功或失敗的結果
基本語法:
//實例化一個Promise對象,里面的參數(shù)可以是一個異步函數(shù)(例:要封裝的請求),函數(shù)有兩個參數(shù),可以隨便,通常是resove和reject
const prom = new Promise(functiong(resove,reject){
function fun(){
let res = '返回結果(成功)'
resove(res)
let res2 = ‘返回結果(失敗)’
reject(res2)
}
})
//回調(diào)Promise的then()方法,then()有兩個參數(shù),都是函數(shù),函數(shù)有實參,分別是resove()返回的成功數(shù)據(jù),和reject返回的失敗數(shù)據(jù)
prom.then((res)=>{
console.log(res)
},(err)=>{
console.log(err)
})
then()方法的返回結果是一個Promise對象,對象狀態(tài)由函數(shù)的執(zhí)行結果決定:
1、如果回調(diào)函數(shù)中返回的結果是非Promise類型的屬性,狀態(tài)為成功,返回值為對象的成功的值
2、如果回調(diào)函數(shù)中返回的結果是Promise類型,則狀態(tài)跟隨返回的Promise的狀態(tài)
then()方法可以鏈式調(diào)用(解決回調(diào)地獄)
catch()方法返回錯誤信息
例:prom.ctach(res=>{return '正確' }).catch(err=>{console.log('失敗')})
13、Set
Es6提供新的數(shù)據(jù)結構Set(集合),類似于數(shù)組,但是成員都是唯一的;集合實現(xiàn)了interator接口,可使用擴展運算符(...)和for...of進行編輯
1、集合的屬性和方法
01、size 返回集合的元素個數(shù)
02、add 添加一個元素,返回當前的集合
03、delete 刪除元素,返回Boolean值
04、has 檢測集合是否包含某個元素,返回Boolean值
05、clear 清空集合
2、聲明方式
let s = new Set();//typeof=>Object
3、使用
let arr = [5,10,5,15]
let s2 = new Set(arr);//{5,10,15}
s2.size ;//3
s2.add(20);//{5,10,15,20}
s2.delete(2);//{10,15,20}
s2.has(5);//false
s2.clear();//{}
for(let s of s2){
console.log(s);//可獲得里面的每個值
}
4、數(shù)組去重(常用)
let arr = [1,4,3,3,2,2,3,]
let arr2 = [...new Set(arr)];//[1,4,2,3]
14、Map
Map數(shù)據(jù)結構,類似于對象,是鍵值對的集合,但是鍵的范圍不限于字符串,各種類型的值都可以當做鍵。Map實現(xiàn)了interator接口,可使用擴展運算符和for...of循環(huán)遍歷
Map的屬性和方法
01、size 返回元素個數(shù)
02、set 添加新的元素,返回當前Map
03、get 返回鍵名對象的鍵值
04、has 檢測map中是否含有某個元素,返回Boolean值
05、清空集合,返回Map(0){}
聲明方式:
let m = new Map()
使用:
m.set('name','周米粒');// {'name'=>'周米粒'}
m.set('fun',function(){});// {'fun'=>function(){}}
m.size;//2
m.delete('name');//{'fun'=>function(){}}
m.get('fun');//function(){}
m.clear();//map(0){}
for(let i of m){console.log(i)};//數(shù)組的形式[鍵,值],[鍵,值]
15、class
更接近傳統(tǒng)語言的寫法;通過class關鍵字=可以定義類,可看作是一個語法糖,大部分功能ES5可以實現(xiàn),新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法
//TODO 有點虛,下次還得再看看
16、數(shù)值擴展
一些方法
01、Number.isFinite();檢測一個數(shù)值是否為有限數(shù),例:
Number.isFinite(100);//返回Boolean值
02、Number.isNaN();//檢測一個數(shù)是否為數(shù)字,例:
Number.isNaN(22);//返回Boolean值
03、Number.paseInt()提取整數(shù),例:
Number.parseInt('521親愛的姑娘');//521
04、Number.parseFloat提取浮點數(shù),例:
Number.parseFloat('3211.1多瓦');//3211.1
05、Number.isInteger();檢測一個數(shù)是否為整數(shù),例:
Number.isInteger(6.6);//false 返回boolean值
06、Math.trunc();將數(shù)字的小數(shù)部門抹掉
Math.trunc(6.6);//6,返回抹去小數(shù)后的整數(shù)
07、Math.sign();判斷一個數(shù)是正數(shù),負數(shù),零
Math.sign(66);//1,正數(shù)
Math.sign(-66);//-1,負數(shù)
Math.sign(0);//0,零
17、對象方法的擴展
1、Object.is() 判斷兩個值是否相等
Object.is(66,66);//true
Object.is(66,61);//false
Object.is(NaN,NaN);//true,特殊
2、Object.assign()對象的合并
let Obj1 = {}
let Obj2 = {}
Object.assign(Obj1,Obj2);//對象2會把對象1覆蓋,返回合并后的新對象
3、Object.setPrototypeof()設置原型對象;Object.getPrototypeof();獲取原型對象
const obj1 = {name:'周米粒'}
const obj2 = {work:'巡山',address:'落魄山'}
Object.setPrototype(obj1,obj2);設置原型對象
輸出結果:{name:'周米粒',
__proto__:{
work:'巡山',
address:'落魄山'
}}
Object.getPrototypeof(obj1);//獲取原型對象
18、模塊化
將一個大的程序文件,拆分成許多小的程序文件,然后將小文件組合起來
1、好處:
01、防止命名沖突
02、代碼復用
03、更容易維護
2、模塊化規(guī)范產(chǎn)品
1、CommonJS => NodeJS Browserify
2、AMD => requireJS
3、CMD => sealJS
3、 ES6模塊化語法(在瀏覽器中無法直接使用,我們需要在引入模塊的 <script> 元素上添加type="module" 屬性)
1、export (暴露) 用于規(guī)定模塊的對外接口
2、import (引入) 用于輸入其他模塊提供的功能
例1(Vue):
01、單獨暴露,全部引入
export let baseUrl = "192.168.18"
export function fun(a,b){return a+b}
使用的地方:
import * as temp form "js文件路徑"
console.log(temp)
02、統(tǒng)一暴露,解構賦值形式引入
let baseUrl = "192.168.18"
function fun(a,b){return a+b}
export {baseUrl,fun}
使用的地方:
import {baseUrl,fun} form "js文件路徑"
console.log(temp)
03、默認暴露
export default {
fun:function(){}
baseUrl:'192.168.2'
}
使用的地方:
import {default as temp} form "js文件路徑"
console.log(temp)
注意:
1、引入 export default 導出的模塊不用加 {},引入非 export default 導出的模塊需要加 {}
2、一個文件只能導出一個 default 模塊。
3、import/export 不能對引入模塊重新賦值/定義
4、import/export 只能在模塊頂層使用,不能在函數(shù)、判斷語句等代碼塊之中引用
(https://zhuanlan.zhihu.com/p/121770261以及尚硅谷視頻)
19、ES7
兩個方法:
1、includes() 判斷數(shù)組中是否含有某個元素,返回Boolean值
例:
const arr = ['白也','白玄','白景']
console.log(arr.includes('暖樹'));//false
和indexOf類似,不過返回值不一樣
2、** 計算一個數(shù)的多少次冪
例:
console.log(2 ** 10);//1024
等同于 Math.pow(2,10)
20、ES8--async
- async await 相結合可以讓異步代碼像同步代碼一樣;
- 解決異步編程的方式目前有 生成器函數(shù),Promise;async await;
- async函數(shù)的返回值為Promise對象
- Promise對象的結果由async函數(shù)執(zhí)行的返回值決定
1、async
使用:
async fun(){
//async返回值是一個Promise對象
//如果返回的結果不是一個Promise類型的對象,返回的結果就是成功的Promise
return 'Srtring';
//拋出錯誤,返回的結果是一個失敗的Promise
throw new Error('錯誤拋出')
//如果返回值是一個Promise對象(多數(shù)情況下)
return new Promise((resove,reject)=>{
resove('成功的數(shù)據(jù)');//返回結果則為成功
reject('失敗的數(shù)據(jù)');//但會結果則為失敗
})
};//函數(shù)那面加一個async
fun().then(()=>{
//resole('成功的數(shù)據(jù)')在這里會被得到
},()=>{
//reject('失敗的數(shù)據(jù)')在這里會被得到
})
21、ES8--async await
await表達式:
- await必須寫在async函數(shù)中(但是async函數(shù)里面不一定要有await)
- await右側的表達式一般為Promise對象
- await返回的是Promise成功的值
- await的Promise失敗了,就會拋出異常,需要通過try...catch捕獲處理
結合使用
function fun1(){
return new Promise((resove,reject)=>{
//getData定義的一個請求數(shù)據(jù)的函數(shù)
getData(){
if(res.message=='success'){
resove(res)
}else{
reject(res.message)
}
}
})
}
async tempFun(){
let res = await fun1()
//res就是請求數(shù)據(jù)的函數(shù)返回的值
}
22、ES8--對象方法的拓展
示例:
const tempObj = {
name:'米粒',
size:'small',
address:['啞巴湖','落魄山']
}
1、獲取對象的所有鍵
Object.keys(tempObj);//['name','size','address']
2、獲取對象所有的值
Object.values(tempObj);//['米粒','small',['啞巴湖','落魄山']]
3、將對象以數(shù)組的形式返回,數(shù)組的第一個值是鍵,第二個值是內(nèi)容
let temp = Object.entries(tempObj);//[['name','米粒'],[...],[...]]
使用entries()方法可以方便創(chuàng)建一個map,例:
const m = new Map(temp);
{
{'name'=>'米粒'},
{'size'=>'small'},
{'address'=>['啞巴湖','落魄山']}
}
4、獲取對象屬性的描述對象
Object.getOwnPropertyDescriptors(tempObj)
23、ES9--擴展運算符與rest參數(shù)
- rest參數(shù)和擴展運算符在ES6中已經(jīng)引入,不過ES6中只針對于數(shù)組,在ES9中為對象提供了像數(shù)組一樣的rest參數(shù)和擴展運算符
function fun({p1,p2,...pn}){
console.log(p1,p2,pn);//'暖樹','景清',{p3:'米粒',p4:'裴錢',p5:'大白鵝'}
}
fun({p1:'暖樹',p2:'景清',p3:'米粒',p4:'裴錢',p5:'大白鵝'})
例2:
const obj1 = {a:'洛陽',b:'軒轅青峰'}
const obj2 = {a:'大秦帝',b:'軒轅敬誠'}
console.log({...obj1,...obj2});//{a:'洛陽',b:'軒轅青峰',a:'大秦帝',b:'軒轅敬誠'}
24、ES9--正則擴展:命名捕獲分組
例(原來的):
let str = '<a
需求:提取URL和文本
const reg = /<a href = "(.*)">(.*)</a>/
console.log(reg.exec(str));
返回值為一個數(shù)組,
1、第一個值是全部的內(nèi)容:'<a
2、第二個值是第一個匹配到的結果:"https://www.baidu.com"
3、第三個值為第二個匹配到的結果:"百度"
4、groups為 undefined
例(現(xiàn)在的):
let str = '<a
需求:提取URL和文本
const reg = /<a href = "(?<url>.*)">(?<text>.*)</a>/
console.log(reg.exec(str));
返回的其他的都一樣,只有groups不同:
groups:
text:"百度",
url:"https://www.baidu.com"
25、ES9--正則擴展:反向斷言
26、ES9--正則擴展:dotAll模式
27、ES10--對象的擴展方法
Object.fromEntries()
創(chuàng)建一個二維數(shù)組
const arr= [['落魄山','長命','周肥'],['綢繆山','米裕','崔嵬']];
console.log(Object.fromEntries(arr));
結果:{'落魄山':'長命,周肥','綢繆山':'米裕,崔嵬'}
相當于把二維數(shù)組轉化為對象
ES8的Object.entries()把對象轉化為二維數(shù)組,例:
console.log(Object.entries({'落魄山':['周肥','長命']}))
結果:[['落魄山',['周肥','長命']]]
28、ES10的字符串擴展方法
- str.trimStart()清除字符串左側空白
- str.trimEnd()清除字符串右側空白
let str = ' 紅豆 '
str.trimStart()
str.trimEnd()
然后 str.trim()是清除字符轉兩端的空格
29、ES10--數(shù)組的擴展方法
- arr.flat(number)將多維數(shù)組轉化為低維數(shù)組,參數(shù)是一個數(shù)組,代表深度,例:
const arr = [1,2,3,[,4,5,6]]
console.log(arr.flat());//[1,2,3,4,5,6]
const arr2 = [1,2,3,[4,5,[6,7]]]
consolog.log(arr2.flat(2));//[1,2,3,4,5,6,7]
const arr5 =[1,[2,[3,[4,[5,[6]]]]]]
console.log(arr5.flat(5));//[1,2,3,4,5,6]
- arr.flatMap()
const arr = [1,2,3]
const arr1 = arr.map(item=>item*10)
console.log(arr1);//[[10],[20],[30]]
const arr2 = arr.flatMap(item=>item*10)
console.log(arr2);//[10,20,30]
30、ES10--Symbol的擴展
- Symbol.prototype.description 用于獲取Symbol的字符串描述
let temp = Symbol('周米粒')
console.log(temp.description);//周米粒
31、ES11--私有屬性
例子:
class person {
name:'余斗';
#age:8000;//私有屬性加#
constructor(name,age){
this.name = name;
this.#age = age
}
}
let man = new person('余斗',8000)
console.log(man ); //{name:'余斗',#age:8000}
單獨某個:
console.log(man.name);//余斗
console.log(man.#age);//報錯
獲取私有屬性方式:
class person {
name:'余斗';
#age:8000;//私有屬性加#
constructor(name,age){
this.name = name;
this.#age = age
}
intro(){
console.log(this.#age);//8000
}
}
32、ES11--Promise.allSettled
- Promise.addSettled(Promise數(shù)組),接收的是一個Promise數(shù)組,返回的結果是永遠是成功的狀態(tài),成功的值是每一個Promise的狀態(tài)和結果。
const p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('成功的返回01')
},1500)
})
const p2 = new Promise((resolve,reject)=>{
setTimeout(()=>{
//resolve('成功的返回02')
reject('失敗的返回02')
},1500)
})
const res = Promise.allSettled;
結果永遠是成功的,哪怕有Promise是失敗的,但是總的永遠是成功的。
類似的有:
Promise.all()
接收一個Promise數(shù)組,返回結果根據(jù)Promise的狀態(tài)決定,全部成功則為成功,有一個失敗則為失敗。
33、ES11-String.prototype.matchAll
- 用于得到正則批量匹配的結果
let str = `
<ul>
<li>
<a>霸王別姬</a>
<p>上映時間:不曉得</p>
</li>
<li>
<a>老酒館</a>
<p>上映時間:不曉得</p>
</li>
</ul>
`
聲明正則:
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
const res = str.matchAll(reg)
for(let v of res){
console.log(v)
}
34、ES11--可選鏈操作符
const params = {
url:{
baseUrl:'192.168.0.107',
name:'locahost'
}
}
function fun1(params){
const temp = params.url.baseUrl;
console.log(temp)
}
fun1(params);//192.168.0.107
fun1();//報錯
想要不報錯:
function fun1(params){
const temp = params&¶ms.url&¶ms.url.baseUrl;
console.log(temp)
}
fun1(params);//192.168.0.107
fun1();//undefined
//可選鏈操作符
function fun2(params){
const temp = params?.url?.baseUrl;
console.log(temp)
}
fun(params);//192.168.0.107
fun();//undefined
35、ES11--動態(tài)import
36、ES11--bigint
let num = 66n
console.log(num,typeof(num));//66n bigint
整數(shù)轉化為bingint類型
console.log(BigInt(66));//66n
小數(shù)
console.log(BigInt(66.6));//報錯
主要運用于大數(shù)值的運算
let max = Number.MAX_SAFE_INTEGER
console.log(max);9007099254740991
console.log(max+1);9007099254740992
console.log(max+2);9007099254740992
console.log(BigInt(max));9007099254740991n
console.log(BigInt(max)+1);//報錯
console.log(BigInt(max)+BigInt(1));9007099254740992n
console.log(BigInt(max)+BigInt(2));9007099254740993n
37、ES11--globalThis
無視環(huán)境直接使用全局對象。