ECMAScript發展程序中，會有很多功能的更新，比如銷燬，箭頭功能，模組，它們極大的改變JavaScript編寫方式，可能有些人喜歡，有些人不喜歡，但像每個新功能一樣，我們最終會習慣它們。新版本的ECMAScript引入了三個新的邏輯賦值運算子：空運算子，AND和OR運算子，這些運算子的出現，也是希望讓我們的程式碼更乾淨簡潔，下面分享幾個優雅的JavaScript運算子使用技巧
一、可選連結運算子【？。】
可選連結運算子（Optional Chaining Operator）
處於ES2020提案的第4階段，因此應將其新增到規範中。它改變了訪問物件內部屬性的方式，尤其是深層巢狀的屬性。它也可以作為TypeScript 3。7+中的功能使用。
相信大部分開發前端的的小夥伴們都會遇到null和未定義的屬性。JS語言的動態特性使其無法不碰到它們。特別是在處理巢狀物件時，以下程式碼很常見：
if （data && data。children && data。children［0］ && data。children［0］。title） { // I have a title！}
上面的程式碼用於API響應，我必須解析JSON以確保名稱存在。但是，當物件具有可選屬性或某些配置物件具有某些值的動態對映時，可能會遇到類似情況，需要檢查很多邊界條件。
這時候，如果我們使用可選連結運算子，一切就變得更加輕鬆了。它為我們檢查巢狀屬性，而不必顯式搜尋梯形圖。我們所要做的就是使用“？” 要檢查空值的屬性之後的運算子。我們可以隨意在表示式中多次使用該運算子，並且如果未定義任何項，它將盡早返回。
對於靜態屬性
用法是：
object？。property
對於動態屬性
將其更改為：
object？。［expression］
上面的程式碼可以簡化為：
let title = data？。children？。［0］？。title；
然後，如果我們有：
let data；console。log（data？。children？。［0］？。title） // undefineddata = {children： ［{title：‘codercao’}］}console。log（data？。children？。［0］？。title） // codercao
這樣寫是不是更加簡單了呢？由於運算子一旦為空值就會終止，因此也可以使用它來有條件地呼叫方法或應用條件邏輯
const conditionalProperty = null；let index = 0；console。log（conditionalProperty？。［index++］）； // undefinedconsole。log（index）； // 0
對於方法
的呼叫你可以這樣寫
object。runsOnlyIfMethodExists？。（）
例如下面的
parent
物件，如果我們直接呼叫
parent。getTitle（）
，則會報
Uncaught TypeError： parent。getTitle is not a function
錯誤，
parent。getTitle？。（）
則會終止不會執行
let parent = { name： “parent”， friends： ［“p1”， “p2”， “p3”］， getName： function（） { console。log（this。name） } }； parent。getName？。（） // parent parent。getTitle？。（） //不會執行
與無效合併一起使用
提供了一種方法來處理未定義或為空值和表達提供預設值。我們可以使用
？？
運算子，為表示式提供預設值
console。log（undefined ？？ ‘codercao’）； // codercao
因此，如果屬性不存在，則可以將無效的合併運算子與可選連結運算子結合使用以提供預設值。
let title = data？。children？。［0］？。title ？？ ‘codercao’；console。log（title）； // codercao
二、邏輯空分配（？？ =）
expr1 ？？= expr2
邏輯空值運算子僅在空值（
null
或者
undefined
）時才將值分配給expr1，表達方式：
x ？？= y
可能看起來等效於：
x = x ？？ y；
但事實並非如此！有細微的差別。
空的合併運算子（？？）從左到右操作，如果x不為空，則短路。因此，如果x不為
null
或者
undefined
，則永遠不會對錶達式
y
進行求值。因此，如果
y
是一個函式，它將根本不會被呼叫。因此，此邏輯賦值運算子等效於
x ？？ （x = y）；
三、邏輯或分配（|| =）
此邏輯賦值運算子僅在左側表示式為
falsy值
時才賦值。Falsy值與null有所不同，因為falsy值可以是任何一種值：undefined，null，空字串（雙引號“”、單引號’’、反引號``），NaN，0。IE瀏覽器中的 document。all，也算是一個。
語法
x ||= y
等同於
x || （x = y）
在我們想要保留現有值（如果不存在）的情況下，這很有用，否則我們想為其分配預設值。例如，如果搜尋請求中沒有資料，我們希望將元素的內部HTML設定為預設值。否則，我們要顯示現有列表。這樣，我們避免了不必要的更新和任何副作用，例如解析，重新渲染，失去焦點等。我們可以簡單地使用此運算子來使用JavaScript更新HTML：
document。getElementById（‘search’）。innerHTML ||= ‘No posts found matching this search。’
四、邏輯與分配（&& =）
可能你已經猜到了，此邏輯賦值運算子僅在左側為真時才賦值。因此：
x &&= y
等同於
x && （x = y）
