英文來源 | https://javascript.plainenglish.io/7-killer-javascript-snippets-dbe49a9ccf11

由于 JavaScript 簡潔明了的語法贏得了眾多開發(fā)者的青睞，越來越多的開發(fā)者開始使用它。今天，我將向您介紹 7 個殺手級 JavaScript 代碼片段，每個片段都有對應的圖像和 StackBlitz，您可以在其中修改和查看結果。

這些代碼片段不僅可以提高我們的開發(fā)效率，而且在某些情況下甚至可以替換額外的第三方庫，使我們的應用程序更輕、性能更好。

所以，讓我們開始吧！

1、4種方式將HTML String轉為DOM

我們可以使用 ES6 提供的模板字面量（模板字符串）來編寫 HTML 字符串，這樣我們就可以將這些變量嵌入到 HTML 中，然后，通過下面的函數將這些字符串轉換成真實的 DOM。通常在 3D 或地圖中，這種動態(tài) DOM 非常有用。

代碼地址：https://stackblitz.com/edit/js-1pnjkv

2、格式化字節(jié)

當我們想將字節(jié)轉換為可讀文本時，下面的代碼可能會對您有所幫助。

代碼地址：https://stackblitz.com/edit/js-qknebm

3、用 4 種方式格式化貨幣

太多的錢，也會成為有錢人的煩惱，哈哈，我也想有這樣的煩惱，有錢人的煩惱，下面的代碼會讓你擺脫這樣的煩惱！

代碼地址：https://stackblitz.com/edit/js-9db5qu

4、將URL參數轉換為對象

當我們想從 URL 獲取參數時，但瀏覽器或 Node.js 似乎沒有提供類似的便捷方法。下面的代碼可以滿足我們的需求，它還支持重復鍵（將成為數組）。

代碼地址：https://stackblitz.com/edit/js-mp9111

5、近乎完美的深拷貝

當我們?yōu)?JavaScript 為何不提供原生深拷貝功能而發(fā)愁時，下面的深拷貝功能考慮了幾乎各種極端情況，足以讓我們面對復雜的需求。

代碼地址：https://stackblitz.com/edit/js-i1xfmd

6、獲取對象給定路徑的值

代碼地址：https://stackblitz.com/edit/js-npurgf

7、按功能分組數組

根據某些特征對數組進行分組在某些場景中可能很有用。

代碼地址：https://stackblitz.com/edit/js-cjkat7

總結

以上就是我今天給你分享的7個關于JavaScript的代碼段，希望對你有用。

感謝你的閱讀，祝編程愉快！

學習更多技能

請點擊下方公眾號