」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 你應該知道的 JavaScript 技巧

你應該知道的 JavaScript 技巧

發佈於2024-11-06
瀏覽:811

蔡喬佈撰寫

1. 控制台.log

  • 為控制台日誌新增顏色

別再這樣了! ❌

avascript Tips You Should Know

avascript Tips You Should Know
試試這個吧。 ✅

avascript Tips You Should Know

avascript Tips You Should Know
但如果你有一個物件數組,嘗試這個會更好嗎?

avascript Tips You Should Know

avascript Tips You Should Know
如果您想測量程式碼中某些操作的運行速度,請嘗試此操作。

avascript Tips You Should Know

avascript Tips You Should Know
執行console.time和console.timeEnd來測量瀏覽器控制台中花費的時間。
最後,如果您想追蹤程式碼及其執行順序,請嘗試這個。

avascript Tips You Should Know

avascript Tips You Should Know
您將能夠看到調試應用程式所需的大量資訊。

2. 對象解構

avascript Tips You Should Know
您以前是否遇到過這樣的情況:您只需要物件中的幾個變量,但您正在傳遞完整的物件並以這種傳統方式使用它?

avascript Tips You Should Know
在你的函數中重複使用人類物件宣告?不要這樣做。請改用 ES6 物件解構。 ✅

avascript Tips You Should Know
解構函數參數中需要使用的變數。或者,您可以在函數本身內部進行解構。

avascript Tips You Should Know

3. 模板文字

❌ 當您嘗試用字串拼接變數時不要這樣做。

avascript Tips You Should Know
改為執行此操作。 ✅
avascript Tips You Should Know

4. 擴充運算符

假設您有 2 個對象,並且您想要將它們組合起來或將 1 個對象的某些屬性分配給另一個對象。傳統上,我們會這樣做。
avascript Tips You Should Know
從技術上講,這沒有什麼問題,只是你實際上是在改變你的對象。試試這個吧。 ✅
avascript Tips You Should Know
擴充運算子最好的一點是它也適用於陣列。 ?
而不是這個。
avascript Tips You Should Know
改為執行此操作。
avascript Tips You Should Know

5. 循環

您是否因以這種方式進行 for 迴圈來計算數組中的成本總額而感到內疚?別再這樣做了。 ❌
avascript Tips You Should Know
開始改變你的風格。
avascript Tips You Should Know
乾淨又精瘦。工作完成了! ✅

概括

希望這些技巧能引導您編寫更好、更乾淨、更精簡的程式碼。

由 MarsCode 贊助
歡迎加入我們的 Discord 與我們討論您的想法。

avascript Tips You Should Know

火星密碼

