ES新提案 雙問號操作符

2021-09-27 05:35:04 字數 3573 閱讀 2394

摘要：簡單實用的新特性。

雙問號??的操作符跟||類似，如果給定變數值為null或者undefined，剛使用雙問號後的預設值，否則使用該變數值。

如下:

> undefined ?? 'default'


'default'


> null ?? 'default'


'default'


> false ?? 'default'


false


> '' ?? 'default'


''> 0 ?? 'default'


0
直接來個例子來演示一下||運算，下面兩個等式是等價的：

a || b


a ? a : b
如果a是 truthy 值，則返回a, 否則返回b。

這使得使用||指定乙個預設值成為可能，如果實際值是假的，那麼將使用這個預設值：

const result = actualvalue || defaultvalue;


function gettitle(filedesc) 


const files = [,,


];assert.deepequal(


files.map(f => gettitle(f)),


['home', '(untitled)']);
請注意，基本只有在實際值undefined或為null時才應使用預設值，這是有效的，因為undefined和null都是假(虛值)的：

> undefined || 'default'


'default'


> null || 'default'


'default'
遺憾的是，如果實際值是其他的虛值，也會使用預設值：

> false || 'default'


'default'


> '' || 'default'


'default'


> 0 || 'default'


'default'
因此，這個gettitle()並不總能正常工作：

assert.equal(


gettitle(),


'(untitled)');
??主要是用來解決||操作符號的一些問題，以下兩個表示式是等價的：

a ?? b


a !== undefined && a !== null ? a : b
預設值是這樣提供的：

const result = actualvalue ?? defaultvalue;
對於undefined和null，??操作符的工作原理與||操作符相同

> undefined ?? 'default'


'default'


> null ?? 'default'


'default'
除了undefined和null的其它虛值，??不會返回預設值。

> false ?? 'default'


false


> '' ?? 'default'


''> 0 ?? 'default'


0
使用??來重寫gettitle():

function gettitle(filedesc)
現在使用filedesc呼叫它，它的.title是空字串，仍然可以按符合咱們的預期工作：

assert.equal(


gettitle(),


'');
3.1 通過解構給定預設值

除了使用??給gettitle新增預設值，咱們也可以通過解構方式來給定預設值：

function gettitle()
3.2 使用 ?? 操作符號的實際例子

作為乙個現實的例子，咱們使用??來簡化下面的函式。

function countmatches(regex, str) 


const matchresult = str.match(regex); // null or array


if (matchresult === null)  else 


}assert.equal(


countmatches(/a/g, 'ababa'), 3);


assert.equal(


countmatches(/b/g, 'ababa'), 2);


assert.equal(


countmatches(/x/g, 'ababa'), 0);


// flag /g is missing


assert.throws(


() => countmatches(/a/, 'ababa'), error);
使用??操作符號後，簡化如下：

function countmatches(regex, str) 


return (str.match(regex) ?? ).length;


}
3.3 雙問號(??)操作符與可選鏈(?)

雙問號(??)的提出是為了補充可選鏈(?)，來看看這兩兄弟結合使用的場景（第a行）：

const persons = [,},


},,,},


];const streetnames = persons.map(


p => p.address?.street?.name ?? '(no name)'); // (a)


assert.deepequal(


streetnames, ['sesame street', '(no name)', '(no name)']


);
可以通過ecmascript next compatibility table 檢視??支援情況。

**部署後可能存在的bug沒法實時知道，事後為了解決這些bug，花了大量的時間進行log 除錯，這邊順便給大家推薦乙個好用的bug監控工具 fundebug。

es6新特性展開操作符「 」

展開操作符 允許乙個表示式在某處展開，在存在多個引數 用於函式呼叫 多個元素 用於陣列字面量 或者多個變數 用於解構賦值 的地方就會出現這種情況。如果在之前的js中想讓乙個函式把乙個陣列一次作為引數進行呼叫時 function test x，y，z var args 1,2,3 使用 時 var a...

雙邏輯非 操作符

雙邏輯非操作，會把乙個值 數字，字串 轉換為布林值。第一次邏輯非操作取反的布林，第二次獲得最初元素本身對應的布林。alert false false alert blue true alert 0 false alert nan false alert 12345 true雙邏輯非操作符提高了程式執...

雙邏輯非操作符

1.邏輯非操作符有乙個嘆號 表示，針對任何資料型別，這個操作符都會返回乙個布林值。邏輯非操作符會先將它的運算元轉換為乙個布林值，然後再對其求反。alert flase true alert blue false alert 0 true alert nan true alert 12345 fals...