空合并 (??)
我們大多數人都看過||運算符在 JS 中,可以與任何字段一起使用,以便在字段為 null 時獲取此運算符后面的值。
在上面的示例中,您可以看到,如果第一個值看漲,它將采用第二個值。但是,如果您看到上面的最后一種情況,則在上述情況下,0 也將被視為負值,并且它將采用默認值。在 0 是有效值的情況下,這不是您可能需要的。在這些情況下,可以使用空合并算子:??
可選鏈接 (?.)
如果您正在訪問內部屬性,并且不知道父值是否存在,則通常會使用 if 或 && 進行檢查,如下所示:
與上面包含所有檢查和條件的冗長代碼不同,您可以使用可選的鏈接將代碼減少相當多的代碼。
這也可以在調用方法或訪問數組中的索引時使用:
對象速記
通常,如果要創建值對象,則應按如下所示的方式創建它:
現在,如果字段名稱相同,您可以將上面的代碼替換為下面的代碼,它將具有相同的行為。
設置控制臺日志樣式
通常,您只需要執行控制臺.log它將以默認模式打印它:
但是,您可以向控制臺日志添加樣式,以使某些日志從其他日志中脫穎而出。您可以添加 %c 運算符并將樣式添加為第二個參數。
使用延遲在 HTML 的頭部加載腳本
因此,通常情況下,當您要在HTML文件中加載腳本時,您不希望將其包含在head標記中,因為這會在DOM加載元素之前首先加載JS。因此,如果您對元素進行任何樣式更改,它們將不會顯示出來。
在上面的示例中,我將腳本加載到 head 中。該腳本正在更改按鈕的背景色,但由于腳本在DOM元素之前加載,因此它將顯示錯誤并且不會加載樣式。
因此,為了解決這個問題,理想情況下,您將腳本加載到HTML文件的正文中,最好是在文件末尾。但是,在加載DOM之后,這將導致很多延遲,在此期間將加載腳本。這不會是一個好的用戶體驗。
相反,您可以在頭部的腳本標記中使用單詞deefer,JS將在DOM中加載元素后負責加載腳本。