MarsCode 提供人工智慧驅動的 IDE 和人工智慧擴充來協助您完成程式設計任務。
版本聲明 本文轉載於:https://dev.to/marscode/5-javascript-tips-you-should-know-23db?1如有侵犯,請聯繫[email protected]刪除
最新教學 更多>
  • 如何干淨地刪除匿名JavaScript事件處理程序?
    如何干淨地刪除匿名JavaScript事件處理程序?
    刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性,但是當要刪除它們時,可以構成挑戰,而無需替換元素本身就可以替換一個問題。 element? element.addeventlistener(event,function(){/在這里工作/},false); 要解決此問題,請考...
    程式設計 發佈於2025-03-12
  • HTML格式標籤
    HTML格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2025-03-12
  • 大批
    大批
    [2 數組是對象,因此它們在JS中也具有方法。 切片(開始):在新數組中提取部分數組,而無需突變原始數組。 令ARR = ['a','b','c','d','e']; // USECASE:提取直到索引作...
    程式設計 發佈於2025-03-12
  • 我如何在C#/。網中合併兩個圖像,以保持透明度的同時以較大圖像的形式居中?
    我如何在C#/。網中合併兩個圖像,以保持透明度的同時以較大圖像的形式居中?
    在c#/。 net中合併圖像:綜合指南 通過在各種域上組合多個域中的常見可視化的可吸引人的工作。在c#/。網絡中,此合併過程涉及使用強大的圖形API及其關聯的類。 假設您有兩個圖像:透明的500x500 image(imagea)和150x1150 image(Imageb)。您的目標是合併這些圖...
    程式設計 發佈於2025-03-12
  • 版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    在時間戳列上使用current_timestamp或MySQL版本中的current_timestamp或在5.6.5 此限制源於遺留實現的關注,這些限制需要對當前的_timestamp功能進行特定的實現。 創建表`foo`( `Productid` int(10)unsigned not ...
    程式設計 發佈於2025-03-12
  • 如何使用不同數量列的聯合數據庫表?
    如何使用不同數量列的聯合數據庫表?
    合併列數不同的表 當嘗試合併列數不同的數據庫表時,可能會遇到挑戰。一種直接的方法是在列數較少的表中,為缺失的列追加空值。 例如,考慮兩個表,表 A 和表 B,其中表 A 的列數多於表 B。為了合併這些表,同時處理表 B 中缺失的列,請按照以下步驟操作: 確定表 B 中缺失的列,並將它們添加到表的...
    程式設計 發佈於2025-03-12
  • PHP陣列鍵值異常:了解07和08的好奇情況
    PHP陣列鍵值異常:了解07和08的好奇情況
    PHP數組鍵值問題,使用07&08 在給定數月的數組中,鍵值07和08呈現令人困惑的行為時,就會出現一個不尋常的問題。運行print_r($月份)返回意外結果:鍵“ 07”丟失,而鍵“ 08”分配給了9月的值。 此問題源於PHP對領先零的解釋。當一個數字帶有0(例如07或08)的前綴時,PHP...
    程式設計 發佈於2025-03-12
  • 為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,輸出...
    程式設計 發佈於2025-03-12
  • 如何在Java字符串中有效替換多個子字符串?
    如何在Java字符串中有效替換多個子字符串?
    在java 中有效地替換多個substring,需要在需要替換一個字符串中的多個substring的情況下,很容易求助於重複應用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    程式設計 發佈於2025-03-12
  • Python讀取CSV文件UnicodeDecodeError終極解決方法
    Python讀取CSV文件UnicodeDecodeError終極解決方法
    在試圖使用已內置的CSV模塊讀取Python中時,CSV文件中的Unicode Decode Decode Decode Decode decode Error讀取,您可能會遇到錯誤的錯誤:無法解碼字節 在位置2-3中:截斷\ uxxxxxxxx逃脫當CSV文件包含特殊字符或Unicode的路徑逃...
    程式設計 發佈於2025-03-12
  • 如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    postgresql:為每個唯一標識符在postgresql中提取最後一行,您可能需要遇到與數據集合中每個不同標識的信息相關的信息。考慮以下數據:[ 1 2014-02-01 kjkj 在數據集中的每個唯一ID中檢索最後一行的信息,您可以在操作員上使用Postgres的有效效率: id dat...
    程式設計 發佈於2025-03-12
  • 如何修復\“常規錯誤:2006 MySQL Server在插入數據時已經消失\”?
    如何修復\“常規錯誤:2006 MySQL Server在插入數據時已經消失\”?
    How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction:Inserting data into a MySQL database can...
    程式設計 發佈於2025-03-12
  • 為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    網格超過身體,用100%grid-template-columns 為什麼在grid-template-colms中具有100%的顯示器,當位置設置為設置的位置時,grid-template-colly修復了? 問題: 考慮以下CSS和html: class =“ snippet-code”> ...
    程式設計 發佈於2025-03-12
  • 為什麼不使用CSS`content'屬性顯示圖像?
    為什麼不使用CSS`content'屬性顯示圖像?
    在Firefox extemers屬性為某些圖像很大,&& && && &&華倍華倍[華氏華倍華氏度]很少見,卻是某些瀏覽屬性很少,尤其是特定於Firefox的某些瀏覽器未能在使用內容屬性引用時未能顯示圖像的情況。這可以在提供的CSS類中看到:。 googlepic { 內容:url(&...
    程式設計 發佈於2025-03-12
  • 如何限制動態大小的父元素中元素的滾動範圍?
    如何限制動態大小的父元素中元素的滾動範圍?
    在交互式接口中實現垂直滾動元素的CSS高度限制問題:考慮一個佈局,其中我們具有與用戶垂直滾動一起移動的可滾動地圖div,同時與固定的固定sidebar保持一致。但是,地圖的滾動無限期擴展,超過了視口的高度,阻止用戶訪問頁面頁腳。 $("#map").css({ margin...
    程式設計 發佈於2025-03-12

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3