初探 Nullish coalescing assignment  (??=)

前言

  在先前的 初探 Nullish coalescing operator (??) 介紹過 ?? ，這次來學習跟它很像的 ??=  ，在此把學習的過程做個紀錄。

內容

  範例如下

let obj = {
  a : 1234
};
//
obj.a ??= 5678;
console.log( obj.a );//1234
//
obj.b ??= 9999;
console.log( obj.b );//9999
//
obj.c ??= undefined;
console.log( obj.c );//undefined
//
obj.d ??= null;
console.log( obj.d );//null

??= 是有賦值的特性，並不是像 == 之類比較，賦值的邏輯是當左側是 null 或 undefiend 則給予賦值，範例第一例由於 a 已經有數值，所以賦值不會成功， b 由於本來就沒值，所以賦值成功，如果左側原本沒值，右側賦予 null 或 undefined 會成功嗎?從 c 與 d 的結果來看答案是肯定的!

參考資料

[ developer.mozilla.org ] Nullish coalescing assignment (??=)

相關文章與資料

初探 Nullish coalescing operator (??)

 初探 Nullish coalescing operator (??)

前言

  最近發現新語法 Nullish coalescing operator ，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( 1111 ?? undefined );//1111
console.log( null ?? 1234);//1234
console.log( null ?? undefined ?? 5678);//5678
console.log( null ?? 'abcd' ?? undefined);//"abcd"
console.log( null ?? 5555 ?? undefined ?? 9999);//5555

Nullish coalescing operator 可以理解成處理的雙方只要有一方不是 null 或 undefined ，還可以連續處理多個對象，如範例的第三、第四與第五例，要注意處理都是左方對象優先，第五例回傳的是 5555 而非 9999。

參考資料

[ developer.mozilla.org ] Nullish coalescing operator (??)

 初探 Optional chaining (?.)

前言

  最近發現 JavaScript 有個 Optional chaining 的語法，在此把學習的過程做個紀錄。

內容

  範例如下

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
const dogName = adventurer?.name;
//Follow code has the same result...
//const dogName = adventurer.dog && adventurer.dog.name;
console.log(dogName);//Alice
//
const catName = adventurer?.cat?.name;
console.log(catName);//Dinah

Optional chaining  用來簡化程式碼，在寫程式常常需要檢查物件是否存在，若存在提取其內容這樣的邏輯，用 ?. 的語法就可以快速完成，範例的 dogName 會先確認 adventurer 是否存在，若存在回傳 aadventurer.name ，若不存在則是回傳 undefined ，這點要注意。這個語法還可以使用在巢狀結構，如範例的 catName 的應用，先確認 adventurer  是否存在，再確認 adventurer.cat 的存在，都沒問題才回傳 adventurer.cat.name 。

參考資料

[ developer.mozilla.org ] Optional chaining (?.)

 初探 console.count()

前言

  JavaScript 有提供計數器給偵錯用，這次把學習的過程做個紀錄。

內容

  範例如下

console.count( 'a' );//a: 1
console.count( 'a' );//a: 2
console.countReset( 'a' );
console.count( 'a' );//a: 1
//
console.count( );//default: 1

這次的情況有點特別，[ jsbin.com ] JS Bin 在跑範例時會無法正常工作，所以這次的範例會使用 [ onecompiler.com ] OneCompiler ，計數使用 console.count() ，參數可用輸入計數器的名稱，要清除計數可以透過 console.countReset() ，在 [ onecompiler.com ] OneCompiler 的執行結果還是和 [ developer.mozilla.org ] console: countReset() 不一樣，console.countReset() 在 MDN 的範例是會有輸出的，但在 onecompiler.com ] OneCompiler 卻不會。

參考資料

[ developer.mozilla.org ] console: count()

[ developer.mozilla.org ] console: countReset()

相關文章與資料

[ onecompiler.com ] OneCompiler

[ jsbin.com ] JS Bin

 清除偵錯訊息

前言

  常常遇到滿滿的偵錯訊息嗎?其實偵錯訊息是可以清除的，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( 'I`m message');
console.clear();

執行結果如下

範例執行結果

清除只需透過 console.clear() 即可，不只是一班的輸出會被清除，如圖 1 處，就連瀏覽器的偵錯也會被清除，如圖 2 處。

參考資料

[ developer.mozilla.org ] console: clear()

 關於顯示偵錯訊息

前言

  JavaScript 提供很多顯示偵錯訊息的方法，之前都只使用 console.log() ，這次把其它的做個學習，在此在個紀錄。

內容

   JavaScript 提供顯示偵錯訊息有 console.log() 、 console.info() 、 console.error() 、console.debug() 與 console.warn() ，參數都是直接填寫要顯示的訊息即可，範例如下

console.debug('debug');
console.log('log');
console.info('info');
console.error('error');
console.warn('warn');

執行結果如下

範例執行結果

一般的 console 都會顯示這五個的結果，差別在於瀏覽器自帶的偵錯器，可以圖中右下看到可以依據不同的群組來顯示訊息， Verbose 群組代表了 console.debug() ， Info 群組裡包含了 console.log() 與 console.info() ，Warnings 群組代表了 console.warn() ， Errors 群組代表了 console.error() ，可以根據欲顯示群組來顯示結果。

參考資料

[ developer.mozilla.org ] console: log()

[ developer.mozilla.org ] console: info()

[ developer.mozilla.org ] console: error()

[ developer.mozilla.org ] console: debug()

[ developer.mozilla.org ] console: warn()

 初探 console.groupCollapsed()

前言

  在先前的 初探 console.group() 可以在瀏覽器的偵錯中摺疊訊息，但一定是展開狀態，能一開始就是縮起來狀態嗎?在此把學習的過程做個紀錄。

內容

  範例如下

console.groupCollapsed( 'MyGroup' );
for(let i=0;i<10;i++)
  console.log(i);
//
console.groupEnd( 'MyGroup' );

執行結果如下

範例執行結果

要預設是縮起來的狀態，只要將原本的 console.group() 換成 console.groupCollapsed() 即可，一樣適用參數分群，一樣是用 console.groupEnd() 做搭配即可。

參考資料

[ developer.mozilla.org ] console.groupCollapsed()

相關文章與資料

初探 console.group()