原文連結：https://medium.com/javascript-in-plain-english/11-frontend-tricks-that-most-frontend-developers-dont-know-about-68dc48199ed6

作者：DanielAnderson

如有翻譯不準確，請多指正。

今天要為大家介紹的，是許多前端開發者都不知道的一些

HTML/CSS/JavaScript小技巧。希望其中涉及到你知識盲點的小技巧，能夠幫助你提升前端開發效率。

1、datalist 元素

你幾乎看不到Datalistelement這個HTML元素在使用，它的使用頻率極低，今天我們就要為它正名。

<datalist標籤被用於為<input>元素提供“自動補全”的功能，在程式設計的時候，你會看到如同下面這個預定義選項的下拉選單一樣的效果。

示例如下：

<datalist>的id屬性（注意上面的粗體部分）必須與列表中的<input>屬性等同，他們二者需要捆綁使用。

示例如下：

3、子選擇器

這可能是我今天分享的清單中，最為熟知的一個前端開發小技巧了，但很多朋友並沒有意識到它強大的能量。

子選擇器用於匹配，作為指定元素子元素的所有元素，它能夠給出兩個元素之間的關係。

示例如下：

4、寫作模式

寫作模式是一項鮮為人知，卻非常強大的CSS屬性。它允許文字垂直執行，就像這樣——

它的程式碼設定也非常簡單。

完整例項如下：

<writing-mode>屬性提供了5個可能的選項。

5、Calc（）函式

<calc()>css函式可以允許在指定CSS屬性值的前提下進行計算。

Cale（）最有用的功能就是，它可以混合單位，比如百分比和畫素。沒有預處理器有能力做到這一點，只是在渲染的過程中執行。

例項如下：

6、Math.round 和 Math.floor 的替代方案

或許這不是一個很容易理解的技巧，但很酷。

<Math.floor（）>你可以使用<0丨>

<Math.round（）>你可以使用<+.5丨0>

7、Console.table

希望你已經聽說過並使用過console.log（），但你可能還沒有使用過接受陣列或物件的console.table（）。這樣會以非常整潔的方式在console檢視中顯示一個表格。

陣列列表：

console.table()

8、Console.time

這是另一個實用的控制檯方法。<console.time（）>啟動一個計時器，以引數作為標籤。然後，你使用和console.timeEnd()相同的標籤名稱，控制檯將從你呼叫console.time()和console.timeEnd()中，以毫秒為單位輸出。

Console.time（）

示例如下：

9、In 運算子

“In”運算子，可以檢查陣列中是否存在索引，並且將返回true或false。

示例如下：

你也可以檢查物件中是否存在某項屬性。

示例如下：

10、將 Chrome 作為文字編輯器

這個屬性在列表中可能非常隨機，如果你在網址欄中輸入下面的內容，然後按下回車鍵，它將會把Chrome變成記事本形式。

11、在IF程式碼塊中，去掉多個語句之間的大括號

我不會使用這個實際的生產程式碼，但還有很多人不知道它。這一技巧的靈魂，就在逗號上。

結語

以上所有的技巧可能不是最實用的，但其中的某一些技巧在前端開發中可能可以幫你提升前端開發效率。我也十分確信，一定還有更多實用的技巧等待你去發現！