CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：資料結構

🔍 搜尋結果：資料結構

用於建立 AI/ML 應用程式的最佳開發工具！

我來自世界各地的 DevOps 領域，在加入我現在的公司 SingleStore 之前，AI/ML 世界對我來說是全新的。我加入已經 8 個月了，一切進展得非常順利。從各種部落格、教程、工具等中學習AI/ML 中所有新的很酷的東西。這些要求的工具。順便說一句，我們有很多內容和材料可以開始，但我想看看行業之外還發生了什麼，並做我自己的研究。 正如我所說，已經過去 8 個月了。在我在這裡的整個旅程中，從舉辦網路研討會、在會議上發言，到撰寫有關新興技術趨勢的博客，我偶然發現了一系列不可或缺的工具。在本文中，我將分享這些工具，從新興程式語言到 AI 框架，再到向量資料庫，再到簡化 AI/ML 應用程式建立的開發工具。***讓我們開始吧。*** 1. 程式語言 ------- ### [翅膀](https://git.new/winglang) ![只是一個翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pyqzc2vsp6ckovq7j7p.png) 我嘗試使用多種語言，但發現大多數語言都被誇大了。是的，就在那時，我遇到了一個正在討論這種為雲端和人工智慧應用程式設計的新語言的社群。那是我第一次嘗試 Wing 程式語言，發現它令人印象深刻。 你可能會問 - 為什麼是 Wing？ Wing 提供了一個統一的程式設計模型，將基礎架構和應用程式程式碼整合到一個有凝聚力的框架內。這種獨特的方法使開發人員能夠簡化他們的工作流程，消除不斷切換情境的需要，並顯著提高生產力和創造力。 這正是您在建立 AI/ML 應用程式時所需要的，更專注於核心功能而不是底層基礎設施。我遇到了他們的 Open AI Joker 應用程式，它可以產生笑話並將其翻譯成不同的語言。整個框架的流暢程度令人驚嘆。請注意，Wing 仍在積極開發中。 您可以使用最少的程式碼建立任何 AI/ML 應用程式。讓我們看看 Joker 應用程式是如何運作的。該應用程式使用 OpenAI 生成笑話並將其翻譯成不同的語言。有一個喜劇演員，一個開放人工智慧助手，可以產生笑話，每當它生成笑話時，笑話就會被放入/儲存在一個桶中。有兩個譯者，西班牙語和希伯來語。這些譯者訂閱一個主題。每當有笑話產生時，他們都會收到並翻譯。而且，他們也把翻譯好的笑話丟進桶裡了。很簡單。 以下是此範例的技術概述圖，展示如何將[OpenAI 的 API 與 Wing](https://github.com/winglang/examples/tree/main/examples/openai-joker)結合使用。 ![翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5chcap4ufyxnv6aef9m.png) 如果您還沒有嘗試過 Winglang，您可以透過簡單的命令輕鬆嘗試 ``` npm install -g winglang ``` 使用 git clone 指令將程式碼複製到本機 ``` git clone https://github.com/winglang/wing.git ``` 轉到範例資料夾，然後在終端機中執行以下命令： ``` npm install wing it ``` 呼叫“START HERE”函數，並在“Joke Store”中查看結果。 2.向量資料儲存與分析工具 ------------- ### SingleStore 和筆記本 ![單一儲存資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/migeuz23bst8l2s445i4.jpeg) 對於 AI/ML 應用程式，您需要一個資料庫來儲存非結構化資料。我大約 8 個月前加入 SingleStore，當時我對 AI/ML 和向量資料庫還是個新手。隨著圍繞向量資料庫的大肆宣傳，我開始了解向量資料庫，並發現 SingleStore 作為向量資料庫如何為行業帶來驚人的補充。它不僅用於儲存向量資料，而且該公司還使用 SingleStore 進行即時分析。現在，看看支援即時分析的向量資料儲存的力量，這是一種超級力量。 下面我要來跟大家介紹一下SingleStore；它是一個基於雲端的資料庫管理系統（RDBMS），專為資料密集型應用程式而設計。它以其資料攝取、事務處理和查詢處理的速度而聞名。 SingleStore 早在 2017 年就開始支援向量儲存。 SingleStore 的 Notebook 功能基於流行的 Jupyter Notebook，廣泛應用於資料科學和機器學習社群。 SingleStore Notebook 擴展了 Jupyter Notebook 的功能，使資料專業人員能夠輕鬆使用 SingleStore 的分散式 SQL 資料庫，同時在語言和資料來源方面提供出色的可擴充性。 [試試 SingleStore 並獲得價值 600 美元的免費積分](https://www.singlestore.com/cloud-trial/?utm_medium=referral&utm_source=pavan&utm_term=devto&utm_content=aimltools)。 3. 資料操作與分析工具 ------------ 我只是喜歡處理資料並使用公開的資料集（例如葡萄酒資料集、泰坦尼克號資料集等）進行不同的實驗。我著迷地看到 NumPy 和 Pandas 在資料探索和提出不同解決方案方面的能力。 Pandas 和 NumPy 是 Python 生態系統中用於資料分析和科學計算的兩個最受歡迎的函式庫。 ### 熊貓和 NumPy ![熊貓和 numpy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl8ez8r05a61wcy9zaze.png) 任何 AI/ML 應用程式的核心都是資料。 Pandas 和 NumPy 等工具是 Python 中資料操作和分析的基礎。 Pandas 提供了用於操作數值表和時間序列的高級資料結構和操作，使其成為在用於訓練模型之前預處理和清理資料的理想選擇。 NumPy 增加了對大型多維陣列和矩陣的支持，以及對這些陣列進行操作的大量數學函數的支持，這對於資料預處理和模型訓練中的效能密集型操作至關重要。 4. 人工智慧與機器學習框架 -------------- 我使用過 TensorFlow、PyTorch，最近接觸過 LangChain 和 LlamaIndex，對它們幫助 AI/ML 工程師使用 API、向量儲存功能、邏輯、推理等建立強大應用程式所需的所有工具包的能力印象深刻。讓我們一一來看看他們的超能力。 ### TensorFlow 和 PyTorch ![pytorch中的tensonflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23wl305qjftx5y33ewvt.png) 由 Google 開發的[TensorFlow](https://www.tensorflow.org/)和由 Facebook 開發的[PyTorch](https://pytorch.org/)是用於建立和訓練複雜機器學習模型的兩個最受歡迎的框架。 TensorFlow 以其靈活性和強大的可擴展性而聞名，使其適用於研究原型和生產部署。 PyTorch 因其易用性、簡單性和動態計算圖而受到讚譽，可以更直觀地編碼複雜的 AI 模型。這兩個框架都支援廣泛的人工智慧模型，從簡單的線性回歸到複雜的深度神經網路。 ### 浪鏈 ![浪鏈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy5mcfwl843zlrte6x0b.png) [LangChain](https://www.langchain.com/)由 Harrison Chase 開發，於 2022 年 10 月首次亮相，它是一個開源平台，旨在建立由大型語言模型支援的強大應用程式，例如 ChatGPT 等聊天機器人和各種客製化應用程式。 Langchain 致力於為資料工程師提供一個包羅萬象的工具包，以便在聊天機器人、自動問答、文字摘要等各種用例中利用法學碩士。 ### 駱駝指數 ![駱駝指數](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tgndtlwx6emah2k6s2h.png) [LlamaIndex](https://www.llamaindex.ai/)是一種先進的編排框架，旨在增強 GPT-4 等 LLM 的功能。雖然法學碩士本質上很強大，並且接受過大量公共資料集的培訓，但他們通常缺乏與私有或特定領域資料互動的方法。 LlamaIndex 彌補了這一差距，提供了一種結構化的方式來攝取、組織和利用各種資料來源——包括 API、資料庫和 PDF。透過將這些資料索引為針對法學碩士最佳化的格式，LlamaIndex 促進了自然語言查詢，使用戶能夠無縫地與其私有資料進行對話，而無需重新訓練模型。 5.深度學習模型 -------- 作為初學者，我一直在尋找簡單而靈活的東西來開發深度學習模型，就在那時我發現了 Keras。許多 AI/ML 專業人士欣賞[Keras](https://keras.io/)在原型設計和開發深度學習模型方面的簡單性和高效性，使其成為首選，特別是對於初學者和需要快速開發的專案。 ### 難的 ![難的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqtk1tp1berno2yie8u7.png) 對於尋求高級神經網路 API 的開發人員來說，現在已整合到 TensorFlow 中的 Keras 提供了更簡單的介面來建立和訓練深度學習模型。 Keras 抽象化了建構神經網路的大部分複雜性，使其易於初學者使用，同時仍足夠強大以進行研究。 6. 開發和版本控制平台 ------------ ### GitHub 和 DVC ![DVC套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1tx82df0xei0m5qwpk3.png) 由於模型開發的迭代性質和對可重複性的需求，協作和版本控制在 AI/ML 開發專案中至關重要。 [GitHub](https://github.com/)是領先的原始碼管理平台，允許團隊協作處理程式碼、追蹤問題和管理專案里程碑。 [DVC（資料版本控制）](https://dvc.org/)透過處理 Git 無法有效管理的大型資料檔案、資料集和機器學習模型來補充 Git，從而實現對 AI 專案中使用的資料和模型檔案的版本控制。 7. AI模型部署與監控 ------------ 我建立了一些 AI/ML 應用程式，但是如何以及在哪裡部署它們？這就是我的想法跳到這個類別中的兩個主要工具：Docker 和 Kubernetes。正如我之前所說，我來自世界各地的 DevOps 地區，我已經使用過這些工具，並且知道它們是如何運作的。 Docker 將您的應用程式容器化，而 Kubernetes 用於大規模部署您的應用程式。 ### Docker 和 Kubernetes ![Docker 和 Kubernetes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thj4mvioz76tja3ew3iw.png) 將人工智慧模型部署到生產中需要能夠打包應用程式並大規模管理它們的工具。 [Docker](https://www.docker.com/)透過容器化AI應用程式來簡化其部署，確保應用程式在任何環境中順利執行。 [Kubernetes](https://kubernetes.io/)是 Docker 容器的編排系統，可以自動部署、擴展和管理容器化應用程式，這對於需要跨多個伺服器或雲端環境進行擴展的 AI 應用程式至關重要。 8.人工智慧雲端平台 ---------- 如果沒有 AWS、Google 和 Azure 等雲端平台，您就無法擴展任何東西。雖然 AWS 是我最喜歡的，但我也探索了其他選項，並在此提到了所有三個主要雲端供應商。 ### AWS、Google雲端和 Azure ![雲端提供者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jtvbfzk003t5jxi9ghi.png) Amazon Web Services (AWS)、Google Cloud Platform (GCP) 和 Microsoft Azure 等雲端平台提供了一系列 AI 和機器學習服務，這些服務抽象化了訓練和部署 AI 模型所需的大部分基礎架構。這些平台為機器學習模型訓練、部署和監控提供託管服務，以及可擴展以滿足任何人工智慧專案需求的大量運算資源。 9. 專門的人工智慧開發工具 -------------- 雖然我仍然更喜歡使用 SingleStore Notebook 功能，但我知道大多數人已經在使用 Jupyter Notebook 進行資料探索和分析。我有時會使用 Jupyter Notebooks，另一個更有趣的工具是 MLflow，它將幫助您完成端到端的 ML 工作流程。 ### Jupyter 筆記本 ![Jupyter筆記本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/411i9cumaafb3un5viqi.png) 對於探索性資料分析、模型開發和文件編制，Jupyter Notebooks 是不可或缺的工具。它們允許開發人員建立和共享包含即時程式碼、方程式、視覺化和敘述文字的文件，使其成為協作人工智慧研究和開發的絕佳工具。 ### ML流 ![毫升流工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nabnjklq1e07x8kc1vr.png) [MLflow](https://mlflow.org/)是一個用於管理端對端機器學習生命週期的開源平台。它包括實驗追蹤、模型版本控制和部署等功能，使開發人員能夠追蹤和比較實驗、將模型打包成可重複的執行，以及管理跨多個環境的模型部署。 ### 最後的一些想法 人工智慧/機器學習領域正在像海洋一樣不斷發展。每天我們都會看到一種或另一種語言模型帶著許多期望首次亮相。有許多令人驚嘆的開發工具仍然可以包含在這個清單中，但從我個人的經驗來看，我相信這些工具是每個 AI/ML 工程師開始建立他們的 AI/ML 應用程式的良好開端。 讓我知道您目前在 AI/ML 領域最喜歡的工具是什麼。 --- 原文出處：https://dev.to/pavanbelagatti/my-favorite-devtools-to-build-aiml-applications-3c0c

0個讚   0留言 30瀏覽

我們在使用 Rust 建構 SaaS 時學到了什麼

在這篇文章中，我們**不會**回答每個人在開始新專案時都會問的問題：**我應該用 Rust 來做嗎？** ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNHQwOTl6Ym5odmVmNDZpdzVmZG9mMW9yd2tmN2lyZ2NzOWNxc2MxMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l83rkRUu4IqyUbt5k6/giphy.gif) 相反，我們將探索在自信地回答「**絕對！** 」並開始主要使用 Rust 建立業務後遇到的陷阱和見解。 這篇文章旨在提供我們經驗的高層次概述，我們將在即將推出的系列中更深入地研究細節。 （在評論中為我們的下一篇文章投票🗳️） --- 為什麼生鏽 ----- 為專案選擇正確的語言從來不是一個一刀切的決定。 關於我們的團隊和用例的幾句話： - 我們是一個 6 人團隊，幾乎沒有 Rust 經驗，但擁有建立資料密集型應用程式的豐富 Scala/Java 背景 - 我們的 SaaS 是一個計費平台，專注於分析、即時資料和可操作的見解（想想 Stripe Billing 與 Profitwell 的結合，再加上一點 Posthog）。 - 我們的後端完全採用 Rust（分為 2 個模組和幾個工作線程），並使用 gRPC-web 與我們的 React 前端進行對話 > 我們是開源的！ > 您可以在這裡找到我們的儲存庫：https://github.com/meteroid-oss/meteroid > 我們期待您的支持 ⭐ 和貢獻 因此，我們有一些不可協商的要求恰好非常適合 Rust：**效能、安全性和並發性**。 Rust 實際上消除了與記憶體管理相關的所有 bug 和 CVE，而它的並發原語非常有吸引力（並且沒有讓人失望）。 在 SaaS 中，所有這些功能在處理敏感或關鍵任務時尤其有價值，例如我們案例中的計量、發票計算和交付。 正如[包括微軟在內的](https://mspoweruser.com/microsoft-forms-new-team-to-help-rewrite-core-windows-components-into-rust-from-c-c/)許多大型企業最近所承認的那樣，其記憶體使用量的顯著減少也是建立可擴展和**永續**平台的一大優勢。 來自戲劇性的、有時有毒的 Scala 社區，**熱情且包容的**Rust 生態系統也是一個重要的吸引力，為探索這個新領域提供了動力。 帶著這樣的厚望，讓我們開始我們的旅程吧！ --- 第 1 課：學習曲線是真的 ------------- 學習 Rust 並不像學習另一種語言。所有權、借用和生命週期等概念一開始可能會讓人望而生畏，使得原本瑣碎的程式碼變得極其耗時。 儘管生態系統令人愉快（稍後會詳細介紹），但有時**您不可避免地需要編寫較低層級的程式碼**。 例如，考慮我們的 API (Tonic/Tower) 的一個相當基本的中間件，它只報告計算持續時間： ``` impl<S, ReqBody, ResBody> Service<Request<ReqBody>> for MetricService<S> where S: Service<Request<ReqBody>, Response = Response<ResBody>, Error = BoxError> + Clone + Send + 'static, S::Future: Send + 'static, ReqBody: Send, { type Response = S::Response; type Error = BoxError; type Future = ResponseFuture<S::Future>; fn poll_ready(&mut self, cx: &mut Context<'_>) -> Poll<Result<(), Self::Error>> { self.inner.poll_ready(cx) } fn call(&mut self, request: Request<ReqBody>) -> Self::Future { let clone = self.inner.clone(); let mut inner = std::mem::replace(&mut self.inner, clone); let started_at = std::time::Instant::now(); let sm = GrpcServiceMethod::extract(request.uri()); let future = inner.call(request); ResponseFuture { future, started_at, sm, } } } #[pin_project] pub struct ResponseFuture<F> { #[pin] future: F, started_at: Instant, sm: GrpcServiceMethod, } impl<F, ResBody> Future for ResponseFuture<F> where F: Future<Output = Result<Response<ResBody>, BoxError>>, { type Output = Result<Response<ResBody>, BoxError>; fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> { let this = self.project(); let res = ready!(this.future.poll(cx)); let finished_at = Instant::now(); let delta = finished_at.duration_since(*this.started_at).as_millis(); // this is the actual logic let (res, grpc_status_code) = (...) crate::metric::record_call( GrpcKind::SERVER, this.sm.clone(), grpc_status_code, delta as u64, ); Poll::Ready(res) } } ``` 是的，除了泛型類型、泛型生命週期和特徵約束之外，您最終還需要為簡單的服務中間件編寫自訂的 Future 實作。 請記住，這是一個有點極端的例子，旨在展示生態系統中存在的粗糙邊緣。*在許多情況下，Rust 最終可以像任何其他現代語言一樣緊湊。* **學習曲線可能會根據您的背景而有所不同。**如果您習慣了 JVM 處理繁重的工作並像我們一樣使用更成熟、更廣泛的生態系統，那麼可能需要付出更多的努力來理解 Rust 的獨特概念和範例。 然而，一旦您掌握了這些概念和原語，它們就會成為您武器庫中極其強大的工具，即使您偶爾需要編寫一些樣板文件或宏，也可以提高您的工作效率。 值得一提的是， [Google 在相當短的時間內成功地將團隊從 Go 和 C++ 過渡到 Rust，](https://www.theregister.com/2024/03/31/rust_google_c)並且取得了積極的成果。 要平滑學習曲線，請考慮以下因素： - **閱讀官方[Rust Book 的](https://doc.rust-lang.org/stable/book/)封面**。不要跳過章節。理解這些複雜的概念將變得容易得多。 - **練習，練習，練習！**透過[Rustlings](https://rustlings.cool/)練習來建立肌肉記憶並採用 Rust 思維方式。 - **參與[Rust 社群](https://www.reddit.com/r/rust/)。**他們是一群令人難以置信的人，總是願意伸出援手。 - **利用 GitHub 的搜尋**功能尋找其他專案並向其學習。生態系統仍在不斷發展，與其他人的合作至關重要（只需注意許可證並始終做出貢獻）。 我們將在下一篇文章中探討一些帶給我們啟發的專案。 --- 教訓 2：生態系仍處於成熟階段 --------------- Rust 的底層生態系統確實令人難以置信，擁有精心設計和維護的庫，並被社區廣泛採用。這些函式庫為建構高效能且可靠的系統奠定了堅實的基礎。 然而，當你在堆疊中向上移動時，事情可能會變得稍微複雜一些。 ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeWNoejRsb2RhaGsybzQwdXJydjJzbHVpNjR6eW9udzdudjlvdWVjdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l2SpOlC7JLROBEkO4/giphy.gif) 例如，在資料庫生態系統中，雖然針對關聯式資料庫存在像[`sqlx`](https://github.com/launchbadge/sqlx)和[`diesel`](https://github.com/diesel-rs/diesel)這樣的優秀函式庫，但對於許多非同步或非關聯式資料庫用戶端來說，情況會更加複雜。這些領域的高品質庫，即使被大公司使用，也往往只有**單一維護者**，導致開發速度較慢並且有潛在的維護風險。 對於分散式系統原語來說，挑戰更為明顯，您可能需要實現自己的解決方案。 這並不是 Rust 所獨有的，但與舊的/更成熟的語言相比，我們經常發現自己處於這種情況。 從好的方面來說， **Rust 的生態系統對安全問題的反應令人印象深刻**，補丁迅速傳播，確保了應用程式的穩定性和安全性。 到目前為止，圍繞 Rust 開發的工具也非常令人驚嘆。 我們將在以後的文章中深入探討我們選擇的函式庫以及我們所做的決定。 生態系統不斷發展，社區積極努力填補空白並提供強大的解決方案。準備好探索未知領域，並相應地分配資源以幫助維護，並回饋社區。 --- ### ……我有沒有提到我們是開源的？ > [Metroid](https://meteroid.com/)是一個現代化的開源計費平台，專注於商業智慧和可操作的見解。 **我們需要你的幫助 ！如果你有一分鐘時間，** [](https://git.new/meteroid) ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZDFvd2M3bnZ4OTF1dzBkcHh1NnlwemY1cTU5NWVjOThoZjU4a2U5biZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XATW2O9w0hrmuIpvtu/giphy.gif) 您的支持對我們意義重大❤️ https://github.com/meteroid-oss/meteroid ⭐️ 在 Github 上為我們加註星標 ⭐️ --- 第 3 課：文件位於程式碼中 -------------- 當深入 Rust 的生態系統時，您很快就會意識到文件網站有時可能有點......好吧，稀疏。 但不要害怕！真正的寶藏往往存在於原始碼中。 許多庫都有**非常詳細的方法記錄，**並**在程式碼註釋中**包含全面的範例。如有疑問，請深入研究原始程式碼並進行探索。您經常會發現您尋求的答案，並對圖書館的內部運作有更深入的了解。 雖然具有使用指南的外部文件仍然很重要，並且可以節省開發人員的時間和挫折感，但在 Rust 生態系統中，準備好在必要時深入研究程式碼至關重要。 像[docs.rs](https://docs.rs)這樣的網站可以輕鬆存取公共 Rust 套件的基於程式碼的文件。或者，您可以使用 Cargo doc 在本機上產生所有依賴項的文件。這種方法一開始可能會令人困惑，但從長遠來看，花一些時間學習如何駕馭這個系統可能會非常有效。 不用說，另一個有用的技術是尋找範例（**大多數庫在其存儲庫中都有一個`/examples`資料夾**）和使用您感興趣的庫的其他專案，並與這些社區互動。這些總是為如何使用該庫提供有價值的指導，並且可以作為您自己實施的起點。 --- 第四課：不要追求完美 ---------- 當開始使用 Rust 時，人們很容易會努力爭取最慣用和最高效能的程式碼。 然而，大多數時候，以簡單性和生產力的名義進行權衡是可以的。 ![做完比求完美強](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fylenuk9pzgynzsvbwpf.png) 例如，使用`clone()`或`Arc`在執行緒之間共享資料可能不是最節省記憶體的方法，但它可以極大地簡化程式碼並提高可讀性。只要您意識到效能影響並做出明智的決策，**優先考慮簡單性是完全可以接受的。** 請記住，過早的優化是萬惡之源。首先專注於編寫乾淨、可維護的程式碼，然後在必要時進行最佳化。**不要嘗試進行微優化（**除非您確實需要）。 Rust 強大的類型系統和所有權模型已經為編寫高效、安全的程式碼提供了堅實的基礎。 當需要優化效能時，請專注於關鍵路徑並使用`perf`和`flamegraph`等分析工具來辨識程式碼中的真正效能熱點。對於工具和技術的全面概述，我可以推薦[The Rust Performance Book](https://nnethercote.github.io/perf-book/introduction.html) 。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyudtxuaeswhtc9porfc.png) **¹**這適用於您的整個創業歷程，包括籌款 --- 第五課：錯誤畢竟是好事 ----------- Rust 的錯誤處理非常優雅，具有`Result`類型和`?`運算符鼓勵明確的錯誤處理和傳播。然而，這不僅涉及處理錯誤；還涉及處理錯誤。它還涉及提供乾淨且資訊豐富的錯誤訊息以及可追蹤的堆疊追蹤。 無需大量樣板在錯誤類型之間進行轉換。 像`thiserror` ， `anyhow`或`snafu`函式庫對於這個目的來說是無價的。我們決定使用`thiserror` ，它可以簡化帶有資訊性錯誤訊息的自訂錯誤類型的建立。 在大多數 Rust 用例中，您不太關心底層錯誤類型堆疊跟踪，而是更喜歡將其直接映射到域中的訊息類型錯誤。 ``` #[derive(Debug, Error)] pub enum WebhookError { #[error("error comparing signatures")] SignatureComparisonFailed, #[error("error parsing timestamp")] BadHeader(#[from] ParseIntError), #[error("error comparing timestamps - over tolerance.")] BadTimestamp(i64), #[error("error parsing event object")] ParseFailed(#[from] serde_json::Error), #[error("error communicating with client : {0}")] ClientError(String), } ``` 投入時間製作清晰且資訊豐富的錯誤訊息可以大大增強開發人員的體驗並簡化偵錯。這是一個小小的努力，卻可以產生顯著的長期效益。 然而，有時，甚至在日誌位於使用者範圍之外的 SaaS 用例中，保留完整的錯誤鏈以及沿途可能有額外的上下文是很有意義的。 我們目前正在試驗[`error-stack`](https://github.com/hashintel/hash/tree/main/libs/error-stack) ，這是一個由 hash.dev 維護的庫，它允許附加額外的上下文並將其保留在整個錯誤樹中。它作為`thiserror`之上的一層效果很好。 它提供了一個慣用的 API，實際上將錯誤類型包裝在報告資料結構中，該資料結構保留了所有錯誤、原因和您可能加入的任何其他上下文的堆疊，在發生故障時提供大量資訊。 我們遇到了一些問題，但這篇文章已經太長了，更多內容將在後續文章中介紹！ 總結 --- 使用 Rust 建立我們的 SaaS 一直是（而且仍然是）一段旅程。一開始是一段漫長而充滿挑戰的旅程，但也是一段非常有趣且有益的旅程。 - **使用 Scala 可以更快地建立我們的產品嗎？** 當然。 - **會有那麼有效嗎？** 或許。 - **我們還會像今天一樣充滿熱情和興奮嗎？** 可能不會。 Rust 促使我們以不同的方式思考我們的程式碼，接受新的範式，並不斷努力改進。 **當然，Rust 也有其粗糙的一面**。學習曲線可能很陡峭，而且生態系統仍在不斷發展。但這是令人興奮的一部分。 除了技術面之外， **Rust 社群也絕對令人高興**。熱情的氛圍、樂於助人的意願以及對語言的共同熱情使這趟旅程變得更加愉快。 ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExazJlZGppYjY5M3RwOG5sdHdudW94dzk4eXczZm5iMmN0YWUzdG10NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/sn39fEb1LcHPGQ4b6h/giphy.gif) 因此，如果您有時間和意願去探索一個新的、蓬勃發展的生態系統，如果您願意接受挑戰並從中學習，如果您需要表現、安全性和並發性，那麼**Rust 可能只是成為適合您的語言**。 對我們來說，我們很高興能夠繼續使用 Rust 建立我們的 SaaS，不斷學習和成長，並看看這段旅程將帶我們走向何方。請繼續關注更深入的帖子，或在第一條評論中投票選出我們下一步應該做的事情。 如果您喜歡這篇文章並發現它有幫助，請不要忘記給[我們的儲存庫](https://github.com/meteroid-oss/meteroid)一顆星！您的支持對我們來說意味著整個世界。 https://github.com/meteroid-oss/meteroid ⭐️ 流星星 ⭐️ 下次見，祝您編碼愉快！ --- 原文出處：https://dev.to/meteroid/5-lessons-learned-building-our-saas-with-rust-1doj

0個讚   0留言 32瀏覽

基本演算法介紹

算法是計算的命脈。它們是電腦解決問題、分析資料和做出決策所遵循的逐步指令。就像食譜一樣，它們將複雜的任務分解為易於管理的程式。理解這些基本演算法是掌握電腦科學和程式設計的基石。 > [什麼是演算法](https://github.com/m-mdy-m/algorithms-data-structures/tree/main/1.IntroductionToAlgorithmsAndProblemSolving) 1. 搜尋演算法： --------- ### 什麼是搜尋？ 搜尋是在資料集合中定位特定元素或專案的基本過程。此資料集合可以採用各種形式，例如陣列、列表、樹或其他結構化表示。搜尋的主要目標是確定資料中是否存在所需元素，如果存在，則辨識其精確位置或檢索它。它在各種計算任務和現實應用中發揮重要作用，包括資訊檢索、資料分析、決策過程等。 ### 介紹搜尋演算法 所有搜尋演算法都使用搜尋關鍵字來繼續執行該過程。搜尋演算法預計會返回成功或失敗狀態，通常以布林 true/false 表示。可以使用不同的搜尋演算法，其效能和效率取決於資料及其使用方式。 線性搜尋演算法被認為是所有搜尋演算法中最基本的。最好的也許是二分搜尋。還有其他搜尋演算法，例如深度優先搜尋演算法、廣度優先演算法等。搜尋演算法中使用的符號是 O(n)，其中 n 是完成的比較次數。它給出了演算法在給定條件下所需執行時間的漸近上限的概念。 搜尋演算法中的搜尋案例可以分為最佳情況、平均情況和最壞情況。在某些演算法中，所有三種情況可能漸近相同，而在其他一些演算法中可能存在很大差異。搜尋演算法的平均行為有助於確定演算法的有用性。 > 摘要： 搜尋演算法是用於在資料集合中定位特定資料的逐步過程。它被認為是計算中的基本過程。在電腦科學中，搜尋資料時，快速應用程式和較慢應用程式之間的差異通常在於使用正確的搜尋演算法。 ### 術語： - **目標元素：**這就是你要尋找的寶藏！這是您想要在集合中尋找的特定資料。想像搜尋電話簿 - 目標元素是特定人的電話號碼。 - **搜尋空間：**將其視為可能隱藏針的大海撈針。它代表您正在搜尋的整個資料集合。這可以是數字陣列、名稱列表或更複雜的資料結構。 - **複雜度：**這是指搜尋演算法所需的工作量。這就像衡量圖書館員需要做多少工作才能找到你的書。複雜性通常以時間（找到目標需要多長時間）和空間（演算法需要多少額外記憶體）來衡量。 - **確定性與非確定性：**搜尋演算法可以像遵循食譜（確定性）或進行有根據的猜測（非確定性）。確定性演算法始終遵循相同的清晰步驟，例如二分搜尋，它將搜尋空間一分為二。非確定性演算法（例如線性搜尋）可能需要在最壞的情況下檢查整個集合。 ### 實際應用 - **資訊檢索：**想像在網路上搜尋特定的食譜。像Google這樣的搜尋引擎利用複雜的搜尋演算法來篩選大量資料集，為網站和內容建立索引。當您輸入查詢時，這些演算法會辨識與您的搜尋字詞最相關的網頁，並在幾分之一秒內提供您要尋找的資訊。 - **資料庫系統：**資料庫儲存大量訊息，從客戶記錄到金融交易。搜尋演算法是高效資料檢索的支柱。當您在資料庫管理系統中提交查詢時，搜尋演算法會快速找到符合您條件的特定記錄，從而節省您的時間和精力。 - **電子商務：**線上購物因高效搜尋而蓬勃發展。電子商務平台使用搜尋演算法來幫助您找到完美的產品。它們允許您根據價格、品牌或顏色等各種標準進行過濾和搜尋。在幕後，搜尋演算法為這些過濾器提供支持，精確定位滿足您偏好的產品，使您的購物體驗順暢高效。 - **網路：**網路是一個由互連設備組成的複雜網路。搜尋演算法在有效路由資料包方面發揮著至關重要的作用。它們可協助確定訊息在網路上傳輸的最佳路徑，確保您的視訊通話或線上遊戲順利運作。 - **人工智慧（AI）：**人工智慧正在為許多領域帶來革命性的變化。搜尋演算法是人工智慧應用的基本工具。它們使人工智慧系統能夠解決問題、做出決策，甚至玩國際象棋等遊戲。透過有效地搜尋大量資料並辨識模式，搜尋演算法有助於人工智慧背後的智慧。 - **模式辨識：**模式辨識允許電腦辨識和理解資料中的模式，例如圖像、語音或手寫。搜尋演算法對於模式辨識很有幫助。它們可協助電腦將新資料與現有模式進行匹配，從而實現照片中的臉部辨識或虛擬助理的語音辨識等應用。 ### 演算法類型： ![](https://www.gatevidyalay.com/wp-content/uploads/2018/07/Searching-Algorithms-Approaches-to-Searching.png) **1. `Linear Search` ：** 想像一下，在一個雜亂無章的書架中尋找一本特定的書。線性搜尋模仿了這種方法。這是一種簡單的方法，可以**逐項**檢查集合中的每個專案，直到找到目標元素（您想要的書）。 **它的工作原理如下：** 1. 搜尋從集合中的第一項開始。 2. 此演算法將目標元素與目前專案進行比較。 ``` * If they match, the search is successful, and the algorithm returns the location (index) of the target element. ``` ``` * If they don't match, the algorithm moves on to the next item in the collection. ``` 3. 這種比較和移動的過程將持續下去，直到找到目標元素或耗盡整個集合。 **例子：** 讓我們在未排序清單中搜尋值「25」：\[10, 4, 12, 25, 18, 7\]。 - 搜尋從第一個元素 (10) 開始。由於 10 不是 25，我們繼續。 - 我們將目標 (25) 與下一個元素 (4) 進行比較。沒有匹配項，所以我們繼續。 - 重複此過程，直到到達索引 3 處的元素「25」。 **優勢：** - 易於理解和實施，使其成為初學者的好選擇。 - 適用於未排序的資料，在各種情況下提供靈活性。 **弱點：** - 對於大型資料集來說速度很慢。隨著集合大小的增加，搜尋時間也會成比例增加，導致海量資料集效率低。 > 怎麼運作的 ： ![](https://media.geeksforgeeks.org/wp-content/cdn-uploads/Linear-Search.png) **2. `Binary Search` ：** 二分搜尋在**排序資料**上蓬勃發展。想像一下在一本精心組織的字典中搜尋特定單字。在這種情況下，二分搜尋比線性搜尋快得多。它透過重複地將已排序的集合分成兩半來進行操作。策略如下： 1. 此演算法首先將目標元素與集合的中間元素進行比較。 2. 如果目標元素等於中間元素，則搜尋成功，演算法會傳回中間元素的索引。 3. 如果目標元素**小於**中間元素，則在剩餘集合的**左半部**（不包括中間元素）繼續搜尋。 4. 如果目標元素**大於**中間元素，則在剩餘集合的**右半部**繼續搜尋。 5. 在集合的縮小範圍的一半上重複步驟 1-4，直到找到目標元素或搜尋空間減少到單一元素（與目標不符）。 **例子：** 讓我們在排序清單中搜尋值「18」：\[4, 7, 10, 12, 18, 25\]。 - 中間的元素是 12。 - 現在，右半部的中間元素是18。目標元素位於索引 4 處。 **優勢：** - 對於大型排序資料集，比線性搜尋快得多。透過在每次比較時消除一半的剩餘元素，二分搜尋可以快速縮小搜尋空間。 **弱點：** - 要求預先對資料進行排序，如果資料尚未組織，則加入額外的步驟。 - 不適合未排序的資料。二分搜尋策略依賴資料的排序性質，以在每次迭代期間有效地消除一半的可能性。 > 怎麼運作的 ： ![](https://assets.digitalocean.com/articles/alligator/js/linear-vs-binary-search/binary-search.png) --- 2. 排序演算法： --------- ### 什麼是排序？ 排序是指根據元素上的比較運算子對給定陣列或元素列表進行重新排列。比較運算子用於決定對應資料結構中元素的新順序。排序意味著將所有元素按升序或降序重新排序。 ### 介紹 在計算機科學中，排序演算法是將列表中的元素依序排列的演算法。最常用的順序是數字順序和字典順序，以及升序或降序。高效排序對於優化需要輸入資料位於排序清單中的其他演算法（例如搜尋和合併演算法）的效率非常重要。排序對於規範化資料和產生人類可讀的輸出通常也很有用。 形式上，任何排序演算法的輸出必須滿足兩個條件： 輸出是單調順序的（根據所需的順序，每個元素不小於/大於前一個元素）。 1. 輸出是輸入的排列（重新排序，但保留所有原始元素）。 2. 為了獲得最佳效率，輸入資料應儲存在允許隨機存取的資料結構中，而不是僅允許順序存取的資料結構中。 > 摘要：排序演算法是一組指令，它將陣列或列表作為輸入並將專案排列成特定的順序。排序最常見的是數字或字母（或字典）順序，並且可以按升序（AZ，0-9）或降序（ZA，9-0）。 ### 術語： - **就地分類：**想像一下重新整理抽屜裡的衣服而不把所有東西都拿出來。就地排序的工作原理類似。這些演算法透過修改現有清單本身內元素的順序來對資料進行排序，從而需要最少的額外空間。例如選擇排序、冒泡排序和插入排序。 - **內部排序：**這是指完全在電腦主記憶體 (RAM) 內執行的排序演算法。整個資料集可以一次載入到記憶體中，使其適合中小型資料集。堆排序、冒泡排序和合併排序等內部排序演算法通常用於記憶體資料操作。 - **外部排序：**當處理超出主存容量的海量資料集時，外部排序就發揮作用。這些演算法將大型資料集分解為較小的區塊，在磁碟（輔助儲存）上對它們進行排序，然後按特定順序將排序後的區塊合併在一起。合併排序是外部排序演算法的一個流行範例。 - **穩定排序：**想像一下按標題對書籍清單進行排序，但您也希望保留具有相同標題的書籍最初列出的順序。穩定的排序演算法在排序過程中保持具有相等鍵（值）的元素的相對順序。歸併排序和插入排序是穩定排序演算法的範例。 - **不穩定排序：**並非所有排序演算法都優先考慮順序保留。不穩定的排序演算法僅專注於實現所需的排序順序（例如，升序或降序），並且可能會打亂具有相同鍵的元素的相對位置。快速排序和堆排序是不穩定排序演算法的例子。 ### 排序演算法的特徵： - **時間複雜度：**這是指排序演算法完成其工作所需的時間（以步驟或比較而言）。我們通常在三種情況下分析時間複雜度： ``` * **Worst-case:** This represents the maximum amount of time the algorithm could take for a particular data size, considering the worst possible input scenario. ``` ``` * **Average-case:** This reflects the average time the algorithm takes across various random inputs of the same size. ``` ``` * **Best-case:** This represents the minimum amount of time the algorithm could take for a specific data size, considering the most favorable input scenario (e.g., data already partially sorted). ``` - **空間複雜度：**這是指排序演算法在原始資料所佔用的空間之外執行其操作所需的額外記憶體量。就地排序演算法透過在現有記憶體分配中操作資料來使用最少的額外空間，而某些演算法在排序過程中可能需要額外的臨時儲存。 - **穩定性：**此屬性決定排序演算法是否保留排序輸出中具有相等值的元素的原始順序。穩定的排序演算法維護這些元素的相對位置，這在特定應用中可能很重要。例如，如果您按姓名對客戶記錄清單進行排序，並且兩個客戶具有相同的姓名，您可能需要穩定的排序來維護它們最初列出的順序（例如，按帳戶建立日期）。 - **就地排序：**如前所述，就地排序演算法非常節省內存，因為它們透過修改原始列表本身來對資料進行排序，從而需要最少的額外空間。當處理大型資料集或記憶體有限時，這可能是有利的。 - **適應性：**一些排序演算法可以適應它們正在排序的資料的特徵。自適應排序演算法可以利用資料中預先存在的順序來提高其效能。例如，如果資料已經部分排序，自適應演算法可能會調整其方法以利用該部分順序並實現更快的排序。 ### 排序演算法的應用： - **搜尋演算法：**想像在電話簿中搜尋特定聯絡人。排序演算法是二分搜尋等高效搜尋演算法的無聲夥伴。透過確保電話簿條目按字母順序組織（排序），二分搜尋可以比透過未排序清單的線性搜尋更快找到您的聯絡人。 - **資料管理：**資料是現代計算的命脈，但有效管理資料需要組織。排序演算法在資料管理中起著至關重要的作用。當您按名稱、日期或大小對文件清單進行排序時，您可以更輕鬆地找到所需的特定文件。此外，排序的資料有助於更快地檢索和分析，從而節省您的時間和精力。 - **資料庫最佳化：**資料庫儲存大量訊息，從客戶記錄到金融交易。排序演算法顯著提高了資料庫查詢的效能。當您在電子商務資料庫中搜尋特定產品時，資料庫可能會根據您的搜尋條件（例如價格）對產品清單進行排序，以快速提供最相關的結果。 - **機器學習：**機器學習演算法從資料中學習以進行預測或分類。然而，需要準備好資料才能進行有效的學習。排序演算法通常用於資料預處理步驟，以在將資料輸入機器學習模型之前組織和建構資料。這可以顯著提高學習過程的準確性和效率。 - **資料分析：**資料分析就是從資訊中提取見解。排序演算法在這個過程中起著至關重要的作用。透過按各種屬性（例如日期、位置、客戶人口統計）對資料進行排序，您可以辨識在未排序的資料集中可能不易明顯的模式、趨勢和異常值。這使得資料分析師能夠更深入地了解資料，為金融、行銷和科學研究等各個領域的更好決策提供資訊。 - **作業系統：**作業系統管理電腦的資源。排序演算法適用於各種作業系統任務。例如，排序演算法可用於確定 CPU 任務的優先權、有效管理記憶體分配或以目錄結構組織文件，從而確保電腦系統的平穩運作。 > 這些只是排序演算法如何滲透到我們日常生活中的幾個例子。 ### 簡單解釋： 想像一下，你有一個雜亂的書架，裡面擺滿了各種主題的書。您想要按類型來組織它們（對它們進行排序）。以下是應用於此場景的排序演算法背後的主要概念和邏輯： 1. **比較：**您一次拿兩本書，並根據它們的類型進行比較（就像比較清單中的兩個元素）。 2. **交換：**如果類型不符合所需的順序（例如，歷史書放在小說之前），則交換它們在書架上的位置（就像重新排列清單中的元素一樣）。 3. **重複：**您繼續一次比較和交換兩本書，直到所有書籍按類型按所需順序排列（清單中的所有元素都根據所選標準排序）。 ### 排序演算法:: **1. 冒泡排序** **概念：**冒泡排序是一種簡單的排序演算法，它迭代列表，反覆比較相鄰元素，如果順序錯誤則交換它們。想像氣泡上升到液體表面 - 具有較大值的元素每次通過都會「冒泡」到清單中。這個過程一直持續到不需要交換為止，這表示清單已排序。 **解釋：** 想像一下將一堆亂七八糟的玩具進行分類。冒泡排序的工作原理如下： 1. **進行多次遍歷：**您多次瀏覽玩具清單。 2. **比較鄰居：**在每一遍中，您將每個玩具與其鄰居進行比較。如果第一個玩具更大（或排序術語中的“更高”），則交換它們的位置。 3. **泡泡上升：**每次交換時，較大的玩具（如泡泡）往往會移向清單的末端。 4. **繼續直到沒有交換：**您在整個清單中重複這些比較和交換，直到完成一次完整的傳遞而無需交換。這表示列表已排序。 **時間複雜度：**不幸的是，在最壞情況和平均情況下，冒泡排序的時間複雜度都是 O(n^2)。這意味著排序時間隨著元素數量 (n) 的二次方增加。對於大型資料集，冒泡排序變得非常低效。 **2.選擇排序** **概念：**選擇排序也遍歷列表，但它不是直接比較相鄰元素，而是專注於尋找未排序部分中的最小（或降序最大）元素。然後，該元素與未排序部分中的第一個元素交換，有效地將其放置在正確的排序位置。重複此過程，在每次通過時逐漸將未排序部分減少一個位置。 **解釋：** 想像一下根據身高安排學生拍照。選擇排序的工作原理如下： 1. **尋找最矮的（或最高的）：**在每次遍歷中，您搜尋該行的整個未排序部分以尋找最矮的學生（或按降序排列最高的學生）。 2. **與第一個學生交換：**一旦找到最矮的學生，就可以與未排序部分中的第一個學生交換他們的位置，有效地將他們放在行開頭的正確排序位置（最矮的在前面） 。 3. **重複並減少未排序部分：**繼續此過程，將交換的元素視為已排序部分的開頭，並在剩餘的未排序部分中搜尋最小元素。 **時間複雜度：**與冒泡排序類似，選擇排序在平均情況和最壞情況下的時間複雜度均為 O(n^2)。這意味著排序時間隨元素數量呈二次方增長，從而導致大型資料集效率低下。 **3.插入排序** **概念：**插入排序的工作原理是維護一個已排序的子列表，並迭代地將未排序部分中的元素插入到子列表中的正確位置。想像一下用塊建造一座塔，但您只能將它們一一加入，並且希望保持塔按高度排序。插入排序就像策略性地將每個新區塊放置在不斷增長的排序塔中的正確位置。 **解釋：** 想像一下按高度對書架上的書籍進行排序。插入排序的工作原理如下： 1. **從單一排序元素開始：**從一個空的排序子清單開始（就像書架上只有一本書）。 2. **從未排序的部分中取出一個元素：**您從未排序的堆中挑選一本書。 3. **移動與插入：**您可以將新書與已排序子清單中的每本書進行比較，從右端開始。如果新書較短（或按降序排列較高），則可以移動現有書籍以騰出空間，並將新書插入到正確的位置以保持排序順序。 4. **重複並增長已排序的子清單：**繼續此過程，從未排序的堆中獲取元素，將它們與已排序的子列表進行比較，並將它們插入到正確的已排序位置。這會逐漸增長排序的子列表，直到合併所有元素。 **時間複雜度：**插入排序適用於部分排序的資料。在一般情況下，對於已經排序的資料，它的時間複雜度為 O(n)，因此非常有效率。然而，對於完全隨機的資料（最壞情況），它可以回落到 O(n^2)，類似於冒泡排序和選擇排序。 **4. 歸併排序** **概念：**合併排序採用巧妙的「分而治之」策略來有效地對清單進行排序。它將問題分解為更小、更易於管理的子問題，然後按排序順序將解決方案重新組合在一起。 **解釋：** 想像一下，你有一支龐大的軍隊，需要按照身高來組織。歸併排序的工作原理如下： 1. **劃分：**將軍隊（列表）分成越來越小的組（子列表），直到每組只有一名士兵（元素）。這就像將一個大問題分解成更小、更容易解決的部分。 2. **征服：**由於現在每個子清單只有一名士兵（元素），因此它已被視為「已排序」。這是分而治之方法的基本情況。 3. **合併：**現在到了合併部分。您可以策略性地將已排序的子清單重新組合在一起，但以特定的方式。您比較每個子清單中的第一個士兵（元素），並將較短的士兵（較小的元素）放入最終的排序清單中。您不斷重複這種比較和放置，直到兩個子清單中的所有士兵（元素）都合併到最終的排序清單中。 4. **重複：**您繼續遞歸地應用這種分而治之的策略，直到整個原始軍隊（列表）從最短到最高（最小到最大）排序。 **時間複雜度：**合併排序的美妙之處在於它的時間複雜度。在平均情況和最壞情況下，其複雜度為 O(n log n)。這意味著對清單進行排序所需的時間隨著元素數量(n) 呈對數增長，這比冒泡排序、選擇排序或插入排序（其複雜度為O(n^2)）要快得多。 **5. 快速排序** **概念：**快速排序是另一種分而治之的排序演算法，但採用不同的方法。它依賴一個被稱為“樞軸”的策略性選擇元素來對列表進行分區並解決排序問題。 **解釋：** 想像一下，你的書架上堆滿了雜亂的書。快速排序的工作原理如下： 1. **選擇樞軸：**您從書架中選擇一本書（樞軸）。可以透過不同的方式選擇該主元，但通常它是清單中的第一個或最後一個元素。 2. **分區：**依樞軸重新排列書架上的書。類型按字母順序排列在樞軸類型之前的書籍位於一側，類型按字母順序排列在樞軸類型之後的書籍位於另一側。樞軸本身尚未放置。這種劃分有效地將較大的排序問題劃分為兩個較小的子問題。 3. **遞歸地征服：**現在，您將兩個子清單（成堆的書）中的每一個都視為單獨的排序問題。您可以遞歸地將快速排序策略套用到這些子列表，為每個子列表選擇一個新的主元並相應地對它們進行分割。 4. **合併：**兩個子清單排序後，將原始樞軸元素放置在兩個子清單之間正確的排序位置。現在，整個書架（清單）按字母順序排序。 **時間複雜度：**平均而言，快速排序的時間複雜度為 O(n log n)，這使得它對大型資料集非常有效率。然而，其性能可能會根據所選樞軸元件的不同而有所不同。選擇不當的主元（例如，總是排序或部分排序清單中的第一個或最後一個元素）可能會導致O(n^2) 的最壞情況，類似於冒泡排序、選擇排序和插入排序。 --- 3.樹的遍歷演算法： ---------- ### 什麼是樹遍歷？ 樹遍歷是指探索樹資料結構的系統方法。這就像有一個路線圖可以精確地存取鄰裡（樹）中的每個房屋（節點）一次，確保您不會迷路或重新存取同一棟房屋。與可以直接按位置存取元素的簡單資料結構不同，樹需要特定的演算法來導航節點之間的連接。這些遍歷演算法定義了存取每個節點的順序，可讓您對它們包含的資料執行操作，例如搜尋特定值、新增節點或刪除現有節點。遍歷技術有多種，每種技術都有其優點和應用，這使得樹遍歷成為電腦科學中的基本概念。 ### 介紹 樹遍歷，也稱為樹搜尋，是在僅包含樹邊的圖上執行的演算法，該演算法僅存取每個節點一次。此類別中的演算法僅在存取每個節點的順序上有所不同。遍歷樹的兩種經典方法是廣度優先搜尋（bfs），即在進入下一層之前存取同一級別或距根部距離的節點；深度優先搜尋，其中分支中的所有節點或從根到葉的一組路徑在傳遞到下一個分支之前都會被存取。還有其他方法，它們使用啟發式或隨機採樣在樹中移動來加速該過程。 #### 概括： - **目的：**系統探索樹資料結構，確保每個節點僅被存取一次。 - **優點：**支援搜尋特定資料、插入新節點或刪除現有節點等操作。 - **主要區別：**演算法分為兩種主要方法： ``` * **Breadth-First Search (BFS):** Visits nodes level by level, starting from the root and progressing outward. ``` ``` * **Depth-First Search (DFS):** Explores one branch (path) as far as possible before backtracking and exploring another branch. Further variations of DFS exist for specific applications. ``` - **其他技術：**其他方法利用啟發式或隨機取樣來加快遍歷速度。 ### 術語： **1. 樹：**一種分層資料結構，模擬顛倒的樹，其節點（資料點）透過邊（連結）連接。節點可以有零個或多個子節點，形成分支，並最終導致底部的葉節點（沒有子節點的節點）。 **2. 節點：**樹的基本建構塊，包含資料和對其子節點的潛在引用。想像一下附近的一棟房子——它保存資訊（資料）並透過道路（邊緣）連接到其他房子（子節點）。 **3.根節點：**樹中最頂層的節點，作為遍歷演算法的起點。將其視為附近的主屋，從這裡開始探索。 **4.葉子節點：**沒有子節點的節點，代表樹中分支的「末端」。想像位於社區邊緣的房屋，沒有進一步的聯繫。 **5.邊：**樹中兩個節點之間的連接，描述它們之間的關係。想想連接附近房屋的道路。 **6. 遍歷：**僅存取樹中每個節點一次的系統過程。這就像探索整個社區，確保您參觀每棟房屋而不會錯過任何一棟或重新參觀同一棟房屋。 **7.廣度優先搜尋（BFS）：**一種從根開始向外逐階存取節點的遍歷方法。想像一下，透過造訪第一條街道（層）上的所有房屋，然後再前往下一條街道（層）上的房屋來探索社區。 **8.深度優先搜尋（DFS）：**一種遍歷方法，在回溯和探索另一個分支之前，先沿著一個分支（路徑）探索盡可能遠的地方。想像一下，沿著一條路（分支）探索附近區域，直到到達死胡同（葉節點），然後回溯並嘗試另一條路。 DFS 的常見變體包括前序、中序和後序，每種形式都有存取分支內節點的特定順序。 ### 樹遍歷演算法的特點： **1. 只存取每個節點一次：** - 樹遍歷的核心原則是保證樹中的每個節點都被恰好存取一次。這可以防止冗餘處理並確保對樹結構的完整探索。 **2. 探訪順序：** - 雖然每個節點僅被存取一次，但樹遍歷演算法的定義特徵在於它們存取節點的順序。不同的演算法會優先考慮以特定順序探索節點，從而產生不同的遍歷模式。 **3. 遞歸與迭代實作：** - 樹遍歷演算法可以遞歸或迭代地實現。遞歸方法涉及定義在子樹上呼叫自身的函數，模仿樹的層次結構性質。迭代方法利用迴圈和堆疊來管理遍歷過程。 **4.時間與空間複雜度：** - 與任何演算法一樣，樹遍歷方法具有相關的時間和空間複雜度。時間複雜度是指基於樹中節點數 (n) 執行演算法所需的時間量。常見的複雜度包括 O(n)（線性）和 O(n log n)（對數），BFS 和 DFS 變體根據實現的不同具有不同的複雜度。空間複雜度反映了演算法執行所需的額外記憶體量，通常取決於用於遍歷的資料結構（例如堆疊）。 **5.特定於應用的選擇：** - 樹遍歷演算法的選擇在很大程度上取決於手頭上的具體任務。例如，BFS 可能更適合尋找樹中兩個節點之間的最短路徑，而具有變體的 DFS 可用於搜尋特定資料或探索所有可能的路徑。 **6. 不可修改：** - 一般來說，樹遍歷演算法旨在探索現有的樹結構，而不修改樹本身。它們存取節點，對它們包含的資料執行操作，但通常不會更改樹中的連接或資料。 ### 樹遍歷演算法的應用： **1. 檔案系統導航：** - 作業系統使用樹遍歷演算法來導航電腦上的目錄結構。將您的檔案系統想像成一棵樹，其中資料夾作為節點，子資料夾和檔案作為子節點。廣度優先搜尋 (BFS) 可用於列出目錄及其子目錄中的所有文件，而深度優先搜尋 (DFS) 可用於在層次結構中定位特定文件。 **2. 網頁抓取：** - 像 Google 這樣的搜尋引擎利用 BFS 或 DFS 變體來抓取網路。他們從種子 URL（根節點）開始，有系統地探索連結的網頁（子節點）。 BFS 確保在進入更深層次之前探索特定層級（網站）的所有頁面，而 DFS 可能會在回溯和探索其他網站之前更深入地研究特定網站。 **3.人工智慧（AI）：** - 人工智慧中的遊戲演算法通常使用樹遍歷來探索可能的動作及其結果。將西洋棋遊戲想像成一棵樹，當前棋盤狀態作為根節點，潛在的移動作為通往新棋盤狀態（子節點）的分支。具有修剪技術的深度優先搜尋可用於評估潛在的移動並確定最有希望的策略。 **4.社會網絡分析：** - 社群媒體平台利用樹遍歷來推薦聯繫或探索朋友網路。將您的個人資料想像為一個節點，將朋友作為子節點。遍歷演算法可用於建議基於共同朋友（樹中的共同祖先）的連接或探索網路以了解資訊流或影響力。 **5.電腦圖形學：** - 光線追蹤是一種用於在 3D 圖形中實現逼真光照效果的技術，通常採用樹遍歷演算法。虛擬場景可以表示為一棵樹，其中物件作為節點，它們的空間關係作為邊緣。遍歷有助於確定光線與哪些物件交互，從而建立逼真的陰影和反射。 **6. 網路路由：** - 電腦網路中的路由協定使用樹遍歷的變體來找到資料包到達目的地的最佳路徑。將網路想像成一棵樹，路由器作為節點，連接作為邊緣。遍歷演算法有助於確定資料在網路中不同點之間傳輸的最有效路徑。 ### 簡單解釋： 想像一下，您是一名送貨員，您有一堆包裹要在附近送貨。附近的房屋透過道路連接起來，形成樹狀結構。 - **房屋是節點：**每個房屋代表樹中的一個節點，包含地址（資料）等資訊以及可能由道路（邊）連接的相鄰房屋（子節點）的地址。 - **您的遞送路線就是遍歷：**樹遍歷演算法定義您存取每個房屋（節點）以遞送包裹（對資料執行操作）的順序。 **您可以透過兩種主要方式進行交付，這對應於兩種常見的樹遍歷方法：** **1. 廣度優先搜尋（BFS）：像一個不斷擴大的圓圈一樣提供：** - 您從清單中的第一個房子（根節點）開始。 - 您將包裹運送到該房屋，然後**存取同一條街道（層）上與其直接相連的所有房屋（鄰居/子節點），**然後繼續前進。 - 一旦您運送到第一條街道（層）上的所有房屋，您就會移動到下一條街道（層）並重複該過程，在前往下一層之前存取該層上的所有房屋。 這就像一個不斷擴大的圓圈——您從中心（根部）開始，逐漸向外工作，確保在移動到下一個之前，您可以運送到街道（層）上的所有房屋。如果您想先優先考慮向附近區域的所有房屋送貨，這種方法很有用，也許是因為它們都在同一個街區，並且最大限度地減少行程時間很重要。 **2. 深度優先搜尋（DFS）：深入研究一條街道：** - 您從清單中的第一棟房子（根節點）開始。 - 您將包裹運送到該房屋，然後**選擇一條從該房屋引出的相連道路（分支），並沿著它一直走到終點（葉節點）** ，在原路返回之前運送到該路徑（分支）上的所有房屋。 - 一旦到達該路的盡頭（分支），您就回溯到最後一個路口（父節點）並選擇另一條路（分支）進行探索，將物品運送到該新路徑上的所有房屋，直到到達另一個死胡同（葉節點） 。 這就像探索迷宮一樣——你選擇一條路徑（分支）並沿著它一路走下去，運送到沿途的房屋，直到你到達死胡同（葉節點）。然後你原路返回並嘗試另一條路徑（分支），直到你到達所有房屋。如果您正在快速查找特定地址並希望在前往另一條街道（分支）之前探索整條街道（分支），則此方法可能會很有用。 ### 演算法類型： **1.廣度優先搜尋（BFS）：** - **概念：** BFS逐級存取節點，從根節點開始，逐層向外進行。想像一下探索一個家譜； BFS 將在向下移動到其子節點（下一層）之前存取所有兄弟節點（同一層級的節點）。 - **怎麼運作的：** ``` 1. Start at the root node and add it to a queue (a data structure that follows a "first-in, first-out" principle). ``` ``` 2. Remove the first node from the queue and visit it (process its data). ``` ``` 3. Add all the unvisited child nodes of the removed node to the back of the queue. ``` ``` 4. Repeat steps 2 and 3 until the queue is empty. ``` - **例子：** 考慮一棵簡單的樹： ``` A / \ B C / \ / \ D E F G ``` BFS 遍歷將依下列順序存取節點：A、B、C、D、E、F、G。 **2.深度優先搜尋（DFS）：** - **概念：** DFS 沿著一個分支（路徑）探索盡可能遠的距離，然後回溯並探索另一個分支。 DFS 還有更多變體，但這裡我們將重點放在基本方法上。 - **怎麼運作的：** ``` 1. Start at the root node. ``` ``` 2. Visit the node (process its data). ``` ``` 3. If there are any unvisited child nodes, choose one and repeat steps 2 and 3, essentially following that branch (path) until you reach a leaf node (a node with no children). ``` ``` 4. Once you reach a leaf node, backtrack to the parent node and repeat step 3, exploring another unvisited child node (if any) of the parent. ``` ``` 5. Continue backtracking and exploring until all nodes have been visited. ``` - **例子：** 使用與之前相同的樹： ``` A / \ B C / \ / \ D E F G ``` DFS 遍歷可以以各種順序存取節點，具體取決於每一步選擇的子節點。可能的順序是：A、B、D、E、C、F、G。 **主要區別：** - BFS強調逐級存取節點，確保在深入之前先進行更廣泛的探索。 - DFS 優先考慮完全探索一個分支（路徑），然後再轉向另一個分支（路徑），可能會更快到達特定節點，但不能保證逐級存取。 結論 ： ---- 總而言之，這個基本演算法之旅為您理解基本的搜尋、排序和樹遍歷技術奠定了堅實的基礎。這些解釋使用了清晰的語言和相關的類比，使這些抽象概念更加平易近人、直觀。無論您是經驗豐富的程式設計師還是剛開始涉足電腦科學，這種理解都為建立高效且有效的程式奠定了基石。 隨著您對知識的渴望與日俱增，請更深入研究！我的儲存庫充滿了各種演算法和資料結構，等待您的探索（[演算法-資料-結構](https://github.com/m-mdy-m/algorithms-data-structures)）。這是一個寶庫，您可以在這裡進行實驗、練習並鞏固您對這些基本建置模組的掌握。 **雖然某些部分仍在建設中，**反映了我自己正在進行的學習旅程（這個旅程可能需要 2-3 年才能完成！），但儲存庫正在不斷發展。 冒險不止於探索！我非常重視您的反饋。在文章中遇到障礙？有建設性的批評要分享嗎？還是只是想引發一場關於演算法的對話？我的門（或者更確切地說，我的收件匣）總是開著的。在 Twitter 上聯絡： [@m\_\_mdy\_\_m](https://twitter.com/m__mdy__m)或 Telegram：@m\_mdy\_m。此外，我的 GitHub 帳戶[m-mdy-m](https://github.com/m-mdy-m)歡迎討論和貢獻。讓我們共同建立一個充滿活力的學習社區，在這裡我們分享知識並突破我們的理解界限。 --- 原文出處：https://dev.to/m__mdy__m/basic-algorithms-5bep

0個讚   0留言 34瀏覽

深入探討 Javascript 函數式編程

[訂閱我的程式設計 YouTube 頻道](https://www.youtube.com/@alexmercedcoder) [訂閱我的資料 YouTube 頻道](https://www.youtube.com/@alexmerceddata) 函數式程式設計 (FP) 在軟體開發領域獲得了巨大的關注，JavaScript 開發人員越來越多地轉向這種範例，以更有效地解決問題並減少錯誤。從本質上講，函數式程式設計強調使用純函數、不變性以及柯里化、記憶化和 monad 等先進技術來建立更清晰、更可預測的程式碼。 在這篇文章中，我們將深入研究每個概念，以了解它們的工作原理以及它們在 JavaScript 開發中的重要性。我們將探索**純函數**的無副作用性質、用於維護狀態可預測性的**不變性**、用於增強函數重用和組合的**柯里化**、用於優化性能的**記憶化**以及用於以函數式風格處理副作用的**monad** 。 無論您是函數式程式設計的新手，還是希望加深對其在 JavaScript 中的應用的理解，這篇文章都將為您提供堅實的基礎和實際範例，以便將這些原則整合到您的編碼實踐中。讓我們揭開這些概念的神秘面紗，看看它們如何改變您編寫 JavaScript 程式碼的方式。 1. 純函數 ------ **純函數**是一種函數，在給定相同的輸入的情況下，將始終返回相同的輸出，並且不會導致任何可觀察到的副作用。這個概念在函數式程式設計中至關重要，因為它允許開發人員編寫更可預測和可測試的程式碼。 ### 在 JavaScript 中使用純函數的好處： - **可預測性：**由於純函數不依賴或修改其範圍之外的資料狀態，因此它們更容易推理和除錯。 - **可重複使用性：**純函數可以在應用程式的不同部分重複使用，而無需考慮外部上下文。 - **可測試性：**沒有隱藏狀態或副作用，純函數很容易測試；輸入和輸出是您需要考慮的全部。 ### JavaScript 中純函數的範例： 考慮一個簡單的函數來計算矩形的面積： ``` function rectangleArea(length, width) { return length * width; } ``` 這個函數是純粹的，因為它總是使用相同的參數來傳回相同的結果，而且它不會修改任何外部狀態或產生副作用。 ### 常見陷阱以及如何避免它們： 雖然純函數提供了許多好處，但開發人員在嘗試將它們整合到與資料庫、外部服務或全域狀態互動的應用程式時可能會面臨挑戰。以下是保持純度的一些技巧： - **避免副作用：**不要修改函數內的任何外部變數或物件。 - **本機處理狀態：**如果您的函數需要存取應用程式狀態，請考慮將狀態作為參數傳遞並傳回新狀態而不修改原始狀態。 透過理解和實現純函數，開發人員可以在充分利用 JavaScript 中函數式程式設計的全部功能方面邁出重要一步。 2. 不變性 ------ **不變性**是指資料建立後永不更改的原則。您無需修改現有物件，而是建立一個包含所需變更的新物件。這是函數式程式設計的基石，因為它有助於防止副作用並在應用程式的整個生命週期中保持資料的完整性。 ### JavaScript 如何處理不變性： 預設情況下，JavaScript 物件和陣列是可變的，這表示在需要時必須注意強制執行不變性。但是，有幾種技術和工具可以提供幫助： - **使用`const` ：**雖然`const`不會使變數變得不可變，但它可以防止將變數辨識碼重新指派給新值，這是邁向不變性的一步。 - **Object.freeze()：**此方法可以透過防止向物件新增屬性和修改現有屬性來使物件不可變。 - **陣列和物件的擴展語法：**使用擴展語法可以幫助建立新的陣列或物件，同時合併現有陣列或物件的元素或屬性，而無需修改原始陣列或物件。 ### 確保 JavaScript 中資料不變性的技術： 1. **寫入時複製：**始終建立一個新的物件或陣列，而不是修改現有的物件或陣列。例如： ``` const original = { a: 1, b: 2 }; const modified = { ...original, b: 3 }; // 'original' is not changed ``` 2. **使用函式庫：**像 Immutable.js 這樣的函式庫提供了高度最佳化的持久不可變資料結構，可以簡化不變性的實作。 ### 幫助實施不變性的函式庫： - **Immutable.js：**提供一系列本質上不可變的資料結構。 - **immer：**允許您透過使用臨時草稿狀態並套用變更來產生新的不可變狀態，以更方便的方式處理不可變狀態。 透過將不變性整合到 JavaScript 專案中，您可以增強資料完整性、提高應用程式效能（透過減少防禦性複製的需求）並提高程式碼的可預測性。它完全符合函數式程式設計的原則，從而產生更乾淨、更健壯的軟體。 3.柯里化 ----- **柯里化**是函數式程式設計中的一種變革性技術，其中具有多個參數的函數被轉換為一系列函數，每個函數採用一個參數。這種方法不僅使您的函數更加模組化，而且還增強了程式碼的可重複使用性和可組合性。 ### JavaScript 柯里化的實際用途： 柯里化允許建立高階函數，這些函數可以在應用程式的不同點使用不同的參數進行自訂和重複使用。它特別適用於： - **事件處理：**建立針對特定事件自訂的部分應用函數，但重複使用通用處理程序邏輯。 - **API 呼叫：**使用預定義參數（例如 API 金鑰或使用者 ID）設定函數，這些參數可以在不同的呼叫中重複使用。 ### 說明柯里化的逐步範例： 考慮一個簡單的函數來加兩個數字： ``` function add(a, b) { return a + b; } // Curried version of the add function function curriedAdd(a) { return function(b) { return a + b; }; } const addFive = curriedAdd(5); console.log(addFive(3)); // Outputs: 8 ``` 此範例展示了柯里化如何將簡單的加法函數轉變為更通用和可重複使用的函數。 ### 柯里化與部分應用： 雖然柯里化和部分應用都涉及將函數分解為更簡單、更具體的函數，但它們並不相同： - **柯里化（Currying）：**將具有多個參數的函數轉換為一系列巢狀函數，每個函數只接受一個參數。 - **部分應用：**涉及透過預先填充一些參數來建立具有較少參數的函數。 這兩種技術在函數式程式設計中都很有價值，可以用來簡化複雜的函數簽名並提高程式碼模組化。 透過利用柯里化，開發人員可以增強函數的可重複使用性和組合性，從而在 JavaScript 專案中產生更清晰、更易於維護的程式碼。 4. 記憶 ----- **記憶化**是函數式程式設計中使用的最佳化技術，透過儲存昂貴的函數呼叫的結果並在相同的輸入再次發生時返回快取的結果來加速電腦程式。它在 JavaScript 中對於優化涉及繁重計算任務的應用程式的效能特別有用。 ### 為什麼記憶化在 JavaScript 很重要： - **效率：**減少使用相同參數重複呼叫函數所需的計算次數。 - **效能：**透過快取耗時操作的結果來提高應用程式回應能力。 - **可擴展性：**透過最小化計算開銷來幫助管理更大的資料集或更複雜的演算法。 ### 實現記憶化：範例和常用方法： 以下是 JavaScript 中記憶函數的基本範例： ``` function memoize(fn) { const cache = {}; return function(...args) { const key = args.toString(); if (!cache[key]) { cache[key] = fn.apply(this, args); } return cache[key]; }; } const factorial = memoize(function(x) { if (x === 0) { return 1; } else { return x * factorial(x - 1); } }); console.log(factorial(5)); // Calculates and caches the result console.log(factorial(5)); // Returns the cached result ``` 此範例示範了記憶化如何快取階乘計算的結果，從而顯著減少重複呼叫的計算時間。 ### 記憶化的優點和潛在缺點： #### 好處： - 顯著減少重複操作的處理時間。 - 透過避免冗餘計算來提高應用程式效率。 - 易於用高階函數實現。 #### 缺點： - 由於快取而增加記憶體使用量。 - 不適合具有不確定性輸出的函數或具有副作用的函數。 透過理解和實現記憶化，開發人員可以優化他們的 JavaScript 應用程式，使其更快、更有效率。然而，重要的是要考慮額外記憶體使用方面的權衡，並確保僅在能夠提供明顯好處的地方應用記憶化。 5. 單子 ----- **Monad**是函數式程式設計中使用的抽象資料類型，用於處理副作用，同時保持純函數原則。它們將行為和邏輯封裝在靈活的可連結結構中，允許順序操作，同時保持函數的純淨。 ### Monad 簡介及其在 FP 中的意義： Monad 提供了一個以受控方式處理副作用（如 IO、狀態、異常等）的框架，有助於保持功能的純度和可組合性。在 JavaScript 中，Promise 是一個常見的一元結構範例，可以乾淨且有效率地管理非同步操作。 ### JavaScript 中 Monad 的範例： - **Promises：**透過封裝待處理操作、成功值或錯誤來處理非同步操作，允許方法連結（如`.then()`和`.catch()` ）： ``` new Promise((resolve, reject) => { setTimeout(() => resolve("Data fetched"), 1000); }) .then(data => console.log(data)) .catch(error => console.error(error)); ``` - **Maybe Monad：**透過封裝可能存在或不存在的值來幫助處理 null 或未定義的錯誤： ``` function Maybe(value) { this.value = value; } Maybe.prototype.bind = function(transform) { return this.value == null ? this : new Maybe(transform(this.value)); }; Maybe.prototype.toString = function() { return `Maybe(${this.value})`; }; const result = new Maybe("Hello, world!").bind(value => value.toUpperCase()); console.log(result.toString()); // Outputs: Maybe(HELLO, WORLD!) ``` ### Monad 定律與結構： Monad 必須遵循三個核心定律——同一性、關聯性和單位——以確保它們的行為可預測： - **同一性：**直接應用函數或透過 monad 傳遞函數應該會產生相同的結果。 - **關聯性：**執行操作的順序（連結）不影響結果。 - **單位：**一個值必須能夠被提升為一個單子而不改變其行為。 理解這些定律對於在函數式程式設計中有效地實現或利用 monad 至關重要。 ### Monad 如何管理副作用並保持功能純度： 透過封裝副作用，monad 允許開發人員保持程式碼庫的其餘部分純淨，從而更易於理解和維護。它們使副作用可預測和可管理，這對於維護狀態一致性和錯誤處理可能變得具有挑戰性的大型應用程式至關重要。 透過利用 monad，開發人員可以增強 JavaScript 應用程式的功能，確保它們以功能性的方式處理副作用，從而提高程式碼的可靠性和可維護性。 6. 這些概念如何相互關聯 ------------- 純函數、不變性、柯里化、記憶化和 monad 的概念不僅僅是單獨的元素，而是增強 JavaScript 應用程式的健全性和可維護性的互連工具。以下是他們如何共同創造一個有凝聚力的函數式程式設計環境。 ### 建立功能協同： - **純函數與不變性：**純函數確保函數沒有副作用，並為相同的輸入傳回相同的輸出，並透過防止資料意外變更的不變性來補充。它們共同確保了可預測且穩定的程式碼庫。 - **柯里化和記憶化：**柯里化允許將函數分解為更簡單的單參數函數，這些函數更易於管理和記憶。然後可以將記憶化應用於這些柯里化函數以緩存其結果，透過避免重複計算來優化應用程式的效能。 - **Monad 和純函數：** Monad 有助於以受控方式管理副作用，這使得純函數即使在處理 I/O 或狀態轉換等操作時也能保持純淨。這種副作用的封裝保留了功能架構的完整性。 ### 範例：一個小型功能模組： 讓我們考慮一個將這些概念結合在一起的實際範例。假設我們正在建立一個簡單的用戶註冊模組： ``` // A pure function to validate user input const validateInput = input => input.trim() !== ''; // A curried function for creating a user object const createUser = name => ({ id: Date.now(), name }); // Memoizing the createUser function to avoid redundant operations const memoizedCreateUser = memoize(createUser); // A monad for handling potential null values in user input const getUser = input => new Maybe(input).bind(validateInput); // Example usage const input = getUser(' John Doe '); const user = input.bind(memoizedCreateUser); console.log(user.toString()); // Outputs user details or empty Maybe ``` 在此範例中， `validateInput`是確保輸入有效性的純函數。 `createUser`是一個柯里化和記憶化的函數，針對效能進行了最佳化，而`getUser`使用 monad 來安全地處理潛在的 null 值。 結論： --- 理解和整合這些函數式程式設計概念可以顯著提高 JavaScript 程式碼的品質和可維護性。透過同時使用純函數、不變性、柯里化、記憶化和 monad，開發人員可以建立更可靠、更有效率、更乾淨的應用程式。 透過採用這些相互關聯的原則，JavaScript 開發人員可以充分利用函數式程式設計的潛力來編寫更好、更永續的程式碼。 --- 原文出處：https://dev.to/alexmercedcoder/deep-dive-into-functional-programming-in-javascript-851

0個讚   0留言 76瀏覽

面試時必須了解的 10 個系統設計概念

*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [![面試時必須了解的 10 個系統設計概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxdldzd09fwws7nve36.png)](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 您好，作為開發人員，充分理解基本系統設計概念對於開發可擴展、可靠和高效能的軟體系統至關重要。 [**系統設計**](https://medium.com/javarevisited/7-system-design-problems-to-crack-software-engineering-interviews-in-2023-13a518467c3e)涉及設計軟體系統的體系結構和元件，以滿足特定要求並實現所需的性能特徵。 隨著技術的快速進步和軟體應用的複雜性不斷增加，掌握系統設計概念對於程式設計師建立高效且有效的系統至關重要。 在上幾篇文章中，我回答了流行的系統設計問題，例如[API 網關與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)以及[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)，今天，我們將看看每個程式設計師都應該學習的 10 個關鍵系統設計概念。 這些概念為設計能夠處理大規模資料、容納並髮用戶並提供最佳效能的軟體系統奠定了堅實的基礎。 無論您是初學者還是經驗豐富的開發人員，了解這些系統設計概念都將使您能夠建立強大且可擴展的軟體系統，以滿足現代應用程式的需求。那麼，讓我們深入探討這些基本的系統設計原則吧！ 順便說一句，如果您正在準備系統設計面試並想深入學習系統設計，那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程 以下是每個程式設計師都應該考慮學習的 10 個重要的系統設計概念： 1. **可擴展性** 2. **可用性** 3. **可靠性** 4. **容錯能力** 5. **快取策略** 6. **負載平衡** 7. **安全** 8. **可擴展的資料管理** 9. **設計模式** 10. **效能最佳化** 理解和應用這些系統設計概念可以幫助程式設計師和開發人員建立強大的、可擴展的、高效能的軟體系統，以滿足現代應用程式和使用者的需求。 現在，讓我們深入研究它們中的每一個並了解它們是什麼以及如何在您的應用程式中實現它們。 ### 1. 可擴展性 可擴展性是指系統或應用程式處理不斷增加的工作負載或使用者而不顯著降低效能或功能的能力。 它是系統設計中的一個重要概念，因為它允許系統成長並適應不斷變化的需求，**例如增加的資料量、使用者流量或處理需求，**而不會遇到效能瓶頸或限制。 在現代運算環境中，系統需要處理大量且不斷成長的資料和用戶，可擴展性至關重要。例如，流行的網站、行動應用程式和基於雲端的服務需要能夠同時處理數百萬甚至數十億個請求，而分散式資料庫和大資料平台需要擴展以處理 PB 或 EB 的資料。 對於需要適應尖峰負載的系統來說，可擴展性也很重要，例如假期期間的線上購物或因病毒事件導致的用戶活動突然激增。 > 可擴展性主要有兩種：**垂直可擴展性和水平可擴展性**。垂直可擴展性涉及向單一伺服器或節點加入更多資源（例如 CPU、記憶體或儲存）以處理增加的工作負載。另一方面，水平可擴展性涉及向系統加入更多伺服器或節點以分配工作負載並處理增加的需求。 水平可擴展性通常透過[負載平衡](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [分片](https://medium.com/javarevisited/what-is-database-sharding-scaling-your-data-horizontally-1dc12b33193f)、分區和分散式處理等技術來實現。 實現可擴展性需要仔細的系統設計、架構和實作。它涉及設計能夠有效處理不斷增加的工作負載、有效利用資源、最大限度地減少依賴性以及跨多個節點或伺服器分佈處理的系統。 > 快取、非同步處理、平行處理和分散式資料庫等技術通常用於提高可擴展性。測試和效能監控對於確保系統在擴展時繼續保持良好效能也至關重要。 可擴展性是建立強大的高效能係統的重要考慮因素，這些系統可以處理成長並適應隨時間變化的需求。它使系統能夠滿足不斷增長的需求，提供無縫的用戶體驗，並支援業務成長，而不會遇到效能限製或停機。 這是來自[**ByteByteGo**](https://bit.ly/3P3eqMN)的一個很好的圖表，這是準備系統設計面試的好地方，它顯示了[*垂直擴展和水平擴展之間的區別*](https://medium.com/javarevisited/difference-between-horizontal-scalability-vs-vertical-scalability-67455efc91c) [![水平縮放與垂直縮放](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd4vz64i6vywjpopepku.png)](https://bit.ly/3P3eqMN) --- ### 2. 可用性 可用性是指軟體系統即使在發生故障或中斷時也能保持運作並可供使用者存取的能力。 高可用性是許多系統的關鍵要求，特別是那些任務關鍵型或時間敏感型系統，例如線上服務、電子商務網站、金融系統和通訊網路。 此類系統的停機可能會導致重大的財務損失、聲譽受損和客戶不滿。因此，保證高可用性是系統設計時重點考慮的問題。 可用性通常**使用正常運作時間（衡量系統運作時間的百分比）和停機時間（衡量系統不可用的時間）等指標**來量化。 實現**高可用性涉及設計具有冗餘、容錯和故障轉移機制的系統**，以最大限度地降低因硬體故障、軟體故障或其他意外事件而導致停機的風險。 > 在系統設計中，採用了各種技術和策略來提高可用性，例如負載平衡、叢集、複製、備份和復原、監控和主動維護。 實施這些措施是為了最大限度地減少單點故障、檢測故障並從故障中恢復，並確保系統即使在發生故障或中斷時也能保持運作。 透過設計具有高可用性的系統，工程師可以確保系統可以長時間存取和執行，從而提高客戶滿意度、減少停機時間並提高業務連續性。 [![系統設計中的高可用性](https://miro.medium.com/v2/resize:fit:546/0*SnLVBPu0JGx4N9F7.gif)](https://www.linkedin.com/pulse/top-20-system-design-interview-questions-answers-soma-sharma-g0pqc/) --- ### 3、可靠性 可靠性是指**軟體系統在交付預期結果時的一致性和可靠性**。建立具有可靠元件、錯誤處理機制和備份/復原策略的系統對於確保系統按預期運作並產生準確的結果至關重要。 可靠性是系統設計的關鍵因素，因為它直接影響系統的整體性能和品質。可靠的系統應始終按預期執行，不會出現意外故障、錯誤或中斷。 **關鍵任務應用通常需要高可靠性，**因為系統故障可能會造成嚴重後果，例如在航空、醫療保健、金融和其他安全關鍵領域。 可靠性通常使用各種指標來量化，例如**平均故障間隔時間 (MTBF)** （測量故障之間的平均持續時間）和故障率 (FR)（測量一段時間內故障發生的速率）。 > 可靠性可以透過各種技術和策略來實現，例如冗餘、錯誤檢測和糾正、容錯和穩健設計。 在系統設計中，要實現高可靠性需要仔細考慮各種因素，包括元件品質、系統架構、錯誤處理、容錯機制、監控和維護策略。 透過**設計高可靠性的系統**，工程師可以確保系統始終如一地按預期執行，從而提高客戶滿意度、減少停機時間並提高系統效能和可用性。 --- ### 4. 容錯性 容錯是指系統或元件在故障或故障（例如硬體故障、軟體錯誤或其他不可預見的問題）時繼續正常運作的能力。 容錯系統旨在檢測、隔離故障並從故障中恢復，而不會完全故障或停機。 容錯是系統設計中的重要概念，特別是在分散式系統或需要在具有挑戰性的環境中可靠運作的系統中。 它涉及實現冗餘、錯誤檢測、錯誤糾正和錯誤恢復機制，以確保即使某些元件或子系統發生故障，系統也能繼續運作。 > 有多種技術和策略可以實現容錯，例如**複製**，即在不同位置維護相同資料或服務的多個副本，以便在一個發生故障時，其他副本可以接管；檢查點，定期保存系統狀態，以便在發生故障時，系統可以恢復到先前已知的良好狀態；優雅降級，即係統在故障時可以繼續執行，但功能會減少。 容錯對於確保系統的高可用性、可靠性和彈性至關重要，特別是在系統故障可能造成嚴重後果的關鍵任務應用程式中。 透過在系統設計中納入容錯機制，工程師可以建立強大且可靠的系統，即使在遇到意外故障時也可以繼續運作並提供預期結果。 [![系統設計中的容錯](https://miro.medium.com/v2/resize:fit:609/0*AKUPawvM6q1K8utM.jpg)](https://bit.ly/3P3eqMN) --- ### 5. 快取策略 快取策略是一種用於優化系統效能的技術，它透過將經常存取的資料或結果儲存在稱為快取的臨時儲存位置中，以便可以快速檢索資料，而無需重新計算或從原始來源取得。 系統設計中常用的快取策略有以下幾種： 1. **完全緩存** 在此策略中，整個資料集或結果都會快取在快取中，提供對所有資料或結果的快速存取。當資料或結果相對較小且可以輕鬆儲存在記憶體或本地快取中時，此策略非常有用。 2. **部分快取** 在此策略中，通常基於使用模式或頻繁存取的資料，僅快取資料或結果的子集。當資料或結果規模很大，或並非所有資料或結果都被頻繁存取，並且快取整個資料集不可行時，此策略很有用。 3. \*\*基於時間的到期時間 在此策略中，資料或結果被快取特定的時間，之後快取被認為是陳舊的，並且資料或結果從原始來源獲取並在快取中更新。當資料或結果相對穩定且不經常變化時，此策略很有用。 4. **LRU（最近最少使用）或 LFU（最不常使用）替換策略** 在這些策略中，最近最少使用或最不頻繁使用的資料或結果被從快取中逐出，以為新資料或結果騰出空間。當快取的儲存容量有限且需要驅逐不常存取的資料以容納新資料時，這些策略非常有用。 5. **直寫式或後寫式緩存** 在這些策略中，資料或結果在更新或插入時寫入快取和原始來源（直寫）或僅寫入快取（後寫）。當系統需要保持快取和原始來源之間的一致性或原始來源無法直接更新時，這些策略就非常有用。 6. **分散式快取** 在此策略中，快取分佈在多個節點或伺服器上，通常使用分散式快取框架或技術。當系統跨多個節點或伺服器分佈或擴展並且需要保持分散式快取的一致性和效能時，此策略就非常有用。 7. **自訂快取** 可以根據系統或應用程式的特定要求和特徵來實施自訂快取策略。這些策略可能涉及上述策略或其他自訂方法的組合，以滿足系統的獨特需求。 選擇*合適的快取策略取決於資料或結果的大小、存取頻率、資料或結果的易變性、儲存容量、一致性要求以及系統的效能目標等多種因素*。仔細考慮和實施快取策略可以顯著提高系統效能、降低資源利用率、提高可擴展性並增強使用者體驗。 [![系統設計的快取策略](https://miro.medium.com/v2/resize:fit:609/0*vm4O76NLJuhVu68G)](https://bit.ly/3P3eqMN) --- ### **6.負載平衡** 負載平衡是分散式系統或網路中使用的技術，用於在多個伺服器或資源之間均勻分配傳入的網路流量或工作負載，確保沒有任何單一伺服器或資源因過多的流量或工作負載而不堪負荷。 負載平衡的目的是優化資源利用率，最大化系統可用性，提高系統整體效能和可靠性。在微服務架構中， [*負載平衡和 API 閘道*](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)通常指的是相同的，但事實並非如此，API 閘道可以做更多的事情，如[本文](https://medium.com/javarevisited/what-is-api-gateway-pattern-in-microservices-architecture-what-problem-does-it-solve-ebf75ae84698)所述。 負載平衡可以透過各種演算法或方法來實現，例如： 1. **循環：**傳入請求以輪流方式依序分發到每個伺服器或資源，確保所有伺服器或資源之間的流量平均分配 2. **最少連線：**傳入請求分發到活動連線數最少的伺服器或資源，確保負載最少的伺服器或資源接收新請求。 3. **來源 IP 關聯性：**來自相同客戶端 IP 位址的傳入請求將導向至相同伺服器或資源，確保來自特定用戶端的請求始終由相同伺服器或資源處理。 4. **加權循環：**傳入請求根據分配給每個伺服器或資源的預定義權重進行分配，從而允許根據伺服器或資源容量或功能採用不同的流量分配比率。 5. **自適應負載平衡：**負載平衡演算法根據伺服器或資源健康、效能或其他指標的即時監控，動態調整流量分配，確保最佳的資源利用率和系統效能。 負載平衡可以使用基於硬體的負載平衡器、基於軟體的負載平衡器或基於雲端的負載平衡服務來實現。 它在具有高流量負載或資源密集型工作負載的分散式系統或網路中發揮著至關重要的作用，可以實現資源的高效利用，增強系統的可用性和可靠性，並提供無縫的用戶體驗。 這裡還有一個來自[DesignGuru.io](https://bit.ly/3pMiO8g)的漂亮圖表，這是一個學習面試準備系統設計的優秀網站，它強調了負載平衡器和 API 閘道之間的區別： [![負載平衡器和API網關之間的區別](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi0uzsaryydef7es0dmv.jpg)](https://bit.ly/3pMiO8g) --- ### **7. 安全** 系統設計中的安全性是指考慮和實施保護系統免受潛在安全威脅、漏洞或攻擊的措施。 它涉及設計和實施具有內建安全功能和實踐的系統，以防止未經授權的存取、資料外洩、資料外洩、惡意軟體攻擊和其他安全風險。 系統設計中的安全性通常涉及以下原則： 1. **身份驗證：**確保使用者或實體經過驗證並根據其身分和憑證被授予適當的存取權限。 2. **授權**：實施存取控制和權限，限制使用者或實體存取未經授權的資源或執行未經授權的操作。 3. **加密**：透過使用加密技術來保護敏感資料，以防止未經授權的存取或資料外洩。 4. **稽核和日誌記錄**：實施機制來追蹤和記錄系統活動和事件，以用於監視、稽核和取證目的。 5. **輸入驗證：**驗證和清理所有輸入資料，以防止常見的安全漏洞，例如 SQL 注入、跨站腳本 (XSS) 和跨站請求偽造 (CSRF) 攻擊。 6. **修補程式和更新**：使用最新的安全性修補程式和更新使系統保持最新狀態，以解決已知的安全漏洞。 7. **深度防禦**：實施多層安全控制，例如防火牆、入侵偵測系統和防毒軟體，以提供針對安全威脅的多層防禦。 8. **最小權限原則**：將使用者或實體的存取權限限製到執行其任務所需的最低限度，減少安全漏洞或攻擊的潛在影響。 9. **安全通訊**：使用安全通訊協定（例如 HTTPS 或 SSL/TLS）來保護傳輸中的資料免於攔截或竊聽。 系統設計中的安全性對於保護資料和資源的完整性、機密性和可用性以及確保系統的整體安全狀況至關重要。應考慮並納入系統的設計、開發和部署階段，以減輕潛在的安全風險並防範安全威脅。 --- ### **8. 可擴展的資料管理** 可擴展的資料管理是指系統或應用程式有效處理不斷增長的資料量而不會出現效能下降或功能遺失的能力。 它涉及設計和實施資料管理實務和技術，這些實務和技術可以處理不斷增加的資料量、使用者負載和處理要求，同時保持可接受的效能和可靠性水準。 可擴展的資料管理通常涉及以下原則： 1. **資料分區：**將大型資料集分割成更小的、可管理的區塊或分區，以將資料分佈在多個儲存或處理資源上。這有助於減少單一資源的負載，並允許並行處理和提高效能。 2. **分散式資料庫系統：**使用分散式資料庫或資料儲存解決方案，可以將資料分佈在多個節點或伺服器上，從而實現水平擴展並提高效能。 3. **資料複製**：跨多個節點或伺服器複製資料，以確保資料可用性和容錯性。這可能涉及資料鏡像、資料分片或資料快取等技術，以提高效能和可靠性。 4. **快取和記憶體中資料儲存：快取**經常存取的資料或將資料儲存在記憶體中，以便更快地檢索和處理，減少對昂貴的磁碟 I/O 操作的需求並提高效能。 5. **索引和查詢最佳化**：使用高效的索引和查詢最佳化技術來加速資料檢索和處理操作，尤其是在大型資料集中。 6. **資料壓縮：**實施資料壓縮技術以減少儲存佔用空間並提高資料傳輸效率，特別是對於大型資料集。 7. **資料歸檔和清除**：實施資料歸檔和清除實踐以刪除或歸檔舊的或不經常存取的資料，減少儲存和處理開銷並提高效能。 8. **可擴展的資料處理框架：**使用可擴展的資料處理框架，例如 Apache Hadoop、Apache Spark 或 Apache Flink，可以分散式並行方式處理大規模資料處理和分析任務。 9. **雲端的資料管理**：利用雲端的資料管理服務，例如 Amazon S3、Amazon RDS 或 Google Bigtable，提供可擴充和託管的資料儲存和處理功能。 10. **監控和可擴展性測試**：定期監控系統效能並進行可擴展性測試，以辨識和解決效能瓶頸、資源限製或其他可擴展性挑戰，並確保資料管理實踐能夠有效處理不斷增長的資料量和負載。 簡而言之，可擴展的資料管理對於需要處理大量資料、使用者負載和處理要求的現代應用程式和系統至關重要。 它使系統能夠成長並適應不斷變化的需求，而無需犧牲效能或可靠性，從而確保資料管理實踐能夠有效地處理不斷增加的資料量和負載。 --- ### **9. 設計模式** 系統設計中的[設計模式](https://medium.com/javarevisited/top-10-microservice-design-patterns-for-experienced-developers-f4f5f782810e)是指用於解決軟體系統開發過程中遇到的常見設計挑戰或問題的可重複使用解決方案或最佳實踐。 [設計模式](https://medium.com/javarevisited/21-software-design-pattern-interview-questions-and-answers-b7d1774b5dd2)是被廣泛接受和經過驗證的設計和架構軟體系統的方法，它們為設計高效、可維護和可擴展的系統提供了一組明確的指南。 系統設計中的設計模式可分為多種類型，包括： 1. **建立模式：**這些模式專注於物件建立機制，並提供以靈活且可重複使用的方式建立物件的方法。建立模式的範例包括 Singleton、Factory Method、Abstract Factory、Builder 和 Prototype 模式。 2. **結構模式：**這些模式著重於類別和物件的組織以形成更大的結構或系統。結構模式的範例包括適配器、橋、複合、裝飾器和外觀模式。 3. **行為模式：**這些模式著重於系統內物件或元件之間的互動和通訊。行為模式的範例包括觀察者、策略、命令、迭代器和模板方法模式。 4. **架構模式：**這些模式為設計系統的整體架構提供了高階指南和策略。架構模式的範例包括模型-視圖-控制器 (MVC)、模型-視圖-視圖模型 (MVVM)、分層架構、微服務和事件驅動架構模式。 設計模式在系統設計中非常重要，因為它們提供了經過驗證的標準化方法來解決常見的設計挑戰、提高程式碼品質並確保軟體系統的可維護性和可擴展性。 它們促進程式碼的可重複使用性、關注點分離和功能封裝，從而更容易管理複雜的系統並使其適應不斷變化的需求。 透過使用設計模式，開發人員可以利用現有知識和最佳實踐來設計強大而高效的系統，以滿足使用者和利害關係人的需求。 在過去的幾篇文章中，我還討論了常見的微服務設計模式，如[**事件來源**](https://medium.com/javarevisited/what-is-event-sourcing-design-pattern-in-microservices-architecture-how-does-it-work-b38c996d445a)**、** [**CQRS**](https://medium.com/javarevisited/what-is-cqrs-command-and-query-responsibility-segregation-pattern-7b1b38514edd) \*\*、SAGA\*\*、 [**每個微服務的資料庫**](https://medium.com/javarevisited/what-is-database-per-microservices-pattern-what-problem-does-it-solve-60b8c5478825)**、** [**API 閘道**](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [**斷路器**](https://medium.com/javarevisited/what-is-circuit-breaker-design-pattern-in-microservices-java-spring-cloud-netflix-hystrix-example-f285929d7f68)，並分享了[*設計微服務的最佳實踐*](https://medium.com/javarevisited/10-microservices-design-principles-every-developer-should-know-44f2f69e960f)，您也可以查看這些文章以了解有關微服務通訊的更多訊息，包括同步和非同步通訊。 --- ### 10. 性能 雖然我們已經知道效能意味著什麼，但還記得速度慢的筆記型電腦嗎？在系統設計中，效能是指軟體系統處理資料和交付結果的速度、反應能力和效率。 透過高效的演算法、快取、索引和其他技術來優化系統效能對於建立能夠處理大規模資料處理並提供最佳回應時間的系統至關重要。 系統設計中的效能是指軟體系統或應用程式有效率且有效地執行其預期功能或任務，同時滿足效能要求和期望的能力。它涵蓋了系統的回應時間、吞吐量、資源利用率、可擴展性和效率等各個方面。 效能是系統設計中的關鍵因素，因為它直接影響使用者體驗、系統可靠性和整體系統效率。效能不佳的系統可能會導致反應時間慢、吞吐量低、資源利用率高以及系統資源使用效率低下，導致系統效能下降和使用者不滿意。 系統設計人員在設計過程中需要考慮各種與效能相關的因素，例如選擇適當的演算法和資料結構、最佳化程式碼、最大限度地減少不必要的開銷、有效管理系統資源以及確保正確的系統配置和調優。 效能測試和分析技術還可用於辨識和解決效能瓶頸並優化系統效能。 優化系統設計中的效能需要在功能、複雜性和資源利用率之間進行仔細的平衡。它涉及做出明智的設計決策、使用最佳實踐以及持續監控和優化系統性能，以確保系統滿足其性能要求並提供流暢高效的用戶體驗。 ### 結論 這就是面試的基本系統設計概念。理解和掌握這些關鍵的系統設計概念對於程式設計師建立健壯、可擴展且高效的軟體系統至關重要。 這些概念，包括容錯、可靠性、可用性、快取策略、負載平衡、安全性、可擴展資料管理、設計模式和效能，在確保軟體系統滿足其預期目標、最佳執行並提供卓越的效能方面發揮著關鍵作用。 透過對這些系統設計概念的深入理解，您可以做出明智的設計決策，選擇適當的技術和技巧，並優化系統效能。 它還允許您設計具有彈性、可擴展、安全和高效的系統，能夠應對現代軟體開發的挑戰並滿足最終用戶的期望。 順便說一句，如果您正在*準備系統設計面試*並想要深入學習系統設計，那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**DesignGuru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程，如果您需要免費的系統設計課程您也可以查看下面的文章。 --- 原文出處：https://dev.to/somadevtoo/10-must-know-system-design-concepts-for-interviews-2fii

0個讚   0留言 110瀏覽

從頭開始實作 JavaScript 概念

在本文中，我們透過從頭開始建立幾個關鍵元件來探索 JavaScript 的基本建構塊。當我們深入研究這些概念時，我們將應用一系列從基礎到複雜的技術，使這種探索對於 JavaScript 世界的新手和專業人士都很有價值。 大綱 ---- - [`memoize()`](#memoize) - [`Array.map()`](#arraymap) - [`Array.filter()`](#arrayfilter) - [`Array.reduce()`](#arrayreduce) - [`bind()`](#bind) - [`call()` 、 `apply()`](#callapply) - [`setInterval()`](#setinterval) - [`cloneDeep()`](#clonedeep) - [`debounce()`](#debounce) - [`throttle()`](#throttle) - [`Promise`](#promise) - \[ `EventEmitter` ） <a name="memoize"></a> `memoize()` ----------- ### 任務說明 重新建立`memoize`函數（來自“lodash”），該函數透過快取函數呼叫的結果來優化效能。透過傳回快取的結果而不是重新計算，可以確保使用相同參數的重複函數呼叫更快。 ### 執行 ``` function customSerializer(entity, cache = new WeakSet()) { if (typeof entity !== 'object' || entity === null) { return `${typeof entity}:${entity}`; } if (cache.has(entity)) { return 'CircularReference'; } cache.add(entity); let objKeys = Object.keys(entity).sort(); let keyRepresentations = objKeys.map(key => `${customSerializer(key, cache)}:${ customSerializer(entity[key], cache) }` ); if (Array.isArray(entity)) { return `Array:[${keyRepresentations.join(',')}]`; } return `Object:{${keyRepresentations.join(',')}}`; } function myMemoize(fn) { const cache = new Map(); return function memoized(...args) { const keyRep = args.map(arg => customSerializer(arg) ).join('-'); const key = `${typeof this}:${this}-${keyRep}`; if (cache.has(key)) { return cache.get(key); } else { const result = fn.apply(this, args); cache.set(key, result); return result; } }; } ``` ### 實施的關鍵面 1. **快取機制：**它使用`Map`物件`cache`來儲存函數呼叫的結果。選擇`Map`物件是因為其高效率的鍵值配對和檢索功能。 2. **Custom Serializer** ： `customSerializer`函數將函數參數轉換為用作快取鍵的字串表示形式。此序列化考慮了基本類型、物件（包括巢狀物件）、陣列和循環參考。對於物件和陣列，它們的鍵經過排序以確保一致的字串表示形式，無論屬性聲明順序如何。 3. **序列化`this`** ： `this`的值指的是函數所屬的物件。在 JavaScript 中，方法可以根據呼叫它們的物件（即呼叫它們的上下文）而有不同的行為。這是因為`this`提供了對上下文物件的屬性和方法的存取，並且其值可能會根據函數的呼叫方式而變化。 4. **循環引用**：當物件直接或透過其屬性間接引用自身時，就會發生循環引用。這可能發生在更複雜的資料結構中，例如，物件`A`包含對物件`B`的引用，而物件`B`則直接或間接引用物件`A` 。處理循環引用以避免無限循環至關重要。 5. **使用`WeakSet`進行自動垃圾收集**： `WeakSet`保留對其物件的「弱」引用，這表示如果沒有其他引用， `WeakSet`中物件的存在不會阻止該物件被垃圾收集。此行為在需要臨時追蹤物件存在而又不會不必要地延長其生命週期的情況下特別有用。由於`customSerializer`函數可能只需要在序列化過程中標記物件的存取，而不儲存額外的資料，因此使用`WeakSet`可以確保物件不會僅僅因為它們在集合中的存在而保持活動狀態，從而防止潛在的內存洩漏。 <a name="arraymap"></a> `Array.map()` ------------- ### 任務說明 重新建立`Array.map()` ，它將轉換函數作為參數。此轉換函數將在陣列的每個元素上執行，並採用三個參數：當前元素、目前元素的索引和陣列本身。 ### 實施的關鍵面 1. **記憶體預先分配**： `new Array(this.length)`用於建立預先確定大小的陣列，以優化記憶體分配並透過避免加入元素時動態調整大小來提高效能。 ### 執行 ``` Array.prototype.myMap = function(fn) { const result = new Array(this.length); for (let i = 0; i < this.length; i++) { result[i] = fn(this[i], i, this); } return result; } ``` <a name="arrayfilter"></a> `Array.filter()` ---------------- ### 任務說明 重新建立`Array.filter()` ，它將謂詞函數作為輸入，迭代呼叫它的陣列的元素，將謂詞應用於每個元素。它傳回一個新陣列，僅包含謂詞函數傳回`true`元素。 ### 實施的關鍵面 1. **動態記憶體分配**：它動態地將符合條件的元素加入到`filteredArray`中，從而在很少有元素通過謂詞函數的情況下使該方法更有效地使用記憶體。 ### 執行 ``` Array.prototype.myFilter = function(pred) { const filteredArray = []; for (let i = 0; i < this.length; i++) { if (pred(this[i], i, this)) { filteredArray.push(this[i]); } } return filteredArray; } ``` <a name="arrayreduce"></a> `Array.reduce()` ---------------- ### 任務說明 重新建立`Array.reduce()` ，它對陣列的每個元素執行`reducer`函數，從而產生單一輸出值。 `reducer`函數有四個參數：累加器、currentValue、currentIndex 和整個陣列。 ### 實施的關鍵面 1. **`initialValue` value** ： `accumulator`和`startIndex`會根據是否將`initialValue`作為參數傳遞來初始化。如果提供了`initialValue` （意味著`arguments.length`至少為`2` ），則`accumulator`設定為此`initialValue` ，並且迭代從第0個元素開始。否則，如果未提供`initialValue` ，則將陣列本身的第 0 個元素用作`initialValue` 。 ### 執行 ``` Array.prototype.myReduce = function(callback, initialValue) { let accumulator = arguments.length >= 2 ? initialValue : this[0]; let startIndex = arguments.length >= 2 ? 0 : 1; for (let i = startIndex; i < this.length; i++) { accumulator = callback(accumulator, this[i], i, this); } return accumulator; } ``` <a name="bind"></a> `bind()` -------- ### 任務說明 重新建立`bind()`函數，該函數允許將物件以及預先指定的初始參數（如果有）作為呼叫原始函數的上下文傳遞。它還應該支援`new`運算符的使用，從而能夠建立新實例，同時維護正確的原型鏈。 ### 執行 ``` Function.prototype.mybind = function(context, ...bindArgs) { const self = this; const boundFunction = function(...callArgs) { const isNewOperatorUsed = new.target !== undefined; const thisContext = isNewOperatorUsed ? this : context; return self.apply(thisContext, bindArgs.concat(callArgs)); }; if (self.prototype) { boundFunction.prototype = Object.create(self.prototype); } return boundFunction; }; ``` ### 實施的關鍵面 1. **處理`new` Operator** ：語句`const isNewOperatorUsed = new.target !== undefined;`檢查是否透過`new`運算子將`boundFunction`作為建構函數呼叫。如果使用`new`運算符，則`thisContext`將設定為新建立的物件 ( `this` ) 而不是提供的`context` ，確認實例化應使用新的上下文而不是綁定期間提供的上下文。 2. **原型保留**：為了維護原始函數的原型鏈， `mybind`有條件地將`boundFunction`的原型設定為繼承自`self.prototype`的新物件。此步驟確保從`boundFunction` （用作建構函數時）建立的實例正確地繼承原始函數原型的屬性。此機制保留了預期的繼承層次結構並維護instanceof 檢查。 ### 將`bind()`與`new`一起使用的範例 讓我們考慮一個簡單的建構函數，它建立代表汽車的物件： ``` function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } ``` 想像一下，我們常常創造「豐田」品牌的`Car`物件。為了讓這個過程更有效率，我們可以使用`bind`為Toyotas建立一個專門的建構函數，預先填入`make`參數： ``` // Creating a specialized Toyota constructor with 'Toyota' // as the pre-set 'make' const ToyotaConstructor = Car.bind(null, 'Toyota'); // Now, we can create Toyota car instances // without specifying 'make' const myCar = new ToyotaConstructor('Camry', 2020); // Output: Car { make: 'Toyota', model: 'Camry', year: 2020 } console.log(myCar); ``` <a name="callapply"></a> `call()` 、 `apply()` -------------------- ### 任務說明 重新建立`call()`和`apply()`函數，它們允許使用給定的 this 值和單獨提供的參數來呼叫函數。 ### 執行 ``` Function.prototype.myCall = function(context, ...args) { const fnSymbol = Symbol('fnSymbol'); context[fnSymbol] = this; const result = context[fnSymbol](...args); delete context[fnSymbol]; return result; }; Function.prototype.myApply = function(context, args) { const fnSymbol = Symbol('fnSymbol'); context[fnSymbol] = this; const result = context[fnSymbol](...args); delete context[fnSymbol]; return result; }; ``` ### 實施的關鍵面 1. **屬性命名的符號用法**：為了防止覆蓋上下文物件上潛在的現有屬性或由於名稱衝突而導致意外行為，使用唯一的`Symbol`作為屬性名稱。這確保了我們的臨時屬性不會幹擾上下文物件的原始屬性。 2. **執行後清理**：函數呼叫執行後，新增到上下文物件中的臨時屬性將被刪除。此清理步驟對於避免在上下文物件上留下修改後的狀態至關重要。 <a name="setinterval"></a> `setInterval()` --------------- ### 任務說明 使用`setTimeout`重新建立`setInterval` 。此函數應以指定的時間間隔重複呼叫提供的回呼函數。它會傳回一個函數，當呼叫該函數時，該函數會停止間隔。 ### 執行 ``` function mySetInterval(callback, interval) { let timerId; const repeater = () => { callback(); timerId = setTimeout(repeater, interval); }; repeater(); return () => { clearTimeout(timerId); }; } ``` ### 實施的關鍵面 1. **取消功能**： `mySetInterval`傳回的函數提供了一種簡單直接的方法來取消正在進行的間隔，而無需在函數範圍之外公開或管理計時器 ID。 <a name="clonedeep"></a> `cloneDeep()` ------------- ### 任務說明 重新建立執行給定輸入的深度複製的`cloneDeep`函數（來自“lodash”）。該函數應該能夠複製複雜的資料結構，包括物件、陣列、映射、集合、日期和正規表示式，並保持每個元素的結構和類型完整性。 ### 執行 ``` function myCloneDeep(entity, map = new WeakMap()) { if (entity === null || typeof entity !== 'object') { return entity; } if (map.has(entity)) { return map.get(entity); } let cloned; switch (true) { case Array.isArray(entity): cloned = []; map.set(entity, cloned); cloned = entity.map(item => myCloneDeep(item, map)); break; case entity instanceof Date: cloned = new Date(entity.getTime()); break; case entity instanceof Map: cloned = new Map(Array.from(entity.entries(), ([key, val]) => [myCloneDeep(key, map), myCloneDeep(val, map)])); break; case entity instanceof Set: cloned = new Set(Array.from(entity.values(), val => myCloneDeep(val, map))); break; case entity instanceof RegExp: cloned = new RegExp(entity.source, entity.flags); break; default: cloned = Object.create( Object.getPrototypeOf(entity)); map.set(entity, cloned); for (let key in entity) { if (entity.hasOwnProperty(key)) { cloned[key] = myCloneDeep(entity[key], map); } } } return cloned; } ``` ### 實施的關鍵面 1. **循環引用處理**：利用`WeakMap`來追蹤已存取的物件。如果遇到已經克隆的物件，則返回先前克隆的物件，有效處理循環參考並防止堆疊溢位錯誤。 2. **特殊物件的處理**：區分幾種物件類型（ `Array` 、 `Date` 、 `Map` 、 `Sets` 、 `RegExp` ），以確保每種類型都被適當地克隆，並保留其特定特徵。 ``` - **`Array`**: Recursively clones each element, ensuring deep cloning. ``` ``` - **`Date`**: Copies the date using its numeric value (timestamp). ``` ``` - **Maps and Sets**: Constructs a new instance, recursively cloning each entry (for `Map`) or value (for `Set`). ``` ``` - **`RegExp`**: Clones by creating a new instance with the source and flags of the original. ``` 3. **物件屬性的複製**：當輸入是普通物件時，它會建立一個與原始物件具有相同原型的物件，然後遞歸地複製每個自己的屬性，在保持原型鏈的同時確保深度克隆。 4. **效率和性能**：利用`WeakMap`進行記憶，有效處理具有重複引用和循環的複雜大型結構，透過避免冗餘克隆來確保最佳性能。 <a name="debounce"></a> `debounce()` ------------ ### 任務說明 重新建立`debounce`函數（來自“lodash”），它允許限制給定回調函數觸發的頻率。當在短時間內重複呼叫時，在指定的延遲後僅執行最後一次呼叫。 ``` function myDebounce(func, delay) { let timerId; const debounced = function(...args) { clearTimeout(timerId); timerId = setTimeout(() => { func.apply(this, args); }, delay); }; debounced.cancel = function() { clearTimeout(timerId); timerId = null; }; debounced.flush = function() { clearTimeout(timerId); func.apply(this, arguments); timerId = null; }; return debounced; } ``` ### 實施的關鍵面 1. **取消功能**：引入`.cancel`方法使外部控制能夠取消去抖函數的任何暫停執行。這增加了靈活性，允許響應特定事件或條件而取消去抖功能。 2. **透過 Flush 立即執行**： `.flush`方法允許立即執行去抖函數，而不考慮延遲。這在需要確保立即應用去抖函數的效果的情況下非常有用，例如，在卸載元件或完成互動之前。 <a name="throttle"></a> `throttle()` ------------ ### 任務說明 重新建立`throttle`函數（來自“lodash”），它確保給定的回調函數在每個指定的時間間隔內最多只呼叫一次（在我們的例子中是在開始時）。與去抖動不同，限制保證函數會定期執行，確保進行更新，儘管更新速度是受控的。 ### 執行 ``` function myThrottle(func, timeout) { let timerId = null; const throttled = function(...args) { if (timerId === null) { func.apply(this, args) timerId = setTimeout(() => { timerId = null; }, timeout) } } throttled.cancel = function() { clearTimeout(timerId); timerId = null; }; return throttled; } ``` ### 實施的關鍵面 1. **取消功能**：引入`.cancel`方法可以清除節流計時器的任何計劃重置。這在清理階段非常有用，例如 UI 庫/框架中的元件卸載，以防止過時的執行並有效管理資源。 <a name="promise"></a> `Promise` --------- ### 任務說明 重新建立`Promise`類別。它是為非同步程式設計的構造，允許暫停程式碼的執行，直到非同步進程完成。從本質上講，承諾代表了在其建立時不一定已知的值的代理。它允許您將處理程序與非同步操作的最終成功值或失敗原因相關聯。這使得非同步方法可以像同步方法一樣傳回值：非同步方法不是立即傳回最終值，而是傳回一個在未來某個時刻提供該值的承諾。 `Promise`包含處理已完成和拒絕狀態的方法（ `then` 、 `catch` ），以及無論結果如何都執行程式碼的方法（ `finally` ）。 ``` class MyPromise { constructor(executor) { ... } then(onFulfilled, onRejected) { ... } catch(onRejected) { ... } finally(callback) { ... } } ``` ### `constructor`實現 ``` constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onFulfilledCallbacks.forEach(fn => fn()); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach(fn => fn()); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } ``` ### `constructor`實現的關鍵方面 1. **狀態管理**：以「待處理」狀態初始化。解決時切換為“已完成”，被拒絕時切換為“拒絕”。 2. **值和原因**：保存承諾的最終結果（ `value` ）或拒絕的原因（ `reason` ）。 - **處理非同步**：接受包含非同步操作的`executor`函數。 `executor`採用兩個函數， `resolve`和`reject` ，當呼叫它們時，將promise轉換到對應的狀態。 3. **回呼陣列**：維護回呼佇列（ `onFulfilledCallbacks` 、 `onRejectedCallbacks` ），以用於等待解決或拒絕承諾的延遲操作。 ### `.then`實施 ``` resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError( 'Chaining cycle detected for promise')); } if (x instanceof MyPromise) { x.then(resolve, reject); } else { resolve(x); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value; onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; }; let promise2 = new MyPromise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { let x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); } else if (this.state === 'rejected') { setTimeout(() => { try { let x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); } else if (this.state === 'pending') { this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { let x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { let x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); }); } }); return promise2; } ``` ### `.then`實施的關鍵方面 1. **預設處理程序**：將非函數處理程序轉換為標識函數（用於實現）或拋出程序（用於拒絕），以確保承諾鏈中的正確轉發和錯誤處理。 2. **Promise 連結**： `then`方法允許連結 Promise，從而實現順序非同步操作。它會建立一個新的 Promise ( `promise2` )，該 Promise 取決於傳遞給它的回呼函數 ( `onFulfilled` 、 `onRejected` ) 的結果。 3. **處理解決方案和拒絕**：僅在當前承諾解決（履行或拒絕）後才會呼叫所提供的回調。每個回呼的結果 ( `x` ) 可能是一個值或另一個 Promise，決定了`promise2`的解析。 4. **防止連結循環**： `resolvePromise`函數檢查`promise2`是否與結果 ( `x` ) 相同，避免 Promise 等待自身的循環，從而導致`TypeError` 。 5. **支援 MyPromise 和 Non-Promise 值**：如果結果 ( `x` ) 是`MyPromise`的實例， `then`使用其解析或拒絕來解決`promise2` 。此功能支援基於 Promise 的操作的無縫集成，無論是來自`MyPromise`實例還是本機 JavaScript Promise，假設它們具有相似的行為。對於非 Promise 值，或當`onFulfilled`或`onRejected`只是傳回一個值時， `promise2`將使用該值進行解析，從而在 Promise 鏈中實現簡單的轉換或分支邏輯。 6. **非同步執行保證**：透過使用`setTimeout`延遲`onFulfilled`和`onRejected`的執行， `then`確保非同步為。此延遲保持一致的執行順序，確保`onFulfilled`和`onRejected`在執行堆疊清除後呼叫。 7. **錯誤處理**：如果`onFulfilled`或`onRejected`內發生異常， `promise2`會因錯誤而被拒絕，從而允許錯誤處理通過 Promise 鏈傳播。 ### `catch`並`finally`實現 ``` static resolve(value) { if (value instanceof MyPromise) { return value; } return new MyPromise((resolve, reject) => resolve(value)); } catch(onRejected) { return this.then(null, onRejected); } finally(callback) { return this.then( value => MyPromise.resolve(callback()) .then(() => value), reason => MyPromise.resolve(callback()) .then(() => { throw reason; }) ); } ``` ### `.catch`實施的關鍵面向： 1. **簡化的錯誤處理：** `.catch`方法是`.then(null, onRejected)`的簡寫，專門專注於處理拒絕場景。當只需要拒絕處理程序時，它允許更清晰的語法，從而提高程式碼的可讀性和可維護性。 2. **Promise Chaining 支援：**由於它在內部委託給`.then` ，所以`.catch`返回一個新的 Promise，從而保持 Promise 鏈功能。這允許在錯誤恢復或透過重新拋出或返回新的被拒絕的承諾傳播錯誤後繼續進行鏈操作。 3. **錯誤傳播：**如果提供了`onRejected`並且執行時沒有錯誤，則傳回的 Promise 將使用`onRejected`的傳回值進行解析，從而有效地允許 Promise 鏈中的錯誤復原。如果`onRejected`拋出錯誤或傳回被拒絕的 Promise，則錯誤會沿著鏈傳播。 ### `.finally`實現的關鍵面向： 1. **始終執行：** `.finally`方法確保執行提供的`callback` ，無論 Promise 是履行還是拒絕。這對於需要在非同步操作之後發生的清理操作特別有用，與其結果無關。 2. **傳回值保留：**雖然`.finally`中的`callback`不接收任何參數（與`.then`或`.catch`不同），但 Promise 的原始履行值或拒絕原因將被保留並透過鏈傳遞。從`.finally`傳回的 Promise 會以相同的值或原因被解析或拒絕，除非`callback`本身導致被拒絕的 Promise。 3. **錯誤處理與傳播：**如果`callback`執行成功， `.finally`傳回的 Promise 將按照與原始 Promise 相同的方式進行結算。但是，如果`callback`拋出錯誤或返回被拒絕的 Promise，則從`.finally`返回的 Promise 會因這個新錯誤而被拒絕，從而允許錯誤攔截並更改 Promise 鏈中的拒絕原因。 <a name="eventemitter"></a> `EventEmitter` -------------- ### 任務說明 重新建立`EventEmitter`類，該類別允許實現觀察者模式，使物件（稱為「發射器」）能夠發出命名事件，從而導致呼叫先前註冊的偵聽器（或「處理程序」）。這是 Node.js 中用於處理非同步事件的關鍵元件，廣泛用於發出訊號以及管理應用程式狀態和行為。實作自訂`EventEmitter`涉及建立用於註冊事件偵聽器、觸發事件和刪除偵聽器的方法。 ``` class MyEventEmitter { constructor() { this.events = {}; } on(eventName, listener) { if (!this.events[eventName]) { this.events[eventName] = []; } this.events[eventName].push(listener); } once(eventName, listener) { const onceWrapper = (...args) => { listener.apply(this, args); this.off(eventName, onceWrapper); }; this.on(eventName, onceWrapper); } emit(eventName, ...args) { const listeners = this.events[eventName]; if (listeners && listeners.length) { listeners.forEach((listener) => { listener.apply(this, args); }); } } off(eventName, listenerToRemove) { if (!this.events[eventName]) { return; } const filterListeners = (listener) => listener !== listenerToRemove; this.events[eventName] = this.events[eventName].filter(filterListeners); } } ``` ### `EventEmitter`實現的關鍵面 1. **EventListener Registration `.on` ：**將偵聽器函數新增至指定事件的偵聽器陣列中，如果該事件名稱尚不存在則建立一個新陣列。 2. **一次性事件偵聽器`.once` ：**註冊一個偵聽器，該偵聽器在呼叫一次後會自行刪除。它將原始偵聽器包裝在一個函數 ( `onceWrapper` ) 中，該函數也會在執行後刪除包裝器，確保偵聽器僅觸發一次。 3. **發出事件`.emit` ：**觸發事件，使用提供的參數呼叫所有已註冊的偵聽器。它將參數應用於每個偵聽器函數，從而允許將資料傳遞給偵聽器。 4. **刪除事件偵聽器`.off` ：**從事件偵聽器陣列中刪除特定偵聽器。如果事件在刪除後沒有偵聽器，則可以將其保留為空陣列或可選地進一步清理（此實作中未顯示）。 --- 原文出處：https://dev.to/antonzo/implementing-javascript-concepts-from-scratch-4623

0個讚   0留言 108瀏覽

21 個正在改變世界的人工智慧工具

世界上充滿了有前景的人工智慧工具，如 Sora、ChatGPT 以及更多即將推出的工具。 我收集了一些你必須使用的令人興奮的人工智慧工具。 該清單包括 Devin AI 的開源替代品、Notion、5 秒內的語音克隆、電子郵件自動化軟體以及您從未聽說過的工具。好奇心超載！ 別忘了給他們加星號🌟 讓我們涵蓋這一切！ --- 1. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ---------------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deak7rre409rzv5j5viv.png) Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。 我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 因此，您可以繪製資料集的圖表，並使用類似 GUI 的滑桿來提供使用其他實用功能來處理資料的選項。 雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。 另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy，您將親身體驗其用戶友好的介面和高效的資料處理。 在底層，Taipy 利用各種函式庫來簡化開發並增強功能。 ![圖書館](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9xts3nof4uapr7dakrl.png) 開始使用以下命令。 ``` pip install taipy ``` 我們來談談最新的[Taipy v3.1 版本](https://docs.taipy.io/en/latest/relnotes/)。 最新版本使得在 Taipy 的多功能零件物件中可視化任何 HTML 或 Python 物件成為可能。 這意味著[Folium](https://python-visualization.github.io/folium/latest/) 、 [Bokeh](https://bokeh.org/) 、 [Vega-Altair](https://altair-viz.github.io/)和[Matplotlib](https://matplotlib.org/)等程式庫現在可用於視覺化。 這也帶來了對[Plotly python](https://plotly.com/python/)的原生支持，使繪製圖表變得更加容易。 ![陰謀蟒蛇](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdewvex88md09hvu3s80.png) 他們還使用分散式運算提高了效能，但最好的部分是 Taipy，它的所有依賴項現在都與 Python 3.12 完全相容，因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 例如，您可以看到[聊天演示](https://docs.taipy.io/en/release-3.1/gallery/llm/5_chatbot/)，它使用 OpenAI 的 GPT-4 API 來產生對您的訊息的回應。您可以輕鬆更改程式碼以使用任何其他 API 或模型。 ![聊天演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kug1mclhmzyad0hjchif.png) 另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。 ![太皮工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1umm5hcxes0ydbuspb.png) 您也可以使用 Taipy 雲端部署應用程式。 如果您想閱讀部落格來了解程式碼庫結構，您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難，但 Taipy 提供了[10 多個演示教程，](https://docs.taipy.io/en/release-3.1/gallery/)其中包含程式碼和適當的文件供您遵循。 例如，一些現場演示範例和專案想法： - [新冠儀表板](https://covid-dashboard.taipy.cloud/Country) - [推文生成](https://tweet-generation.taipy.cloud/) - [資料視覺化](https://production-planning.taipy.cloud/Data-Visualization) - [即時人臉辨識](https://face-recognition.taipy.cloud/) - [國際象棋大師](https://github.com/KorieDrakeChaney/taipy-chess) Taipy 在 GitHub 上有 7k+ Stars，並且處於`v3`版本，因此它們正在不斷改進。 https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 2. [PR Agent](https://github.com/Codium-ai/pr-agent) - 自動拉取請求分析、回饋、建議的工具。 ------------------------------------------------------------------------- ![公關代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sq9u9ktdhdu4pax9u7i.gif) 這是一個開源工具，可幫助有效地審查和處理拉取請求。它有許多獨特的選項，並提供跨各種 git 提供者的廣泛的拉取請求功能。 每天有數百萬個開源專案和數百個 Pull 請求，因此有一個可以幫助您的朋友是非常好的事情。 我是開源維護者，所以我知道有時會變得多麼困難，特別是每天都要審查這麼多的 Pull 請求。 無論如何，這就是公關代理商的幕後工作方式。 ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kkd9vxxqhu99f2elv8c.png) 您必須使用`@CodiumAI-Agent /review`對拉取請求發表評論，代理商將透過對 PR 的審查進行回應。有很多可用的選項，例如`describe`和`improve` 。 他們也提供了 [PR-Agent 工具](https://pr-agent-docs.codium.ai/tools/)，每個頁面都有一個專門的頁面來解釋如何使用它。 您可以閱讀[文件](https://pr-agent-docs.codium.ai/installation/)並查看[範例結果](https://github.com/Codium-ai/pr-agent?tab=readme-ov-file#example-results)。 最好的部分是您甚至可以將其作為[GitHub Action](https://pr-agent-docs.codium.ai/installation/github/#run-as-a-github-action)執行。他們還提供了一個專業版本，有更多的選擇，但免費套餐足以開始使用。 如果您正在尋找好的文章，我推薦[使用 CodiumAI PR-Agent 自動進行拉取請求審查和](https://rnemet.dev/posts/ai/codium-pragent/)[CodiumAI PR-Agent 讓開發人員的生活更輕鬆的 5 個原因](https://medium.com/@mengineer/5-reasons-why-codiumai-pr-agent-is-making-developers-lives-easier-e040be0f6a36)。這些提供了有關 PR Agent 的大量概述。 它們在 GitHub 上有大約 3800 個 Star，被 300 多名開發人員使用，並且是使用 Python 建構的。雖然它們可能不是非常受歡迎，但它們的用例非常好。 https://github.com/Codium-ai/pr-agent 明星公關代理人 ⭐️ --- 3. [Mintlify](https://github.com/mintlify/writer) - 在建置時出現的文件。 -------------------------------------------------------------- ![精簡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvk07kmn8p48cpssogov.png) Mintlify 是一款由人工智慧驅動的文件編寫器，您只需 1 秒鐘即可編寫程式碼文件 :D 幾個月前我發現了 Mintlify，從那時起我就一直是它的粉絲。我見過很多公司使用它，甚至我使用我的商務電子郵件產生了完整的文件，結果證明這是非常簡單和體面的。如果您需要詳細的文件，Mintlify 就是解決方案。 另一個用例是根據我們將在這裡討論的程式碼產生文件。 您可以安裝[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=mintlify.document)或將其安裝在[IntelliJ](https://plugins.jetbrains.com/plugin/18606-mintlify-doc-writer)上。 您只需突出顯示程式碼或將遊標放在要記錄的行上。然後點選「編寫文件」按鈕（或按 ⌘ + 。） 您可以閱讀[文件](https://github.com/mintlify/writer?tab=readme-ov-file#%EF%B8%8F-mintlify-writer)和[安全指南](https://writer.mintlify.com/security)。 如果您更喜歡教程，那麼您可以觀看[Mintlify 的工作原理](https://www.loom.com/embed/3dbfcd7e0e1b47519d957746e05bf0f4)。它支援 10 多種程式語言，並支援許多文件字串格式，例如 JSDoc、reST、NumPy 等。 順便說一句，他們的網站連結是[writer.mintlify.com](https://writer.mintlify.com/) ；回購協議中目前的似乎是錯誤的。 它在 GitHub 上有大約 2.4k 顆星，受到許多開發人員的喜愛，並且是使用 TypeScript 建構的。 https://github.com/mintlify/writer Star Mintlify ⭐️ --- 4.[螢幕截圖到程式碼](https://github.com/abi/screenshot-to-code)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 --------------------------------------------------------------------------- ![截圖到程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5akiyz5telxqqsj32ftu.png) 這是一個非常受歡迎的開源專案，但我可以肯定地說，很多開發人員仍然沒有意識到這一點。使用此功能，您可以將使用者介面的建置速度提高 10 倍。 這是一個簡單的工具，可以使用 AI 將螢幕截圖、模型和 Figma 設計轉換為乾淨、實用的程式碼。 該應用程式有一個 React/Vite 前端和一個 FastAPI 後端。如果您想使用 Claude Sonnet 或實驗性視訊支持，您將需要一個能夠存取 GPT-4 Vision API 的 OpenAI API 金鑰或一個 Anthropic 金鑰。您可以閱讀[指南](https://github.com/abi/screenshot-to-code?tab=readme-ov-file#-getting-started)來開始。 您可以在託管版本上[即時試用](https://screenshottocode.com/)，並觀看 wiki 上提供的[一系列演示影片](https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code)。 他們在 GitHub 上擁有超過 47k 顆星星，並支援許多技術堆疊，例如 React 和 Vue，以及不錯的 AI 模型，例如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。 https://github.com/abi/screenshot-to-code 將螢幕截圖轉為程式碼 ⭐️ --- 5. [FaceSwap](https://github.com/deepfakes/faceswap) - 適合所有人的 Deepfakes 軟體。 --------------------------------------------------------------------------- ![換臉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps8nidwchglscdrk0117.png) 我總是對 Deepfakes 著迷，因為這就是某些人工智慧的工作原理，尤其是使用影片的人工智慧。 相信我！我們中的許多人甚至不使用它來建立影片，我們只是修改程式碼來看看它的作用，不道德的使用並不能代表它的建立原因、我們現在如何使用它，或者我們對它的未來的看法。 您應該觀看此影片以了解電腦如何辨識臉！觀看[此影片](https://www.youtube.com/watch?v=aircAruvnKk)以了解神經網路的基本功能。 https://www.youtube.com/watch?v=R9OHn5ZF4Uo 您可以閱讀[INSTALL.md](https://github.com/deepfakes/faceswap/blob/master/INSTALL.md)以取得詳細的安裝指南。根據文件，您需要具有 CUDA 支援的現代 GPU 才能獲得最佳效能。許多 AMD GPU 透過 DirectML (Windows) 和 ROCm (Linux) 支援。 您可以閱讀<a href="">文件</a>、觀看[演示影片](https://www.dailymotion.com/video/x810mot)並存取他們的[部落格](https://faceswap.dev/blog/)以觀看具有其他用例的會議影片。 我最喜歡的事實是，他們有一個非常簡單的部分，介紹任何人如何為該專案做出貢獻，包括對生成模型感興趣的人、開發人員、非開發高級用戶、最終用戶，當然還有討厭者:) 他們在 GitHub 上有 48k+ Stars，這使得他們足夠可信。 https://github.com/deepfakes/faceswap 明星 FaceSwap ⭐️ --- 6. [Amica](https://github.com/semperai/amica) - 讓您可以在瀏覽器中輕鬆地與 3D 角色聊天。 ---------------------------------------------------------------------- ![朋友](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nvizcn717h3cteocft5.png) Amica 是一個開源接口，用於透過語音合成和語音辨識與 3D 角色進行互動式通訊。 您可以匯入 VRM 文件，調整聲音以適合角色，並產生包含情緒表達的回應文字。 他們使用 Three.js、OpenAI、Whisper、Bakllava 等進行視覺處理。您可以閱讀[Amica 的工作原理](https://docs.heyamica.com/overview/how-amica-works)及其所涉及的[核心概念](https://docs.heyamica.com/overview/core-concepts)。 您可以克隆該存儲庫並使用它來[開始](https://docs.heyamica.com/getting-started/installation)。 ``` npm i npm run dev ``` 您可以閱讀[文件](https://docs.heyamica.com/)並查看[演示](https://amica.arbius.ai/)，這真是太棒了：D ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92iv9y2auly6tvenee82.png) 您可以觀看這段簡短的影片，了解它的功能。 https://www.youtube.com/watch?v=hUxAEnFiXH8 Amica 使用 Tauri 建立桌面應用程式。 他們在 GitHub 上有 400+ Stars，而且看起來非常容易使用。 https://github.com/semperai/amica Star Amica ⭐️ --- 7. [Bark](https://github.com/suno-ai/bark) - 文字提示的生成音訊模型。 --------------------------------------------------------- ![吠](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pt8h5filcsk9pcxsx0ky.png) Bark 是 Suno 建立的基於轉換器的文本到音訊模型。 Bark 可以產生高度逼真的多語言語音以及其他音訊 - 包括音樂、背景噪音和簡單的音效。 該模型還可以產生非語言交流，如笑、嘆息和哭泣。哇！ 它擁有 MIT 許可證，這意味著它現在可用於商業用途。 Bark 支援超過 100 種語言的揚聲器預設。您可以[在此處](https://suno-ai.notion.site/8b8e8749ed514b0cbf3f699013548683?v=bc67cff786b04b50b3ceb756fd05f68c)查看支援的語音預設庫。 根據文件，Bark 嘗試匹配給定預設的語氣、音高、情緒和韻律，但目前不支援自訂語音複製。該模型還嘗試保留音樂、環境噪音等。這超出了任何人的需要。 您可以這樣使用它。如果您想將其與 Transformers 庫一起使用，請閱讀[本文](https://github.com/suno-ai/bark?tab=readme-ov-file#-transformers-usage)。 ``` from bark import SAMPLE_RATE, generate_audio, preload_models from scipy.io.wavfile import write as write_wav from IPython.display import Audio # download and load all models preload_models() # generate audio from text text_prompt = """ Hello, my name is Suno. And, uh — and I like pizza. [laughs] But I also have other interests such as playing tic tac toe. """ audio_array = generate_audio(text_prompt) # save audio to disk write_wav("bark_generation.wav", SAMPLE_RATE, audio_array) # play text in notebook Audio(audio_array, rate=SAMPLE_RATE) ``` Bark 開箱即用支援各種語言，並自動根據輸入文字確定語言。當提示使用程式碼轉換文字時，Bark 將嘗試使用相應語言的本地口音。 您可以在[Google Colab](https://colab.research.google.com/drive/1eJfA2XUa-mXwdMy7DoYKVYHI1iTd9Vkt?usp=sharing) & [Replicate](https://replicate.com/suno-ai/bark)閱讀<a href="">文件</a>並查看演示。 您也可以在筆記本部分閱讀有關語音一致性增強和其他形式的[範例](https://github.com/suno-ai/bark/tree/main/notebooks)。 ![聲音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zirh2dimya9yt8p0e7ry.png) 它們支援多種語言，如英語、印地語、德語、法語等。 他們在 GitHub 上擁有 30k+ Stars，並且經營超過 300,000 人的社區，這使他們成為值得選擇的選擇。 https://github.com/suno-ai/bark 星樹 ⭐️ --- 8. [GPTDiscord](https://github.com/Kav-K/GPTDiscord) - Discord 的一體化 GPT 介面。 --------------------------------------------------------------------------- ![概述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kknaijkgi2rr7b0kefo7.png) 我是 Discord 上多個社群的成員，具有出色用例的機器人可以改善整體最終用戶體驗。 這個機器人的功能與 ChatGPT 網路相當，甚至在某些事情上做得更好！ 它們支援一切，從多模態圖像理解、程式碼解釋、高級資料分析、文件問答、與 Wolfram Alpha 的網路連接聊天和 Google 存取、AI 審核、使用 DALL-E 生成圖像等等！ 您可以閱讀 GPTDiscord 的所有高效[功能](https://github.com/Kav-K/GPTDiscord?tab=readme-ov-file#features)。 您可以閱讀[安裝指南](https://github.com/Kav-K/GPTDiscord/blob/main/detailed_guides/INSTALLATION.md)。 您可以查看[螢幕截圖](https://github.com/Kav-K/GPTDiscord?tab=readme-ov-file#screenshots)並查看不同目的的[詳細指南](https://github.com/Kav-K/GPTDiscord/tree/main/detailed_guides)清單。 他們在 GitHub 上有大約 1.8k+ Stars，而且肯定在進步。 https://github.com/Kav-K/GPTDiscord 星 GPTDiscord ⭐️ --- 9. [Upscayl](https://github.com/upscayl/upscayl) - 開源 AI 影像擴大機。 --------------------------------------------------------------- ![高級](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c1837rev5jb260ro2sd.png) 適用於 Linux、MacOS 和 Windows 的免費開源 AI Image Upscaler 採用 Linux 優先概念建構。 它可能與全端無關，但它對於升級圖像很有用。 ![高級](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vyo1eqfz3hh0rg3lmkz.png) ![高級](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4qq1wm3wey3vihn9al4.png) 透過最先進的人工智慧，Upscayl 可以幫助您將低解析度影像變成高解析度。清脆又鋒利！ 您可以閱讀[安裝指南](https://github.com/upscayl/upscayl?tab=readme-ov-file#-installation)，並查看 Upscayl 之前/之後的[比較](https://github.com/upscayl/upscayl/blob/main/COMPARISONS.MD)。 ![比較](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f14g2vv58ljhayluh8l.png) 它在 GitHub 上有 23k+ Stars，並且基於 TypeScript 建置。 https://github.com/upscayl/upscayl 明星 Upscayl ⭐️ --- 10. [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy) - Notion 的開源替代品。 ------------------------------------------------------------------------ ![應用程式串流](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dovisje3bh7ec1h9uqau.png) AppFlowy 是一個由人工智慧驅動的安全工作空間，類似於您在不失去資料控制的情況下實現更多目標的概念。 ![產品](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul096wqbsxrs8shvwp6c.png) 他們還提供行動應用程式，這是一個優點。 您可以閱讀[文件](https://docs.appflowy.io/docs)並了解[安裝方法](https://docs.appflowy.io/docs/appflowy/install-appflowy/installation-methods)。 他們還支援[使用 Supabase 自託管 AppFlowy](https://docs.appflowy.io/docs/guides/appflowy) 。對於喜歡 Supabase 功能或使用 Supabase 作為其基礎設施的用戶來說，這是理想的選擇。 您還應該檢查[此內容](https://docs.appflowy.io/docs/appflowy/product/data-storage)以了解有關資料儲存、Markdown、捷徑、主題、涉及的人工智慧和插件的更多資訊。 AppFlowy 在 GitHub 上擁有超過 47,000 顆星，發布了 64 個以上版本。 https://github.com/AppFlowy-IO/AppFlowy 明星 AppFlowy ⭐️ --- 11. [Leon](https://github.com/leon-ai/leon) - 您的開源個人助理。 ------------------------------------------------------- ![萊昂](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnv85osce6ps9xodf07t.png) Leon 是一個開源個人助理，可以駐留在您的伺服器上。 當你要求他做事時，他就會做事。 你可以跟他說話，他也可以跟你說話。你也可以給他發短信，他也可以傳簡訊給你。如果您願意，Leon 可以透過離線方式與您溝通，以保護您的隱私。這是萊昂目前可以做的[技能](https://github.com/leon-ai/leon/tree/develop/skills)清單。 你應該讀一下[萊昂背後的故事](https://blog.getleon.ai/the-story-behind-leon/)。您還可以觀看此演示以了解有關 Leon 的更多資訊。 https://www.youtube.com/watch?v=p7GRGiicO1c ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70mddmgadcbfwzugd1bl.png) 這是Leon的高層架構模式。 ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6b9vgj3fagera0bsyur.png) 這是開始使用 npm 指令的方法。 ``` # install leon global cli npm install --global @leon-ai/cli # install leon leon create birth ``` 您可以閱讀[文件](https://docs.getleon.ai/)。 它在 GitHub 上擁有超過 14k 顆星，並且還在不斷增長。 https://github.com/leon-ai/leon 明星萊昂 ⭐️ --- 12. [n8n](https://github.com/n8n-io/n8n) - 工作流程自動化工具。 ----------------------------------------------------- ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pqsc84nhgj0b9dhfaxo.png) n8n 是一個可擴展的工作流程自動化工具。透過公平程式碼分發模型，n8n 將始終擁有可見的原始程式碼，可用於自託管，並允許您加入自訂函數、邏輯和應用程式。 ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxnp57kw5szbpj6mfs1p.png) n8n 基於節點的方法使其具有高度通用性，使您能夠將任何事物連接到任何事物。 有[400 多個集成選項](https://n8n.io/integrations)，這幾乎是瘋狂的！ 您可以看到所有[安裝](https://docs.n8n.io/choose-n8n/)選項，包括 Docker、npm 和自架。 開始使用以下命令。 ``` npx n8n ``` 此命令將下載啟動 n8n 所需的所有內容。然後，您可以透過開啟`http://localhost:5678`來存取 n8n 並開始建置工作流程。 在 YouTube 上觀看此[快速入門影片](https://www.youtube.com/watch?v=1MwSoB0gnM4)！ https://www.youtube.com/watch?v=1MwSoB0gnM4 您可以閱讀[文件](https://docs.n8n.io/)並閱讀本[指南](https://docs.n8n.io/try-it-out/)，以便根據您的需求快速開始。 他們還提供初學者和中級[課程，](https://docs.n8n.io/courses/)以便輕鬆學習。 他們在 GitHub 上有 39k+ Stars，並提供兩個包供整體使用。 https://github.com/n8n-io/n8n 明星 n8n ⭐️ --- 13. [Quivr](https://github.com/QuivrHQ/quivr) - 你的 GenAI 第二腦。 ------------------------------------------------------------- ![奎弗爾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl12fl88mdjmfkfath1t.png) Quivr，您的第二個大腦，利用 GenerativeAI 的力量成為您的私人助理！可以將其視為黑曜石，但增強了人工智慧功能。 ![統計資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a27c2ubbmri0b2xlh1l.png) 您可以閱讀[安裝指南](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#getting-started-)。 您可以閱讀[文件](https://docs.quivr.app/home/intro)並觀看[示範影片](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#demo-highlights-)。 他們可以提供更好的免費套餐，但這足以在您端進行測試。 它在 GitHub 上擁有超過 30k 顆星，發布了 220 多個版本，這意味著它們正在不斷改進。 https://github.com/QuivrHQ/quivr Star Quivr ⭐️ --- 14. [meilisearch](https://github.com/meilisearch/meilisearch) - 適合您的應用程式、網站和工作流程的搜尋 API。 ---------------------------------------------------------------------------------------- ![搜尋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1rm66br9fbsa76n2e8i.png) Meilisearch 可協助您快速打造令人愉悅的搜尋體驗，提供開箱即用的功能來加快您的工作流程。 您一定看過可以使用`Ctrl + k`搜尋文件的軟體網站，例如 GitHub 或 Appwrite。那麼，meilisearch 可以幫助您實現相同的功能。 與 Algolia、Typesense 和 Elasticsearch 相比，這是唯一基於 Rust 建構的。您可以閱讀有關可用替代選項的[比較](https://www.meilisearch.com/docs/learn/what_is_meilisearch/comparison_to_alternatives):) Meilisearch 不應該是您的主要資料儲存。它是一個搜尋引擎，而不是一個資料庫。 Meilisearch 應僅包含您希望使用者搜尋的資料。如果您必須加入與搜尋無關的資料，請務必使這些字段不可搜尋，以提高相關性並縮短響應時間。 無論您是在開發網站還是應用程式，Meilisearch 都能提供直覺的即輸入即搜尋體驗，回應時間低於 50 毫秒。 他們提供[SDK 和庫，](https://www.meilisearch.com/docs/learn/what_is_meilisearch/sdks?utm_campaign=oss&utm_source=github&utm_medium=meilisearch&utm_content=sdks-link)用於 Meilsearch 和您喜歡的語言或框架之間的無縫整合。相信我，選擇的數量是瘋狂的。 他們還提供了一個[抓取工具](https://github.com/meilisearch/docs-scraper)來自動讀取文件內容並將其儲存到Meilisearch。 他們展示了許多[有用的功能](https://www.meilisearch.com/docs/learn/what_is_meilisearch/overview#features)，例如即使查詢包含拼寫錯誤和拼寫錯誤（他們將其稱為`typo tolerance` ，您也可以獲得相關匹配。 有很多可用的選項，但讓我們看看如何使用 React 來做到這一點。 開始使用以下命令。 ``` yarn add react-instantsearch @meilisearch/instant-meilisearch # or npm install react-instantsearch @meilisearch/instant-meilisearch # or pnpm add react-instantsearch @meilisearch/instant-meilisearch ``` 您可以這樣使用它。 ``` import React from 'react'; import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch'; import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'; const { searchClient } = instantMeiliSearch( 'https://ms-adf78ae33284-106.lon.meilisearch.io', 'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303' ); const App = () => ( <InstantSearch indexName="steam-video-games" searchClient={searchClient} > <SearchBox /> <Hits hitComponent={Hit} /> </InstantSearch> ); const Hit = ({ hit }) => <Highlight attribute="name" hit={hit} />; export default App ``` 您可以查看此[codesandbox](https://codesandbox.io/p/sandbox/eager-dust-f98w2w)以取得詳細的範例以開始使用。 正如我所說，他們在幕後提供了很多東西。例如，您可以使用這些。 ``` npm install @meilisearch/autocomplete-client npm install @meilisearch/instant-meilisearch npm install meilisearch-docsearch ``` `meilisearch docsearch`的靈感來自 Algolia 搜尋文件元件。另外，非常詳細的文件以及每個 sdk 的範例和選項使它們成為人們的最愛。 您可以閱讀[文件](https://www.meilisearch.com/docs)並觀看[現場演示](https://where2watch.meilisearch.com/?utm_campaign=oss&utm_source=github&utm_medium=meilisearch&utm_content=demo-link)。 ![社區統計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxou5qe4p0va0h8r52ti.png) 他們在 GitHub 上有超過 42k 顆星，並且`v1.7`版本有 180 多個版本。 https://github.com/meilisearch/meilisearch 星 meilisearch ⭐️ --- 15.[收件匣清除](https://github.com/elie222/inbox-zero)- 幾分鐘內清理您的收件匣。 --------------------------------------------------------------- ![收件匣為零](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz1krkg9btykpfoiuukd.png) 收件匣歸零是一款開源電子郵件應用程式，其目標是透過 AI 協助幫助您快速實現收件匣歸零。 它們得到了谷歌的批准，因此這是關注隱私的一個很好的部分。 ![經谷歌批准](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fidgtozaj9y4feo4bbq.png) 它們使用 Postgres 作為資料庫，並基於 TypeScript 建置。 它們有一些瘋狂的功能，例如： > 您的電子郵件人工智慧助理 1. 人工智慧代理將讓您根據您提供的規則自動回覆、轉發或存檔電子郵件。 2. 他們的人工智慧計畫可以幫助你點擊接受或拒絕。一旦您確信人工智慧可以獨立工作，就可以開啟完全自動化。 3. 您可以用簡單的英語進行指導。就像與助手交談或向 ChatGPT 發送提示一樣簡單。 > 您可以自動封鎖冷電子郵件 您可以告訴「收件匣零」什麼對您來說構成冷郵件。它將根據您的指示阻止它們。 > 分析 了解收件匣是處理它的第一步。了解您的收件匣裡裝滿了什麼。它們還為您提供了立即採取行動的方法。 您可以閱讀核心[功能](https://github.com/elie222/inbox-zero?tab=readme-ov-file#key-features)並觀看[演示影片](https://github.com/elie222/inbox-zero?tab=readme-ov-file#demo-video)。您還可以查看他們的[看板](https://github.com/users/elie222/projects/1/views/1)以了解計劃內容。 他們在 GitHub 上擁有超過 1,500 個 Star，並且絕對值得更多。 https://github.com/elie222/inbox-zero 星收件匣零 ⭐️ --- 16. [Lively](https://github.com/rocksdanister/lively) - 允許使用者設定動畫桌面桌布和螢幕保護程式。 ----------------------------------------------------------------------------- ![活潑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60tld1a857herh12r5ci.png) 這只是為了好玩，我們可以使用程式碼學到很多關於它是如何完成的。 你可以看看這個[影片](https://www.pexels.com/video/blue-texture-abstract-leaves-7710243/)，看看它看起來有多瘋狂。 ![風俗](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb2ll571uc2jd2xrpmph.png) 他們提供[三種類型的壁紙，](https://github.com/rocksdanister/lively?tab=readme-ov-file#types-of-wallpapers)包括影片/GIF、網頁和應用程式/遊戲。 它基於 C# 和 live 支援的一些很酷的功能建置： 1. Lively 可以透過終端機的[命令列參數](https://github.com/rocksdanister/lively/wiki/Command-Line-Controls)進行控制。您可以將其與其他語言（例如 Python 或腳本軟體 AutoHotKey）整合。 2. 一組強大的[API](https://github.com/rocksdanister/lively/wiki/API) ，供開發人員建立互動式壁紙。取得硬體讀數、音訊圖表、音樂資訊等。 3. 當電腦上執行全螢幕應用程式/遊戲時（~0% CPU、GPU 使用率），桌布播放會暫停。 4. 您還可以利用[機器學習推理](https://github.com/rocksdanister/lively/wiki/Machine-Learning)來建立動態壁紙。您可以預測任何 2D 影像與相機的距離並產生類似 3D 的視差效果。酷：D 我見過很多人使用它，其中許多人甚至不知道它是開源的。 您可以使用[安裝程式](https://github.com/rocksdanister/lively/releases/download/v2.0.7.4/lively_setup_x86_full_v2074.exe)或透過[Microsoft Store](https://www.microsoft.com/store/productId/9NTM2QC6QWS7?ocid=pdpshare)下載它。 它是 2023 年 Microsoft Store 的獲勝者。 它在 GitHub 上擁有 13k+ Stars，有 60 個版本。 https://github.com/rocksdanister/lively 明星活潑 ⭐️ --- 17. [Netron](https://github.com/lutzroeder/netron) - 神經網路、深度學習和機器學習模型的視覺化工具。 ---------------------------------------------------------------------------- ![內創標誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyvww60nqm4jrah526w2.png) Netron 是神經網路、深度學習和機器學習模型的檢視器。 Netron 支援 ONNX、TensorFlow Lite、Core ML、Keras、Caffe、Darknet、MXNet、PaddlePaddle、ncnn、MNN 和 TensorFlow.js。 Netron 對 PyTorch、TorchScript、TensorFlow、OpenVINO、RKNN、MediaPipe、ML.NET 和 scikit-learn 提供實驗性支援。 您可以閱讀有關[安裝說明](https://github.com/lutzroeder/netron?tab=readme-ov-file#install)。 您可以存取該[網站](https://netron.app/)並打開這些[範例模型文件](https://github.com/lutzroeder/netron?tab=readme-ov-file#models)以使用它來打開。例如，您可以看到這個[演示](https://netron.app/?url=https://github.com/onnx/models/raw/main/validated/vision/classification/squeezenet/model/squeezenet1.0-3.onnx)。 ![模型](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1h4si8oue41x1i7dss5.png) 他們在 GitHub 上有 25k+ Stars，並且是基於 JavaScript 建構的。它們在`v7.5`上只有三個版本，考慮到我只使用了語義版本，這對我來說似乎很困惑。我們都同意這個用例非常出色。 https://github.com/lutzroeder/netron 明星 Netron ⭐️ --- 18. [Cursor](https://github.com/getcursor/cursor) - 以 VSCode 為基礎的人工智慧程式碼編輯器。 ---------------------------------------------------------------------------- ![游標](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7em09r6owbz35zh8tt0.png) Cursor 是一款專為與 AI 結對程式設計而設計的程式碼編輯器。遊標適用於 Windows、Mac 和 Linux。 Cursor 不僅僅是 Visual Studio Code (VSC) 擴充功能。這是它自己的應用程式。但別擔心！這是VSC前叉。這意味著它擁有 VSC 所擁有的一切，但在此基礎上也建立了更多人工智慧功能。 https://github.com/anysphere/primpt 他們之前開源了[基於 Codemirror 的編輯器](https://github.com/getcursor/old)。 基於 VSCodium 的 Cursor 版本不是開源的，只有它們的[提示庫](https://github.com/anysphere/priompt)是開源的。 選項數量龐大，您可以查看[功能列表](https://docs.cursor.sh/features/chat)，例如選擇用於聊天的 AI 模型、程式碼庫索引和自動終端偵錯。聽起來很酷，對吧：D 您應該檢查的一些功能是： - 允許您透過編輯程式碼庫的「偽程式碼」版本來進行編碼。 - 一旦錯誤出現在您的終端機中，就會自動修復錯誤。 - 要求 AI 更改程式碼區塊，查看編輯的內聯差異。 您也可以閱讀他們官方網站的[變更日誌](https://changelog.cursor.sh/?)。 您可以閱讀有關如何從[VSCode 遷移到 Cursor 的](https://docs.cursor.sh/get-started/moving-from-vsc-to-cursor)資訊。 他們也有定價模型，但免費套餐足以讓您進行測試！ 他們在 GitHub 上擁有超過 19k+ 的 Star，並將繼續成長。正如我所說，這不是開源的，但將來可能會改變。 https://github.com/getcursor/cursor 星形遊標 ⭐️ --- 19. [VSCode 除錯視覺化工具](https://github.com/hediet/vscode-debug-visualizer)- VS Code 的擴展，可在偵錯期間可視化資料。 ------------------------------------------------------------------------------------------------- ![VSCode 除錯視覺化工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hzgtqb6396zx73d3y62.png) 這個專案相當令人印象深刻。它不僅有助於高效除錯，還有助於透過視覺化學習基本概念，從長遠來看，這是無價的。 這是一個 VS Code 擴展，用於在偵錯時可視化資料結構。與 VS Code 的監視視圖類似，但具有豐富的監視值視覺化效果。 他們支援許多語言，如 Dart/Flutter、JS/TS、Go、Python、C#、Java、C++、Ruby、Rust 和 Swift，儘管它很基礎，所以這是一個優點。 其他語言和除錯器也可能有效。對於有基本支援的語言，只能視覺化 JSON 字串。您需要實作邏輯來為您的資料結建置立此 JSON。完全支援的語言提供資料提取器，可將一些眾所周知的資料結構轉換為 JSON。 安裝擴充功能後，您可以使用命令`Debug Visualizer: New View`開啟新的視覺化工具視圖。 您可以[在 market 上](https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer)查看所有可用的[演示](https://github.com/hediet/vscode-debug-visualizer/blob/master/extension/README.md#selected-demos)並查看擴展。 您還可以查看他們的[視覺化遊樂場](https://hediet.github.io/visualization/?darkTheme=1)，其中包含眾多選項。 他們在 GitHub 上擁有超過 7800 顆星，而且還在不斷增長。 https://github.com/hediet/vscode-debug-visualizer 明星 VSCode 除錯視覺化工具 ⭐️ --- 20. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼，更多的內容。 ----------------------------------------------------------------------- ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4on63bb02g4x4ny8gtcn.png) ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0yepod2rye2jk5r12dt.png) 這是一個開源專案，旨在複製 Devin，一名自主人工智慧軟體工程師，能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。 只是想讓你知道，這是在德文被介紹之前。 您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。 他們使用 LiteLLM，因此您可以使用任何基礎模型來執行 OpenDevin，包括 OpenAI、Claude 和 Gemini。 如果您想為 OpenDevin 做出貢獻，您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。 它在 GitHub 上擁有超過 10,700 個 Star，並且正在快速成長。 https://github.com/OpenDevin/OpenDevin 明星 OpenDevin ⭐️ --- 21.[即時語音克隆](https://github.com/CorentinJ/Real-Time-Voice-Cloning)－5秒克隆語音，即時產生任意語音。 ---------------------------------------------------------------------------------- ![即時語音克隆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftnuelce5cwng0nunp2h.png) 該專案是透過即時工作的聲碼器實現從說話者驗證到多說話者文字到語音合成 (SV2TTS) 的遷移學習。 SV2TTS是一個分為三個階段的深度學習架構。 在第一階段，人們從幾秒鐘的音訊中建立聲音的數位表示。 在第二和第三階段，該表示被用作參考來產生給定任意文字的語音。 您可以閱讀[如何設定](https://github.com/CorentinJ/Real-Time-Voice-Cloning?tab=readme-ov-file#setup)專案，其中包括安裝要求、下載預訓練模型、測試配置、下載資料集和啟動工具箱。 觀看下面所示的影片示範！ https://www.youtube.com/watch?v=-O\_hYhToKoA 我一直喜歡開源專案的最好的部分是，他們甚至非常清楚地提到了替代方案，並且像往常一樣，他們推薦了一些[專案](https://github.com/CorentinJ/Real-Time-Voice-Cloning?tab=readme-ov-file#heads-up)，這些專案將為您克隆的聲音提供更好的保真度及其表現力。 他們在 GitHub 上擁有 50k+ Stars，並且僅基於 Python 建置。到目前為止使用起來還是非常可信的。 https://github.com/CorentinJ/Real-Time-Voice-Cloning Star 即時語音克隆 ⭐️ --- 請在評論中告訴我您在此列表中發現了哪些有用的人工智慧工具：D 人工智慧正在改變世界，最好讓人工智慧成為你的朋友，而不是簡單地忽略它。 使用這些工具來提高工作效率並抓住機會創造非凡的東西。 祝你有美好的一天！直到下一次。 在 GitHub 和[Twitter](https://twitter.com/Anmol_Codes)上關注我。 https://github.com/Anmol-Baranwal 關注 Taipy 以了解更多此類內容。 https://dev.to/taipy --- 原文出處：https://dev.to/taipy/21-ai-tools-that-are-changing-the-world-1o54

0個讚   0留言 170瀏覽

50 多個核心 Java 面試問題及程式設計師答案

--- 標題：針對程式設計師的 50 多個核心 Java 面試問題及其答案 發表：真實 描述：核心 Java 面試常見問題及其答案，幫助初學者和初級開發人員獲得第一份 Java 開發工作。 標籤： java、程式設計、職業 封面圖：https://thepracticaldev.s3.amazonaws.com/i/k63545lbbjmh582tiosr.png --- *揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* Java程式設計師大家好！在過去的幾年裡，我一直在分享許多[Java 面試問題](http://javarevisited.blogspot.sg/2015/10/133-java-interview-questions-answers-from-last-5-years.html)、答案和單獨討論。我的許多讀者要求我將他們聚集在一起，以便他們可以在同一個地方進行面試準備。 這篇文章就是這個結果。 本文包含**50 多個 Java 面試問題和答案**，涵蓋所有重要主題，如核心 Java 基礎知識、 [Java 集合框架](https://javarevisited.blogspot.com/2011/11/collection-interview-questions-answers.html)、 [Java 多執行緒和並發](https://javarevisited.blogspot.com/2014/07/top-50-java-multithreading-interview-questions-answers.html)、 [Java IO](https://javarevisited.blogspot.com/2014/08/socket-programming-networking-interview-questions-answers-Java.html) 、 [JDBC](https://javarevisited.blogspot.com/2012/12/top-10-jdbc-interview-questions-answers.html) 、 [JVM 內部原理](http://www.java67.com/2016/08/10-jvm-options-for-java-production-application.html)、 [編碼問題](http://www.java67.com/2018/06/data-structure-and-algorithm-interview-questions-programmers.html)、 [物件導向程式設計](http://www.java67.com/2015/12/top-30-oops-concept-interview-questions-answers-java.html)等。 這些問題是從我做過的各種 Java 訪談中挑選出來的，我的朋友、讀者和其他人根據自己的經驗分享了一些問題。它們絕不是非常困難。您可能已經在電話或面對面的面試中見過它們。 這些問題對於複習重要的 Java 主題（例如核心 Java 概念、多執行緒、lambda、流和集合）也非常有用。 我還分享了一些*用於進一步學習和提高的有用資源*，例如 Udemy 上的[**完整 Java 大師**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F)課程，您可以加入課程來提高和填補 Java 技能方面的空白。 我還寫過有關 Java 面試準備的書籍，例如[《Grokking the Java Interview》](https://gumroad.com/l/QqjGH)和[《Grokking the Spring Boot Interviews》](https://gumroad.com/l/hrUXKY) ，其中我為 Java 開發人員分享了很多問題。 如果你今年正在準備 Java 面試，你也可以**[在 Gumroad 上取得我的 Java + Spring Interview + SQL Bundle](https://javinpaul.gumroad.com/l/sowpfg)** ，使用程式碼**Friends20**還可獲得 20% 的折扣 [![Java 和 Spring 面試書籍](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj0hpl0w5lyvdrnwlsoe.png)](https://javinpaul.gumroad.com/l/sowpfg) 那我們還在等什麼？以下是針對初學者和經驗豐富的 Java 開發人員的面試中最常見的一些 Java 問題的清單。 2 至 3 年經驗豐富的程式設計師的 50 個 Java 面試問題 --------------------------------- 因此，為了不浪費您的時間，這裡列出了一些針對初學者程式設計師的常見[核心 Java 面試問題](http://www.java67.com/2018/03/top-50-core-java-interview-questions.html)。此清單主要針對初學者和經驗不足的開發人員，例如具有 2 到 3 年 Java 經驗的人。 1） **Java如何實現平台無關性？** （[回答](http://www.java67.com/2012/08/how-java-achieves-platform-independence.html)） 提示：字節碼和Java虛擬機 答案 - Java 透過產生字節碼然後在 Java 虛擬機器上執行來實現平台獨立性，該虛擬機將這些字節碼轉換為依賴計劃的機器程式碼。由於不同平台的 JVM 不同，我的意思是，對於 Windows，您有單獨的 JRE（其中包括 JVM），對於 Linux，您將有單獨的 JRE。由於 Java 程式碼不會編譯為本機機器碼，而是編譯為字節碼，這使得它們獨立於平台。 2） **Java中的**`**ClassLoader**`**是什麼**？ （[回答](http://javarevisited.blogspot.sg/2012/12/how-classloader-works-in-java.html#axzz59AWpr6cb)） 提示：JVM 的一部分，用於載入類別的字節碼。你可以自己寫。 答：在Java中，程式碼被封裝在類別中，因為Java是物件導向的程式設計。你的程式是在類別中寫的，為了執行它們，JVM 會載入這些包含你的程式碼的類別。負責載入類別的 JVM 元件稱為類別載入器。它們是存在的三個主要類別載入器：引導類別載入器、擴充類別載入器和應用程式類別載入器。 這是一個很好的圖表，顯示了每個 Java 類別載入器的功能： [![Java 中的類別載入器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2brxfmzd67dv2k7rwmv.PNG)](https://javarevisited.blogspot.com/2021/05/java-classloader-interview.html) 3）**寫一個Java程式來檢查一個數字是偶數還是奇數？** （[回答](http://javarevisited.blogspot.sg/2013/04/how-to-check-if-number-is-even-or-odd.htm)） 提示：您可以使用位元運算符，例如位元與，記住，二進位格式中偶數末尾為 0，奇數末尾為 1。 4） **Java中**`**ArrayList**`**和**`**HashSet**`**的差別**？ （[回答](http://www.java67.com/2012/07/difference-between-arraylist-hashset-in-java.html)） 提示： `List`和`Set`之間的所有差異都適用於此，例如排序、重複、隨機搜尋等。請參閱 Richard Warburton 的[**《Java 基礎知識：集合》**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections)以了解有關Java 中的ArrayList、HashSet 和其他重要集合的更多資訊。 [![](https://miro.medium.com/max/875/1*hd861fcwDe86tY-1Y0VNRQ.png)](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections) 5）**什麼是單例中的雙重檢查鎖定？** （[回答](http://www.java67.com/2016/04/why-double-checked-locking-was-broken-before-java5.html)） 提示：兩次檢查實例是否已初始化，第一次不加鎖，第二次加鎖。 **6）如何在Java中建立線程安全的Singleton？ （** [**回答**](http://javarevisited.blogspot.sg/2012/12/how-to-create-thread-safe-singleton-in-java-example.html)**）** 提示：有很多方法，例如使用 Enum 或使用雙重檢查鎖定模式或使用巢狀靜態類別。 **7) Java中Serialized和Externalized的差別？ （** [**回答**](http://www.java67.com/2012/10/difference-between-serializable-vs-externalizable-interface.html)**）** 提示：Externalized 讓您可以更好地控制序列化過程。 **8) Java中何時使用瞬態變數？ （**[**回答**](http://www.java67.com/2012/08/what-is-transient-variable-in-java.html)**）** 提示：當您想要在實作 Serialized 介面的類別中使變數不可序列化時。換句話說，您可以將其用於不想保存其值的變數。請參閱[**完整的 Java MasterClass**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F)以了解 Java 中的瞬態變數。 **9) Java中transient變數和volatile變數的差別？ （** [**回答**](http://www.java67.com/2012/11/difference-between-transient-vs-volatile-modifier-variable-java.html)**）** 提示：完全不同，一個用於序列化上下文，另一個用於並發。 **10) Java中什麼時候使用易失性變數？ （**[**回答**](http://www.java67.com/2012/08/what-is-volatile-variable-in-java-when.html)**）** 提示：當你需要指示JVM一個變數可以被多個執行緒修改並提示JVM不緩存其值。 **11）我們可以重寫Java中的私有方法嗎？ （** [**回答**](http://www.java67.com/2013/08/can-we-override-private-method-in-java-inner-class.html)**）** 提示：不，因為它在子類別中不可見，這是在 Java 中重寫方法的主要要求。 12） **Java中**`**Hashtable**`**和**`**HashMap**`**的差別**？ **（** [**回答**](http://javarevisited.blogspot.sg/2010/10/difference-between-hashmap-and.html#axzz53B6SD769)\*\*） \*\*提示：有幾個但最重要的是`Hashtable` ，它是同步的，而`HashMap`不是。與`HashMap`相比，它也是遺留的且緩慢的。 13） **Java中**`**List**`**和**`**Set**`**的差別**？ **（** [**回答**](http://javarevisited.blogspot.sg/2012/04/difference-between-list-and-set-in-java.html#axzz53n9YK0Mb)**）** 提示： `List`是有序的並且允許重複。 `Set`是無序的，不允許有重複的元素。 14） **Java中**`**ArrayList**`**和**`**Vector**`**的區別**（[**答案**](http://www.java67.com/2012/09/arraylist-vs-vector-in-java-interview.html)**）** 提示：很多，但最重要的是， `ArrayList`是非同步的，速度很快，而`Vector`是同步的，速度很慢。它也是像`Hashtable`這樣的遺留類別。 **15)** **Java 中**`**Hashtable**`**和**`**ConcurrentHashMap**`的差異？ **（** [**回答**](http://javarevisited.blogspot.sg/2011/04/difference-between-concurrenthashmap.html#axzz4qw7RoNvw)**）** 提示：更具可擴展性。請參閱 Richard Warburton 的[**《Java 基礎知識：集合》**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections)以了解更多資訊。 16） `**ConcurrentHashMap**`**如何實現可擴充性？ （** [**回答**](http://javarevisited.blogspot.sg/2017/08/top-10-java-concurrenthashmap-interview.html#axzz50U9xyqbo)**）** 提示：透過將映射分為段並僅在寫入操作期間鎖定。 **17) 您將重寫哪兩個方法來將**`**Object**`**用作**`**HashMap**`**中的**`**Key**` **？ （** [**回答**](http://www.java67.com/2013/06/how-get-method-of-hashmap-or-hashtable-works-internally.html)**）** 提示：等於和哈希碼 **18) Java中wait和sleep的差別？ （**[**回答**](http://www.java67.com/2012/08/what-are-difference-between-wait-and.html)**）** \\ 提示： `wait()`方法釋放鎖定或監視器，而 sleep 則不會。 19\) **Java中**`**notify**`**和**`**notifyAll**`**的差別**？ **（** [**回答**](http://www.java67.com/2013/03/difference-between-wait-vs-notify-vs-notifyAll-java-thread.html)**）** 提示： `notify`通知一個隨機執行緒正在等待該鎖，而`notifyAll`通知所有等待監視器的執行緒。如果你確定只有一個執行緒在等待，那麼使用`notify` ，否則`notifyAll`會更好。請參閱 Java Champion Heinz Kabutz 的[**線程基礎迷你課程，**](https://javaspecialists.teachable.com/p/threading-essentials/?product_id=539197&coupon_code=SLACK100?affcode=92815_johrd7r8)以了解有關線程基礎知識的更多資訊。 20\) 為什麼要**在 Java 中重寫 hashcode 以及**`**equals()**` ？ **（** [**回答**](http://javarevisited.blogspot.sg/2015/01/why-override-equals-hashcode-or-tostring-java.html#axzz55oDxm8vv)**）** 提示：遵守 equals 和 hashcode 約定，如果您打算將物件儲存到集合類別（例如`HashMap`或`ArrayList`中，則需要遵守這一點。 21） `**HashMap**`**的負載因子是什麼意思？ （**[**回答**](http://www.java67.com/2017/08/top-10-java-hashmap-interview-questions.html)**）** 提示：觸發`HashMap`調整大小的閾值一般為 0.75，這表示如果 HashMap 已滿 75%，則`HashMap`會自行調整大小。 **22)** **Java 中**`**ArrayList**`**和**`**LinkedList**`之間的差異？ **（** [**回答**](http://www.java67.com/2012/12/difference-between-arraylist-vs-LinkedList-java.html)**）** 提示：與陣列和鍊錶相同，其中一個允許隨機搜尋，而另一種則不允許。在鍊錶上插入和刪除很容易，但在陣列上搜尋很容易。請參閱[**《Java 基礎知識：集合》**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections) **（** Richard Warburton 在 Pluralsight 上的課程），以了解更多關於 Java 中基本集合資料結構的資訊。 **23)** **Java 中**`**CountDownLatch**`**和**`**CyclicBarrier**`之間的差異？ **（** [**回答**](http://www.java67.com/2012/08/difference-between-countdownlatch-and-cyclicbarrier-java.html)**）** 提示：屏障被打破後，您可以重複使用`CyclicBarrier` ，但計數為零後，您無法重複使用`CountDownLatch` 。 24)**在 Java 中什麼時候使用**`**Runnable**`**和**`**Thread**` ？ **（** [**回答**](http://www.java67.com/2016/01/7-differences-between-extends-thread-vs-implements-Runnable-java.html)**）** 提示：總是 **25) Java 中 Enum 類型安全的意義是什麼？ （** [**回答**](http://www.java67.com/2014/04/what-java-developer-should-know-about-Enumeration-type-in-Java.html)**）** 提示：這表示您不能將不同 Enum 類型的實例指派給 Enum 變數。例如，如果您有一個像`DayOfWeek` day 這樣的變數，那麼您無法從`DayOfMonth`枚舉中為其指派值。 **26) Java 中整數的自動裝箱如何運作？ （** [**回答**](http://javarevisited.blogspot.sg/2012/07/auto-boxing-and-unboxing-in-java-be.html#axzz59AWpr6cb)**）** 提示：透過使用Java中的`valueOf()`方法。 **27)** **Java 中**`**PATH**`**和**`**Classpath**`之間的差異？ **（** [**回答**](http://www.java67.com/2012/08/what-is-path-and-classpath-in-java-difference.html)**）** 提示：作業系統使用`PATH` ，而JVM 使用`Classpath`來定位Java 二進位文件，例如JAR 檔案或Class 檔案。請參閱[**Java 基礎知識：核心平台**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-core-platform)，以了解有關`PATH` 、 `Classpath`和其他 Java 環境變數的更多資訊。 [![](https://miro.medium.com/max/478/1*PBuMgGmVXwBguv-SPw7YJw.jpeg)](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-core-platform) **28) Java中方法重載和重寫的差別？ （** [**回答**](http://www.java67.com/2015/08/top-10-method-overloading-overriding-interview-questions-answers-java.html)**）** 提示：重寫發生在子類別中，而重載發生在同一個類別中。此外，覆蓋是執行時活動，而重載是在編譯時解決的。 **29) 如何防止 Java 中的類別被子類化？ （**[**回答**](http://www.java67.com/2017/06/10-points-about-final-modifier-in-java.html)**）** \\ 提示：只需將其建構函數設為私有即可 **30) 你如何限制你的類別被你的客戶使用？ （** [**回答**](http://javarevisited.blogspot.sg/2016/01/why-jpa-entity-or-hibernate-persistence-should-not-be-final-in-java.html)**）** \\ 提示：使建構子私有或從建構子拋出異常 **31)** **Java 中**`**StringBuilder**`**和**`**StringBuffer**`之間的差異？ **（**[**回答**](http://www.java67.com/2016/10/5-difference-between-stringbuffer.html)**）** 提示： `StringBuilder`不同步，而`StringBuffer`同步。 **32) Java 中多態性與繼承的差別？ （** [**回答**](http://www.java67.com/2014/04/difference-between-polymorphism-and-Inheritance-java-oops.html)**）** 提示：繼承允許程式碼重複使用並建構類別之間的關係，這是多態性所需要的，多態性提供動態行為。請參閱\[**物件導向的 Java 程式設計：資料結構及超越專業化**\]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Fjava-object-orientation）在Coursera 上，了解有關OOP 功能的更多資訊。適合初學者的最深入的課程之一。 \[![](https://thepracticaldev.s3.amazonaws.com/i/vuohxotp8qeh638lzjpr.png) \]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Fjava-物件導向） 順便說一句，如果您發現 Coursera 課程很有用，因為它們是由世界各地的知名公司和大學建立的，我建議您加入[**Coursera Plus**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fcourseraplus) ，這是Coursera 的訂閱計劃，可以讓您無限制地存取他們最受歡迎的課程、專業、專業憑證和指導專案。它的費用約為 399 美元/年，但它完全物有所值，因為您可以獲得無限的憑證。 **33）我們可以在Java中重寫靜態方法嗎？ （**[**回答**](http://www.java67.com/2012/08/can-we-override-static-method-in-java.html)**）** \\ 提示：否，因為重寫在執行時間解析，而靜態方法呼叫在編譯時解析。 **34) 我們可以存取Java中的私有方法嗎？ （**[**回答**](http://www.java67.com/2012/08/can-we-override-private-method-in-java.html)**）** \\ 提示：可以，在同一個班級內，但不能在班級外 **35) Java中介面和抽象類別的區別？ （** [**回答**](http://www.java67.com/2017/08/difference-between-abstract-class-and-interface-in-java8.html)**）** 提示：從[Java 8](https://dzone.com/articles/5-courses-to-crack-java-certification-ocajp-1z0-80)開始，差異變得模糊。然而，一個Java類別仍然可以實作多個接口，但只能擴展一個類別。 **36) Java 中 DOM 和 SAX 解析器的差別？ （**[**回答**](http://www.java67.com/2012/09/dom-vs-sax-parser-in-java-xml-parsing.html)**）** \\ 提示：DOM 將整個 XML 檔案載入到記憶體中，而 SAX 則不會。它是一個基於事件的解析器，可用於解析大文件，但 DOM 速度很快，對於小文件應該是首選。 **37) Java 中 throw 和 throws 關鍵字的差異？ （**[**回答**](http://www.java67.com/2012/10/difference-between-throw-vs-throws-in.html)**）** \\ 提示： throws 聲明方法在發生錯誤時可以拋出什麼異常，但 throw 關鍵字實際上會拋出異常。請參閱[**Java 基礎知識：異常處理**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-exception-handling)以了解有關 Java 中異常處理的更多資訊。 [![](https://miro.medium.com/max/875/1*O5DEoN9mOy3D0HxFKWwfKQ.png)](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-exception-handling) **38) Java 中的故障安全迭代器和故障快速迭代器的差異？ （** [**回答**](http://www.java67.com/2015/06/what-is-fail-safe-and-fail-fast-iterator-in-java.html)**）** 提示：故障安全性不會拋出`ConcurrentModificationException` ，而`fail-fast`則在迭代時檢測到底層集合的外部變更時拋出 ConcurrentModificationException。 **39) Java 中迭代器和枚舉的差別？ （** [**回答**](http://javarevisited.blogspot.sg/2010/10/what-is-difference-between-enumeration.html#axzz59AWpr6cb)**）** 提示：迭代器還使您能夠在迭代時刪除元素，而枚舉不允許這樣做。 **40)** **Java 中的**`**IdentityHashMap**`是什麼？ **（** [**回答**](http://www.java67.com/2016/09/difference-between-identityhashmap-weakhashmap-enummap-in-java.html)**）** 提示：一個`Map` ，它使用`==`相等運算子來檢查相等性，而不是`equals()`方法。 **41)** **Java 中的**`**String**`池是什麼？ **（** [**回答**](http://javarevisited.blogspot.sg/2016/07/difference-in-string-pool-between-java6-java7.html#axzz4pGGwsyna)**）** 提示： `String`文字池。請記住，它已從 JDK 7 中的永久代空間移至堆疊。 **42)** Java 中`**Serializable**`**類別可以包含不可序列化欄位嗎？ （** [**回答**](http://javarevisited.blogspot.sg/2016/09/how-to-serialize-object-in-java-serialization-example.html)\*\*） \*\*提示：是的，但您需要將其設定為靜態或瞬態。 **43) Java 中 this 和 super 的差別？ （**[**回答**](http://www.java67.com/2013/06/difference-between-this-and-super-keyword-java.html)**）** 提示：this 指的是目前實例，而 super 指的是超類別的實例。 **44)** **Java 中**`**Comparator**`**和**`**Comparable**`之間的差異？ **（** [**回答**](http://www.java67.com/2013/08/difference-between-comparator-and-comparable-in-java-interface-sorting.html)**）** \\ 提示： `Comparator`定義自訂排序，而`Comparable`定義物件的自然順序，例如`String`字母順序。請參閱[**完整的 Java 大師課程**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F)以了解有關 Java 排序的更多資訊。 [![](https://miro.medium.com/max/875/1*MTR8OytpiIMidLndBnsJ5g.png)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F) **45)** **Java 中**`**java.util.Date**`**和**`**java.sql.Date**`之間的差異？ **（**[**回答**](http://javarevisited.blogspot.sg/2012/04/difference-between-javautildate-and.html)**）** 提示：前者包含日期和時間，後者僅包含日期部分。 46）為什麼**Java中的**`**Object**`類別**中宣告了wait和notify方法**？ **（**[**回答**](http://javarevisited.blogspot.sg/2012/02/why-wait-notify-and-notifyall-is.html)**）** 提示：因為它們需要僅對物件可用的鎖。 **47）為什麼Java不支援多重繼承？ （** [**回答**](http://javarevisited.blogspot.sg/2011/07/why-multiple-inheritances-are-not.html)**）** 提示：它不支持，因為 C++ 的體驗不好，但對於 Java 8，它在某種意義上是支援的 --- 現在 Java 中不支援`Type`的多重繼承。 **48) Java 中檢查異常和非檢查異常的差異？ （** [**回答**](http://javarevisited.blogspot.sg/2011/12/checked-vs-unchecked-exception-in-java.html)**）** 提示：如果是選取的，則必須使用 catch 區塊處理異常，而如果是未選取的，則由您決定；編譯不會打擾你。 **49) Java 中錯誤和異常的區別？ （**[**回答**](http://www.java67.com/2012/12/difference-between-error-vs-exception.html)**）** 提示：我厭倦了打字，請檢查答案 **50) Java 中的競爭條件和死鎖的差異？ （** [**回答**](http://javarevisited.blogspot.sg/2012/02/what-is-race-condition-in.html#axzz59AbkWuk9)**）** 提示：這兩種錯誤都是並發應用程式中發生的錯誤，一種是由於執行緒調度而發生的，另一種是由於編碼不良而發生的。請參閱[Java 中的多執行緒和平行計算](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fmultithreading-and-parallel-computing-in-java%2F)，以了解有關死鎖、競爭條件和其他多執行緒問題的更多資訊。 其他資源 --- - [Java 面試指南：200+ 面試題目及答案](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-interview-questions-and-answers%2F) - [Spring框架面談指南---200+問答](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fspring-interview-questions-and-answers%2F) - [準備工作面試 作者：John Sonmez](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fdeveloper-job-interviews) - [Markham 曝光的 Java 程式設計面試](http://www.amazon.com/Java-Programming-Interviews-Exposed-Markham/dp/1118722868?tag=javamysqlanta-20) - [破解編碼面試 --- 189 個問題和答案](http://www.amazon.com/Cracking-Coding-Interview-6th-Edition/dp/0984782850/?tag=javamysqlanta-20) - [求職面試的資料結構與演算法分析](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fdata-structure-and-algorithms-analysis%2F) - [過去 5 年 130 多道 Java 面試題](http://javarevisited.blogspot.sg/2015/10/133-java-interview-questions-answers-from-last-5-years.html) - [Grokking the Java Interview - 免費範例 PDF](https://javinpaul.gumroad.com/l/HMOAv) - [深入了解 Spring Boot 面試 - 免費 PDF 範本](https://javinpaul.gumroad.com/l/grokking-springboot-interview-sample) ### 結束語 謝謝，您已經讀到了文章的結尾...祝您程式設計面試順利！這當然不會很容易，但這些問題肯定會對您有所幫助。它還會鼓勵您了解更多。 如果您喜歡這篇文章，請與您的朋友和同事分享，並且不要忘記在 Twitter 上關注[javinpaul](https://twitter.com/javinpaul) ！ > **PS ---**如果您需要一些免費資源來學習 Java，您可以查看[**我最喜歡的免費 Java 課程**](https://medium.com/javarevisited/10-free-courses-to-learn-java-in-2019-22d1f33a3915)清單來開始您的準備。 &gt; > **PSS ---**我沒有提供圖片中分享的面試問題的答案“程式碼中建立了多少個 String 物件？”你能猜出並解釋一下嗎？ 而且，如果你今年正在準備 Java 面試，你還可以**[在 Gumroad 上取得我的 Java + Spring Interview + SQL Bundle](https://javinpaul.gumroad.com/l/sowpfg)** ，使用程式碼**friends20**也可以獲得 20% 的折扣 --- 原文出處：https://dev.to/javinpaul/50-core-java-interview-questions-with-answers-for-programmers-3bc

0個讚   0留言 49瀏覽

使用 React 開發時應該了解的 17 個函式庫

長話短說 ==== 我收集了您應該了解的 React 庫，以建立許多不同類型的專案並成為 React 奇才🧙‍♂️。 其中每一項都是獨一無二的，並且都有自己的用例。 別忘了給他們加星號🌟 讓我們開始吧！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16rwdtymlmp6y17ocz59.gif) --- 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 建立應用內人工智慧聊天機器人、代理程式和文字區域 ------------------------------------------------------------------------------------ ![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzuxjfog2ldam3csrl62.png) 將 AI 功能整合到 React 中是很困難的，這就是 Copilot 的用武之地。一個簡單快速的解決方案，可將可投入生產的 Copilot 整合到任何產品中！ 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一，CopilotKit 是一個應用程式內人工智慧聊天機器人，可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` （您可以稍後切換到不同的 UI 提供者）。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後，您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。 用例是巨大的，作為開發人員，我們絕對應該在下一個專案中嘗試使用 CopilotKit。 https://github.com/CopilotKit/CopilotKit Star CopilotKit ⭐️ --- 2. [xyflow](https://github.com/xyflow/xyflow) - 使用 React 建立基於節點的 UI。 -------------------------------------------------------------------- ![XY流](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yevpzvqpt3u6ahkqdrsl.png) XYFlow 是一個功能強大的開源程式庫，用於使用 React 或 Svelte 建立基於節點的 UI。它是一個 monorepo，提供[React Flow](https://reactflow.dev)和[Svelte Flow](https://svelteflow.dev) 。讓我們更多地了解可以使用 React flow 做什麼。 ![反應流](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mzezlna4v4bx75z3omr.png) 您可以觀看此影片，在 60 秒內了解 React Flow。 https://www.youtube.com/watch?v=aUBWE41a900 有些功能在專業模式下可用，但免費層中的功能足以形成一個非常互動的流程。 React 流程以 TypeScript 編寫並使用 Cypress 進行測試。 開始使用以下 npm 指令。 ``` npm install reactflow ``` 以下介紹如何建立兩個節點（ `Hello`和`World` ，並透過邊連接。節點具有預先定義的初始位置以防止重疊，並且我們還應用樣式來確保有足夠的空間來渲染圖形。 ``` import ReactFlow, { Controls, Background } from 'reactflow'; import 'reactflow/dist/style.css'; const edges = [{ id: '1-2', source: '1', target: '2' }]; const nodes = [ { id: '1', data: { label: 'Hello' }, position: { x: 0, y: 0 }, type: 'input', }, { id: '2', data: { label: 'World' }, position: { x: 100, y: 100 }, }, ]; function Flow() { return ( <div style={{ height: '100%' }}> <ReactFlow nodes={nodes} edges={edges}> <Background /> <Controls /> </ReactFlow> </div> ); } export default Flow; ``` 這就是它的樣子。您還可以新增標籤、更改類型並使其具有互動性。 ![你好世界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzerdd3ng0vtnz5rbgau.png) 您可以在 React Flow 的 API 參考中查看[完整的選項清單](https://reactflow.dev/api-reference/react-flow)以及元件、鉤子和實用程式。 最好的部分是您還可以加入[自訂節點](https://reactflow.dev/learn/customization/custom-nodes)。在您的自訂節點中，您可以渲染您想要的一切。您可以定義多個來源和目標句柄並呈現表單輸入或圖表。您可以查看此[codesandbox](https://codesandbox.io/p/sandbox/pensive-field-z4kv3w?file=%2FApp.js&utm_medium=sandpack)作為範例。 您可以閱讀[文件](https://reactflow.dev/learn)並查看 Create React App、Next.js 和 Remix 的[範例 React Flow 應用程式](https://github.com/xyflow/react-flow-example-apps)。 React Flow 附帶了幾個額外的[插件](https://reactflow.dev/learn/concepts/plugin-components)元件，可以幫助您使用 Background、Minimap、Controls、Panel、NodeToolbar 和 NodeResizer 元件製作更高級的應用程式。 例如，您可能已經注意到許多網站的背景中有圓點，增強了美觀性。要實現此模式，您可以簡單地使用 React Flow 中的後台元件。 ``` import { Background } from 'reactflow'; <Background color="#ccc" variant={'dots'} /> // this will be under React Flow component. Just an example. ``` ![背景元件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en2tl17ef31nydaycw18.png) 如果您正在尋找一篇快速文章，我建議您查看 Webkid 的[React Flow - A Library for Rendering Interactive Graphs](https://webkid.io/blog/react-flow-node-based-graph-library/) 。 React Flow 由 Webkid 開發和維護。 它在 GitHub 上有超過 19k 顆星，並且在`v11.10.4`上顯示它們正在不斷改進，npm 套件每週下載量超過 40 萬次。您可以輕鬆使用的最佳專案之一。 ![統計資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o99csz9epqmai3ixt859.png) https://github.com/xyflow/xyflow 星 xyflow ⭐️ --- 3. [Zod](https://github.com/colinhacks/zod) + [React Hook Form](https://github.com/react-hook-form) - 致命的驗證組合。 -------------------------------------------------------------------------------------------------------------- ![佐德](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s6zvmqr0lv93vsrhofs.png) 第一個問題是：為什麼我在同一個選項中包含 Zod 和 React Hook 表單？好吧，請閱讀它來找出答案。 Zod 的目標是透過最大限度地減少重複的類型聲明來對開發人員友好。使用 Zod，您聲明一次驗證器，Zod 將自動推斷靜態 TypeScript 類型。將更簡單的類型組合成複雜的資料結構很容易。 開始使用以下 npm 指令。 ``` npm install zod ``` 這是您在建立字串架構時自訂一些常見錯誤訊息的方法。 ``` const name = z.string({ required_error: "Name is required", invalid_type_error: "Name must be a string", }); ``` ``` // It does provide lots of options // validations z.string().min(5, { message: "Must be 5 or more characters long" }); z.string().max(5, { message: "Must be 5 or fewer characters long" }); z.string().length(5, { message: "Must be exactly 5 characters long" }); z.string().email({ message: "Invalid email address" }); z.string().url({ message: "Invalid url" }); z.string().emoji({ message: "Contains non-emoji characters" }); z.string().uuid({ message: "Invalid UUID" }); z.string().includes("tuna", { message: "Must include tuna" }); z.string().startsWith("https://", { message: "Must provide secure URL" }); z.string().endsWith(".com", { message: "Only .com domains allowed" }); z.string().datetime({ message: "Invalid datetime string! Must be UTC." }); z.string().ip({ message: "Invalid IP address" }); ``` 請閱讀[文件](https://zod.dev/)以了解有關 Zod 的更多資訊。 它適用於 Node.js 和所有現代瀏覽器。 現在，第二部分來了。 有很多可用的表單整合。 ![形式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zz290xe2bpdsjvj6pzao.png) 雖然 Zod 可以驗證物件，但如果沒有自訂邏輯，它不會影響您的用戶端和後端。 React-hook-form 是用於客戶端驗證的優秀專案。例如，它可以顯示輸入錯誤。 ![反應鉤子形式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy3m7inekd685t4nt59m.png) 開始使用以下 npm 指令。 ``` npm install react-hook-form ``` 這就是如何使用`React Hook Form` 。 ``` import { useForm, SubmitHandler } from "react-hook-form" type Inputs = { example: string exampleRequired: string } export default function App() { const { register, handleSubmit, watch, formState: { errors }, } = useForm<Inputs>() const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data) console.log(watch("example")) // watch input value by passing the name of it return ( /* "handleSubmit" will validate your inputs before invoking "onSubmit" */ <form onSubmit={handleSubmit(onSubmit)}> {/* register your input into the hook by invoking the "register" function */} <input defaultValue="test" {...register("example")} /> {/* include validation with required or other standard HTML validation rules */} <input {...register("exampleRequired", { required: true })} /> {/* errors will return when field validation fails */} {errors.exampleRequired && <span>This field is required</span>} <input type="submit" /> </form> ) } ``` 您甚至可以隔離重新渲染，從而提高整體效能。 您可以閱讀[文件](https://react-hook-form.com/get-started)。 兩者結合起來就是一個很好的組合。嘗試一下！ 我透過 Shadcn 發現了它，它使用它作為表單元件的預設值。我自己在幾個專案中使用過它，效果非常好。它提供了很大的靈活性，這確實很有幫助。 https://github.com/colinhacks/zod Star Zod ⭐️ https://github.com/react-hook-form Star React Hook Form ⭐️ --- 4. [React DND](https://github.com/react-dnd/react-dnd) - 用於 React 的拖放。 ---------------------------------------------------------------------- ![反應 dnd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0ywjp9hk8l4ocq145yr.png) 我還沒有完全實現拖放功能，而且我經常發現自己對選擇哪個選項感到困惑。我遇到的另一個選擇是[interactjs.io](https://interactjs.io/) ，根據我讀過的文件，它似乎非常有用。由於他們提供了詳細的範例，這非常容易。 ![拖放](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2h85gcto3r3kwuj0nix.png) 但我現在只介紹 React DND。 開始使用以下 npm 指令。 ``` npm install react-dnd react-dnd-html5-backend ``` 除非您正在編寫自訂後端，否則您可能想要使用 React DnD 隨附的 HTML5 後端。 這是安裝`react-dnd-html5-backend`方法。閱讀[文件](https://react-dnd.github.io/react-dnd/docs/backends/html5)。 這是起點。 ``` import { HTML5Backend } from 'react-dnd-html5-backend' import { DndProvider } from 'react-dnd' export default class YourApp { render() { return ( <DndProvider backend={HTML5Backend}> /* Your Drag-and-Drop Application */ </DndProvider> ) } } ``` 透過這種方式，您可以非常輕鬆地實現卡片的拖放操作。 ``` // Let's make <Card text='Write the docs' /> draggable! import React from 'react' import { useDrag } from 'react-dnd' import { ItemTypes } from './Constants' export default function Card({ isDragging, text }) { const [{ opacity }, dragRef] = useDrag( () => ({ type: ItemTypes.CARD, item: { text }, collect: (monitor) => ({ opacity: monitor.isDragging() ? 0.5 : 1 }) }), [] ) return ( <div ref={dragRef} style={{ opacity }}> {text} </div> ) } ``` 請注意，HTML5 後端不支援觸控事件。因此它不適用於平板電腦和行動裝置。您可以將`react-dnd-touch-backend`用於觸控裝置。閱讀[文件](https://react-dnd.github.io/react-dnd/docs/backends/touch)。 ``` import { TouchBackend } from 'react-dnd-touch-backend' import { DndProvider } from 'react-dnd' class YourApp { <DndProvider backend={TouchBackend} options={opts}> {/* Your application */} </DndProvider> } ``` 這個codesandbox規定了我們如何正確使用React DND。 https://codesandbox.io/embed/3y5nkyw381?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx&hidenavigation=1 你可以看看React DND的[例子](https://react-dnd.github.io/react-dnd/examples)。 它們甚至有一個乾淨的功能，您可以使用 Redux 檢查內部發生的情況。 您可以透過為提供者新增 debugModeprop 來啟用[Redux DevTools](https://github.com/reduxjs/redux-devtools) ，其值為 true。 ``` <DndProvider debugMode={true} backend={HTML5Backend}> ``` 它提供了多種元件選項，我需要親自測試一下。總的來說，這看起來相當不錯，特別是如果你剛開始的話。 React DND 已獲得`MIT`許可，並在 GitHub 上擁有超過 20k Stars，這使其具有令人難以置信的可信度。 https://github.com/react-dnd/react-dnd Star React DND ⭐️ --- 5. [Cypress](https://github.com/cypress-io/cypress) - 快速測試瀏覽器中執行的內容。 -------------------------------------------------------------------- ![柏](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybhbgvetu8tky7xiepdz.png) 近年來已經證明了測試的重要性，而 Jest 和 Cypress 等選項使其變得異常簡單。 但我們只會介紹 Cypress，因為它本身就很方便。 只需一張圖片就能證明 Cypress 值得付出努力。 ![柏](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey0v3unpnblie1o610iv.png) 開始使用以下 npm 指令。 ``` npm install cypress -D ``` 如果您在專案中沒有使用 Node 或套件管理器，或者您想快速試用 Cypress，您始終可以[直接從 CDN 下載 Cypress](https://download.cypress.io/desktop) 。 一旦安裝並打開它。您必須使用`.cy.js`建立一個規範檔案。 ![規格文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/077r7oilgyuf5j0chryv.png) 現在，您可以編寫並測試您的應用程式（範例程式碼）。 ``` describe('My First Test', () => { it('Does not do much!', () => { expect(true).to.equal(true) }) }) ``` Cypress 提供了多種選項，例如`cy.visit()`或`cy.contains()` 。由於我沒有廣泛使用 Cypress，因此您需要在其[文件](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test)中進一步探索它。 如果它看起來很可怕，那麼請前往這個[為初學者解釋 Cypress 的](https://www.youtube.com/watch?v=u8vMu7viCm8&pp=ygUQY3lwcmVzcyB0dXRvcmlhbA%3D%3D)freeCodeCamp 教程。 Freecodecamp 影片確實是金礦 :D Cypress 在 GitHub 上擁有超過 45,000 顆星，並且在目前的 v13 版本中，它正在不斷改進。 https://github.com/cypress-io/cypress 星柏 ⭐️ --- [6.Refine](https://github.com/refinedev/refine) - 面向企業的開源 Retool。 ----------------------------------------------------------------- ![精煉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wsti2yfikrhc9nggov5.png) Refine 是一個元 React 框架，可以快速開發各種 Web 應用程式。 從內部工具到管理面板、B2B 應用程式和儀表板，它可作為建立任何類型的 CRUD 應用程式（例如 DevOps 儀表板、電子商務平台或 CRM 解決方案）的全面解決方案。 ![電子商務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xry9381y4s36emgb9psr.png) 您可以在一分鐘內使用單一 CLI 命令進行設定。 它具有適用於 15 多個後端服務的連接器，包括 Hasura、Appwrite 等。 您可以查看可用的[整合清單](https://refine.dev/integrations/)。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h9tbp4u3llh8ywgb8m8.png) 但最好的部分是，Refine `headless by design` ，從而提供無限的樣式和自訂選項。 由於該架構，您可以使用流行的 CSS 框架（如 TailwindCSS）或從頭開始建立樣式。 這是最好的部分，因為我們不希望最終受到與特定庫的兼容性的樣式限制，因為每個人都有自己的風格並使用不同的 UI。 開始使用以下 npm 指令。 ``` npm create refine-app@latest ``` 這就是使用 Refine 新增登入資訊的簡單方法。 ``` import { useLogin } from "@refinedev/core"; const { login } = useLogin(); ``` 使用 Refine 概述程式碼庫的結構。 ``` const App = () => ( <Refine dataProvider={dataProvider} resources={[ { name: "blog_posts", list: "/blog-posts", show: "/blog-posts/show/:id", create: "/blog-posts/create", edit: "/blog-posts/edit/:id", }, ]} > /* ... */ </Refine> ); ``` 您可以閱讀[文件](https://refine.dev/docs/)。 您可以看到一些使用 Refine 建立的範例應用程式： - [全功能管理面板](https://example.admin.refine.dev/) - [優化不同的用例場景](https://github.com/refinedev/refine/tree/master/examples)。 他們甚至提供模板，這就是為什麼這麼多用戶喜歡Refine。 你可以看到[模板](https://refine.dev/templates/)。 ![範本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87vbx5tqyicb9gmgirka.png) 他們在 GitHub 上擁有大約 22k+ 顆星。 https://github.com/refinedev/refine 星際精煉 ⭐️ --- 7. [Tremor](https://github.com/tremorlabs/tremor) - React 元件來建立圖表和儀表板。 ---------------------------------------------------------------------- ![樣品元件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hq6ehdstz94ya5kfvwl4.png) Tremor 提供了 20 多個開源 React 元件，用於建立基於 Tailwind CSS 的圖表和儀表板，使資料視覺化再次變得簡單。 ![社群](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkwu1t43p0zfsmeehqxl.png) 開始使用以下 npm 指令。 ``` npm i @tremor/react ``` 這就是您如何使用 Tremor 快速建立東西。 ``` import { Card, ProgressBar } from '@tremor/react'; export default function Example() { return ( <Card className="mx-auto max-w-md"> <h4 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content"> Sales </h4> <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> $71,465 </p> <p className="mt-4 flex items-center justify-between text-tremor-default text-tremor-content dark:text-dark-tremor-content"> <span>32% of annual target</span> <span>$225,000</span> </p> <ProgressBar value={32} className="mt-2" /> </Card> ); } ``` 這就是基於此生成的內容。 ![輸出](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tvpu7r0rig522zeqae8.png) 您可以閱讀[文件](https://www.tremor.so/docs/getting-started/installation)。其間，他們在引擎蓋下使用混音圖標。 從我見過的各種元件來看，這是一個很好的起點。相信我！ Tremor 還提供了一個[乾淨的 UI 工具包](https://www.figma.com/community/file/1233953507961010067)。多麼酷啊！ ![使用者介面套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jf4cwk5ybsc89dhz696.png) Tremor 在 GitHub 上擁有超過 14k 顆星，並有超過 280 個版本，這意味著它正在不斷改進。 https://github.com/tremorlabs/tremor 星震 ⭐️ --- 8. [Watermelon DB](https://github.com/Nozbe/WatermelonDB) - 用於 React 和 React Native 的反應式和非同步資料庫。 ------------------------------------------------------------------------------------------------ ![西瓜資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbofucs4kcaix7igjfch.png) 我不知道為什麼資料庫有這麼多選項；甚至很難全部數清。但如果我們使用 React，Watermelon DB 是一個不錯的選擇。即使在 4k+ 提交之後，它們仍然處於`v0.28`版本，這是一個相當大的問題。 Rocket.chat 使用 Watermelon DB，這給了他們巨大的可信度。 開始使用以下 npm 指令。 ``` npm install @nozbe/watermelondb ``` 您需要做的第一件事是建立模型和後續遷移（閱讀文件）。 ``` import { appSchema, tableSchema } from '@nozbe/watermelondb' export default appSchema({ version: 1, tables: [ // We'll add to tableSchemas here ] }) ``` 根據文件，使用 WatermelonDB 時，您正在處理模型和集合。然而，在 Watermelon 之下有一個底層資料庫（SQLite 或 LokiJS），它使用不同的語言：表格和欄位。這些一起稱為資料庫模式。 您可以閱讀有關[CRUD 操作的](https://watermelondb.dev/docs/CRUD)[文件](https://watermelondb.dev/docs/Installation)和更多內容。 https://github.com/Nozbe/WatermelonDB 明星 WatermelonDB ⭐️ --- 9. [Evergreen UI](https://github.com/segmentio/evergreen) - 按 Segment 劃分的 React UI 框架。 -------------------------------------------------------------------------------------- ![常青用戶介面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkfdl3thy6cdukhxg92j.png) 沒有 UI 框架的清單幾乎是不可能的。有許多受歡迎的選項，例如 Material、Ant Design、Next UI 等等。 但我們正在報道 Evergreen，它本身就非常好。 開始使用以下 npm 指令。 ``` $ npm install evergreen-ui ``` [Evergreen Segment 網站](https://evergreen.segment.com/foundations)上顯示了任何使用者介面的基礎以及詳細的選項。 ![基礎](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imir9z0siqqwh99p6lno.png) 它提供了很多元件，其中一些非常好，例如`Tag Input`或`File uploader` 。 ![標籤輸入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrsxzhzdemj49aeauc8j.png) ![文件上傳器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fckysg2iz6iz7c4st3as.png) 您可以看到 Evergreen UI 提供的所有[元件](https://evergreen.segment.com/components)。 https://github.com/segmentio/evergreen Star Evergreen UI ⭐️ --- 10. [React Spring](https://www.react-spring.dev/) - 流暢的動畫來提升 UI 和互動。 -------------------------------------------------------------------- ![反應彈簧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouigl2pr2rwbyj2whzli.png) ![流體動畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eosf22k1notx3wa1pfpd.png) 如果您喜歡 React-Motion 但感覺過渡不流暢，那是因為它專門使用 React 渲染。 如果你喜歡 Popmotion，但感覺自己的能力受到限制，那是因為它完全跳過了 React 渲染。 `react-spring`提供了兩種選擇，試試看！ 開始使用以下 npm 指令。 ``` npm i @react-spring/web ``` 這就是導入高階元件來包裝動畫的方法。 ``` import { animated } from '@react-spring/web' // use it. export default function MyComponent() { return ( <animated.div style={{ width: 80, height: 80, background: '#ff6d6d', borderRadius: 8, }} /> ) } ``` 由於以下程式碼和框，我決定嘗試 React Spring。令人驚訝的是，我們可以使用 React Spring 做很多事情。 https://codesandbox.io/embed/mdovb?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx&hidenavigation=1 您可以閱讀[文件](https://www.react-spring.dev/docs/getting-started)。 他們還提供了很多您可以學習的[範例](https://www.react-spring.dev/examples)。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/muzldxpw58tun2yyn18t.png) 它提供了大量的選項，例如`useScroll` ，它允許您建立滾動連結動畫。 例如，這個codesandbox告訴了`useScroll`的用法。 https://codesandbox.io/embed/b07dmz?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx&hidenavigation=1 React Spring 在 GitHub 上有大約 27k+ Stars。 https://github.com/pmndrs/react-spring Star React Spring ⭐️ --- 11. [React Tweet](https://github.com/vercel/react-tweet) - 將推文嵌入到你的 React 應用程式中。 -------------------------------------------------------------------------------- ![反應推文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t2ktcvb8p6eitul8y9b.png) `React Tweet`可讓您在使用 Next.js、Create React App、Vite 等時將推文嵌入到 React 應用程式中。 該函式庫不需要使用 Twitter API。推文可以靜態呈現，從而無需包含 iframe 和額外的客戶端 JavaScript。 它是 Vercel 的開源專案。 開始使用以下 npm 指令。 ``` npm i react-tweet ``` 為了顯示推文，我們需要從 Twitter 的 API 請求資料。透過此 API 進行速率限制具有挑戰性，但如果您僅依賴我們提供的 SWR 端點 ( `react-tweet.vercel.app/api/tweet/:id` )，這是可能的，因為伺服器的IP 位址向Twitter 發出了許多請求API。這也適用於 RSC，其中 API 端點不是必需的，但伺服器仍然從相同 IP 位址發送請求。 為了避免 API 限制，您可以使用 Redis 或 Vercel KV 等資料庫快取推文。例如，您可以使用 Vercel KV。 ``` import { Suspense } from 'react' import { TweetSkeleton, EmbeddedTweet, TweetNotFound } from 'react-tweet' import { fetchTweet, Tweet } from 'react-tweet/api' import { kv } from '@vercel/kv' async function getTweet( id: string, fetchOptions?: RequestInit ): Promise<Tweet | undefined> { try { const { data, tombstone, notFound } = await fetchTweet(id, fetchOptions) if (data) { await kv.set(`tweet:${id}`, data) return data } else if (tombstone || notFound) { // remove the tweet from the cache if it has been made private by the author (tombstone) // or if it no longer exists. await kv.del(`tweet:${id}`) } } catch (error) { console.error('fetching the tweet failed with:', error) } const cachedTweet = await kv.get<Tweet>(`tweet:${id}`) return cachedTweet ?? undefined } const TweetPage = async ({ id }: { id: string }) => { try { const tweet = await getTweet(id) return tweet ? <EmbeddedTweet tweet={tweet} /> : <TweetNotFound /> } catch (error) { console.error(error) return <TweetNotFound error={error} /> } } const Page = ({ params }: { params: { tweet: string } }) => ( <Suspense fallback={<TweetSkeleton />}> <TweetPage id={params.tweet} /> </Suspense> ) export default Page ``` 您可以直接使用它，方法非常簡單。 ``` <div className="dark"> <Tweet id="1629307668568633344" /> </div> ``` 如果您不喜歡使用 Twitter 主題，您也可以使用多個選項建立自己的[自訂主題](https://react-tweet.vercel.app/custom-theme)。 例如，您可以建立自己的推文元件，但沒有回覆按鈕，如下所示： ``` import type { Tweet } from 'react-tweet/api' import { type TwitterComponents, TweetContainer, TweetHeader, TweetInReplyTo, TweetBody, TweetMedia, TweetInfo, TweetActions, QuotedTweet, enrichTweet, } from 'react-tweet' type Props = { tweet: Tweet components?: TwitterComponents } export const MyTweet = ({ tweet: t, components }: Props) => { const tweet = enrichTweet(t) return ( <TweetContainer> <TweetHeader tweet={tweet} components={components} /> {tweet.in_reply_to_status_id_str && <TweetInReplyTo tweet={tweet} />} <TweetBody tweet={tweet} /> {tweet.mediaDetails?.length ? ( <TweetMedia tweet={tweet} components={components} /> ) : null} {tweet.quoted_tweet && <QuotedTweet tweet={tweet.quoted_tweet} />} <TweetInfo tweet={tweet} /> <TweetActions tweet={tweet} /> {/* We're not including the `TweetReplies` component that adds the reply button */} </TweetContainer> ) } ``` 您可以閱讀[文件](https://react-tweet.vercel.app/#installation)。 您可以查看[React Tweet 的演示，](https://react-tweet-next.vercel.app/light/1761133168772489698)以了解它如何在頁面上呈現。 它們已發布`v3.2`版本，這表明它們正在不斷改進，並且[每週下載量超過 46k+](https://www.npmjs.com/package/react-tweet) 。 https://github.com/vercel/react-tweet Star React 推文 ⭐️ --- 12. [React 360](https://github.com/facebookarchive/react-360) - 使用 React 建立令人驚嘆的 360 度和 VR 內容。 ---------------------------------------------------------------------------------------------- ![反應 360](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92546vucm4rnnseew2fi.png) 儘管 Facebook 已將其存檔，但許多開發人員仍然發現它足夠有用，因此繼續使用。 React 360 是一個函式庫，它利用大量 React Native 功能來建立在 Web 瀏覽器中執行的虛擬實境應用程式。 它使用 Three.js 進行渲染，並作為 npm 套件提供。透過將 WebGL 和 WebVR 等現代 API 與 React 的聲明性功能結合，React 360 有助於簡化建立跨平台 VR 體驗的過程。 開始使用以下 npm 指令。 ``` npm install -g react-360-cli ``` 涉及的事情有很多，但您可以使用 VrButton 加入重要的互動功能到您的 React VR 應用程式。 ``` import { AppRegistry, StyleSheet, Text, View, VrButton } from 'react-360'; state = { count: 0 }; _incrementCount = () => { this.setState({ count: this.state.count + 1 }) } <View style={styles.panel}> <VrButton onClick={this._incrementCount} style={styles.greetingBox}> <Text style={styles.greeting}> {`You have visited Simmes ${this.state.count} times`} </Text> </VrButton> </View> ``` 除了許多令人驚奇的東西之外，您還可以加入聲音。請參閱[使用 React 360 的 React Resources](https://reactresources.com/topics/react-360)範例。 您也可以閱讀 Log Rocket 撰寫的關於[使用 React 360 建立 VR 應用](https://blog.logrocket.com/building-a-vr-app-with-react-360/)程式的部落格。 這個codesandbox代表了我們可以使用React 360做什麼的一個常見範例。 https://codesandbox.io/embed/2bye27?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.js&hidenavigation=1 https://github.com/facebookarchive/react-360 Star React 360 ⭐️ --- 13. [React Advanced Cropper](https://github.com/advanced-cropper/react-advanced-cropper) - 建立適合您網站的裁剪器。 ------------------------------------------------------------------------------------------------------- ![反應先進的作物](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9b7o2lchxua4urkot79.png) ![反應先進的作物](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc5328gj9v9yjbptu3nn.png) React Advanced Cropper 是一個高級庫，可讓您建立適合任何網站設計的裁剪器。這意味著您不僅可以更改裁剪器的外觀，還可以自訂其行為。 它們仍處於測試版本，這意味著 API 可能會在未來版本中發生變化。 簡單的用例是設計軟體和裁剪圖像表面以獲得進一步的見解。 他們有很多選擇，因此值得。 ![選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt5br00qyymlllmjlowk.png) ![選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atvlbxjowv1isjoi3p6m.png) 開始使用以下 npm 指令。 ``` npm install --save react-advanced-cropper ``` 您可以這樣使用它。 ``` import React, { useState } from 'react'; import { CropperRef, Cropper } from 'react-advanced-cropper'; import 'react-advanced-cropper/dist/style.css' export const GettingStartedExample = () => { const [image, setImage] = useState( 'https://images.unsplash.com/photo-1599140849279-1014532882fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80', ); const onChange = (cropper: CropperRef) => { console.log(cropper.getCoordinates(), cropper.getCanvas()); }; return ( <Cropper src={image} onChange={onChange} className={'cropper'} /> ) }; ``` 您可以閱讀[文件](https://advanced-cropper.github.io/react-advanced-cropper/docs/intro)，它們提供了[20 多個自訂選項](https://github.com/advanced-cropper/react-advanced-cropper?tab=readme-ov-file#cropper)。 他們主要提供三種類型的[裁剪器選項](https://advanced-cropper.github.io/react-advanced-cropper/docs/guides/cropper-types/)：固定、經典和混合以及範例和程式碼。 您可以使用 React Advanced Cropper 製作一些令人興奮的東西來向世界展示:) https://github.com/advanced-cropper/react-advanced-cropper Star React 進階裁剪器 ⭐️ --- 14. [Mobx](https://github.com/mobxjs/mobx) - 簡單、可擴展的狀態管理。 --------------------------------------------------------- ![行動裝置](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od2isnsvbr1y349cpcnb.png) MobX 是一個經過驗證的基於訊號的函式庫，可透過函數反應式程式設計簡化和擴展狀態管理。它提供了靈活性，使您能夠獨立於任何 UI 框架來管理應用程式狀態。 這種方法會產生解耦、可移植且易於測試的程式碼。 以下是使用 MobX 的任何應用程式中處理事件的方式。 ![事件架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k0uxde1tnj8y8xizo8c.png) 圖片來自文件 開始使用以下 npm 指令。 ``` npm install mobx-react --save // CDN is also available ``` 這就是它的樣子。 ``` import { observer } from "mobx-react" // ---- ES6 syntax ---- const TodoView = observer( class TodoView extends React.Component { render() { return <div>{this.props.todo.title}</div> } } ) // ---- ESNext syntax with decorator syntax enabled ---- @observer class TodoView extends React.Component { render() { return <div>{this.props.todo.title}</div> } } // ---- or just use function components: ---- const TodoView = observer(({ todo }) => <div>{todo.title}</div>) ``` 您可以使用 props、全域變數或使用 React Context 在觀察者中使用外部狀態。 您可以閱讀[有關 React Integration](https://mobx.js.org/react-integration.html)和[npm docs](https://www.npmjs.com/package/mobx-react#api-documentation)的文件。 您也可以閱讀[MobX 和 React 的 10 分鐘互動介紹](https://mobx.js.org/getting-started)。 MobX 在 GitHub 上擁有超過 27k 顆星，並在 GitHub 上被超過 140K 開發者使用。 https://github.com/mobxjs/mobx 明星 Mobx ⭐️ --- 15. [React Virtualized](https://github.com/bvaughn/react-virtualized) - 渲染大型清單和表格資料。 ------------------------------------------------------------------------------------ ![反應虛擬化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znt47ig09aebglto0915.png) 開始使用以下 npm 指令。 ``` npm install react-virtualized --save ``` 以下是如何在網格中使用 ColumnSizer 元件。探索演示（文件）以詳細了解可用選項。 ``` import React from 'react'; import ReactDOM from 'react-dom'; import {ColumnSizer, Grid} from 'react-virtualized'; import 'react-virtualized/styles.css'; // only needs to be imported once // numColumns, numRows, someCalculatedHeight, and someCalculatedWidth determined here... // Render your list ReactDOM.render( <ColumnSizer columnMaxWidth={100} columnMinWidth={50} columnCount={numColumns} width={someCalculatedWidth}> {({adjustedWidth, getColumnWidth, registerChild}) => ( <Grid ref={registerChild} columnWidth={getColumnWidth} columnCount={numColumns} height={someCalculatedHeight} cellRenderer={someCellRenderer} rowHeight={50} rowCount={numRows} width={adjustedWidth} /> )} </ColumnSizer>, document.getElementById('example'), ); ``` 您可以閱讀[文件](https://github.com/bvaughn/react-virtualized/tree/master/docs#documentation)和[演示](https://bvaughn.github.io/react-virtualized/#/components/List)。 他們提供了 React-window 作為輕量級的替代方案，但這個在發布和明星方面更受歡迎，所以我介紹了這個選項。您可以閱讀哪個選項更適合您： [React-Window 與 React-Virtualized 有何不同？](https://github.com/bvaughn/react-window?tab=readme-ov-file#how-is-react-window-different-from-react-virtualized) 。 它被超過 85,000 名開發人員使用，並在 GitHub 上擁有超過 25,000 顆星。它還擁有令人印象深刻的[170 萬+ 每週下載量](https://www.npmjs.com/package/react-virtualized)。 https://github.com/bvaughn/react-virtualized Star React 虛擬化 ⭐️ --- 16.React [Google Analytics](https://github.com/react-ga/react-ga) - React Google Analytics 模組。 ---------------------------------------------------------------------------------------------- ![反應Google分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6lh8m8zussnyn32togy.png) 這是一個 JavaScript 模組，可用於在使用 React 作為前端程式碼庫的網站或應用程式中包含 Google Analytics 追蹤程式碼。 該模組對我們如何在前端程式碼中進行追蹤有一定的看法。我們的 API 比核心 Google Analytics 庫稍微詳細一些，以使程式碼更易於閱讀。 開始使用以下 npm 指令。 ``` npm install react-ga --save ``` 您可以這樣使用它。 ``` import ReactGA from 'react-ga'; ReactGA.initialize('UA-000000-01'); ReactGA.pageview(window.location.pathname + window.location.search); <!-- The core React library --> <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> <!-- The ReactDOM Library --> <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> <!-- ReactGA library --> <script src="/path/to/bower_components/react-ga/dist/react-ga.min.js"></script> <script> ReactGA.initialize('UA-000000-01', { debug: true }); </script> ``` 執行`npm install` `npm start`並前往`port 8000 on localhost`後，您可以閱讀[文件](https://github.com/react-ga/react-ga?tab=readme-ov-file#installation)並查看[演示](https://github.com/react-ga/react-ga/tree/master/demo)。 它每週的下載量超過 35 萬次，在 GitHub 上擁有超過 5,000 顆星（已存檔）。 https://github.com/react-ga/react-ga Star React Google Analytics ⭐️ --- 17.react [-i18next](https://github.com/i18next/react-i18next) - React 的國際化做得很好。 ------------------------------------------------------------------------------- ![反應-i18next](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrxn9omsv79bzy9j9mr4.png) 無需更改 webpack 配置或加入額外的 babel 轉譯器。 開始使用以下 npm 指令。 ``` npm i react-i18next ``` 我們來比較一下程式碼結構。 > 在使用react-i18next之前。 ``` ... <div>Just simple content</div> <div> Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>. </div> ... ``` > 使用react-i18next後。 ``` ... <div>{t('simpleContent')}</div> <Trans i18nKey="userMessagesUnread" count={count}> Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>. </Trans> ... ``` 您可以閱讀[文件](https://react.i18next.com/)並前往[Codesandbox 的互動式遊樂場](https://codesandbox.io/s/1zxox032q)。 該工具已被超過 182,000 名開發人員使用，在 GitHub 上擁有超過 8,000 顆星。軟體包中令人印象深刻的 3400k+ 下載量進一步鞏固了它的可信度，使其成為您下一個 React 專案的絕佳選擇。 您也可以閱讀 Locize 關於[React Localization - Internationalize with i18next](https://locize.com/blog/react-i18next/)的部落格。 https://github.com/i18next/react-i18next 明星react-i18next ⭐️ --- 哇！如此長的有用專案清單。 我知道您有更多想法，分享它們，讓我們一起建造：D 現在就這些了！ 在開展新專案時，開發人員經驗至關重要，這就是為什麼有些專案擁有龐大的社區，而有些則沒有。 React 社群非常龐大，所以成為這些社群的一部分，並使用這些開源專案將您的專案提升到一個新的水平。 祝你有美好的一天！直到下一次。 在 GitHub 上關注我。 https://github.com/Anmol-Baranwal 請關注 CopilotKit 以了解更多此類內容。 https://dev.to/copilotkit --- 原文出處：https://dev.to/copilotkit/libraries-you-should-know-if-you-build-with-react-1807

0個讚   0留言 111瀏覽

關於 Deno 和 Node 的未來

如果 Node 是今天寫的，它會是什麼樣子？一言以蔽之： [**Deno**](https://deno.land/) 。 JS 執行時內建了 Typescript 並簡化了模組解析。最重要的是，它將安全性提升到了一個新的水平，並縮小了我們在後端編寫 javascript 的方式與瀏覽器之間的差距。 不久前 ... ------- 2009 年發布的 node 以令人難以置信的速度席捲了世界。儘管最初對在後端執行 javascript 持懷疑態度，但社區的支持是無與倫比的。很快，複雜的工具出現了，幾年後（2014 年），微軟發布了 Typescript，對 Javascript 進行了雙重押注。 如今，Node 是後端開發最受歡迎的選擇之一。基於事件的伺服器理念確保了高效能/吞吐量比。執行 Javascript 對許多開發人員來說是一種易於使用的工具。在某種程度上，可以說，Node 透過降低進入門檻實現了後端開發的民主化。在過去的五年裡，我一直很高興地使用 Node，但同時，我想知道未來在等待著什麼？ 街區的新來者：Deno ----------- 如網站所述，Deno 專案於 2018 年啟動，為 Javascript 和 Typescript 提供安全的執行時間。它基本上由兩部分組成： TypeScript 前端和 Rust 後端。兩者之間的通訊是透過使用`TypedArrays`進行訊息傳遞來進行。 ![替代文字](https://dev-to-uploads.s3.amazonaws.com/i/aqzvipzkxwk1v45n22s9.png) > Deno 是 JavaScript/TypeScript 執行時，具有安全的預設設定和出色的開發人員體驗。 — Deno 網站 在底層，我們找到了 Typescript 編譯器、V8 引擎和 Tokio 事件循環的快照版本。總而言之，以小於 10 MB 的二進位檔案或 Rust 箱子的形式提供。 API老化 ----- 早在 2010 年就取消了 Node 的承諾，這在早期階段對社群有所幫助。但隨著 JavaScript 開始變得越來越快並引入了等待和非同步功能，Node 的 API 開始老化。 今天我們付出了巨大的努力來讓他們加快速度，同時保持一致的版本控制。許多 API 呼叫仍必須包裝在建構函式（如`promisify`中才能與`Promise`語法一起使用。這個額外的步驟增加了開發的開銷並增加了應用程式中的樣板檔案。 相比之下，Promise 是 Deno 異步行為的本機綁定。 Rust 後端透過 Rust Futures 鏡像從 Typescript 前端接收的 Promise 物件。 Deno 中的非同步操作總是會傳回`Promise` 。 Node 的另一個值得注意的是它依賴`Buffer`物件來讀寫資料。為了實現瀏覽器介面的統一，Deno 在各處都使用了[`TypedArrays`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) 。使用相同的資料結構時，在後端和前端讀寫檔案時保持一致會容易得多。 零設定的 TypeScript ------- 如果你使用 Typescript，你就會知道它是一個出色的工具。它引入了一個可以隨著應用程式的成長而強制執行的類型系統。這透過提供靈活性減少了傳統靜態類型的開銷。專案可以在請求中進行部分類型化，並且類型覆蓋範圍可以隨著應用程式的成長而擴展。 在 Node 中，Typescript 可以直接與`ts-node`一起使用，儘管在生產中必須小心。最安全、效能最好的選擇是使用`ts-node`進行開發。然後編譯為 javascript 以進行生產。開發的設定可能很複雜，尤其是與熱程式碼重新載入等其他功能一起使用時。 另一方面，Deno 完全是關於 Typescript 的。它使用編譯器的快照版本並捕獲未更改的檔案。你想執行 Typescript 程式碼嗎？只需執行 Deno 二進位檔案即可。沒有配置。沒有喧囂。是不是很簡單，當然它也支援javascript。 類似瀏覽器的套件解析 ---------- Node 目前的解析方案使模組解析過於複雜。該演算法在文件位置和命名方面提供了靈活性，但在複雜性方面做出了相當大的權衡。 `require`呼叫將先搜尋具有相同名稱和`.js` 、 `.json`或`.node`副檔名的檔案。如果指定的路徑不包含前導`'/'` 、 `'./'`或`'../'` node ，則假定該模組是核心模組或`node_modules`資料夾中的依賴項。如果名稱不匹配，核心模組 node 將檢查該位置的node\_modules。如果沒有找到任何內容，它將到達父目錄並繼續這樣做，直到到達檔案系統的根目錄。 此外，資料夾可以在`package.json`檔案中指定為模組。 `require`函數也知道開始檢查的所有資料夾的`package.json`檔案。一旦找到資料夾，Node 將在其中查找`index.js`或`index.node`檔案。不必提供檔案副檔名的自由和`package.json`的靈活性會顯著增加複雜性並降低效能。 Deno 透過提供兩種類型的模組解析（相對解析和基於 URL 解析）來簡化演算法： ``` import * from "https://deno.land/std/testing/asserts.ts"; ``` 另外，解析演算法不使用`package.json`檔案或`node_modules`資料夾。它使用 ES 模組導入而不是`require` 。這使我們能夠使用現代方法進行程式碼管理，而無需預編譯器，並使我們再次更接近 Javascript 在瀏覽器中的使用方式。 分散式套件管理 ------- 目前，無伺服器的採用率每年翻倍。開發人員通常將單體應用程式拆分為微服務。現在我們將微服務拆分為功能。為什麼？嗯，一方面，沒有人願意處理編排，除非我們也有。另一方面，分散式系統更加靈活，可以更快地改變。最重要的是，應用程式正在成為由更小且獨立的部分組成的系統。 典型的 JavaScript 後端應用程式僅使用 0.3% 的程式碼。其餘部分由`node_modules`資料夾中的套件組成。而且許多在執行時幾乎不被使用。同時，整個生態系統依賴一個集中的套件管理器： `npm` 。 **Deno**帶來了一種分散式套件管理方法。套件可以透過 URL 解析並隨後捕獲。應用程式更輕，更少依賴單一的集中式套件註冊表。 關於安全 ---- 在進行後端開發時，我希望安全性能夠在盒子之外發揮作用。我最不想考慮的是存取網路或檔案系統的 linter 檔案或 node 模組。 在 Deno 中，內部函數不能像在 Node 中那樣任意呼叫 V8 API。 Deno 的 API 和 JS 引擎之間的通訊是集中且統一的，基於類型化陣列的訊息傳遞。 > 除非特別允許，否則腳本無法存取檔案、環境或網路。 — 德諾.蘭 只有當使用者明確指定時，使用 Deno 執行的腳本才能存取檔案系統和網路。更好的是，可以使用 —allow 標誌在檔案、資料夾層級或網路路徑層級授予權限。這為開發人員提供了對執行時發生的讀寫操作的精細控制。 ``` $ deno --allow-net https://deno.land/std/examples/echo_server.ts ``` 與應用於從`npn`提取的依賴項的「信任」策略相比，預設的安全性是一項重大升級。借助 Deno，您可以執行和開發應用程式，並確信它們會執行預期的操作。 加起來 --- 如果 Node 在今天建置， **Deno**就是它的樣子。它提高了安全性、簡化了模組解析並執行 Typescript。 當我寫這篇文章時，我們仍處於 0.33 版本並且正在快速發展。我確信您來到這裡是因為您在某種程度上使用了 Node 或 Javascript。如果你像我一樣，你可能會喜歡它。但正如他們所說，愛某樣東西真正意味著放手。 我期待看到 Deno 超越單純的腳本執行時，並聽到生產中的第一次經驗。只要開發人員繼續顛覆自己，我們總是能期待更快、更簡單、更可靠的軟體。 最初發佈於[bogdanned.com](https://bogdanned.com/blog) 。 --- 原文出處：https://dev.to/bogdanned/on-deno-and-the-future-of-node-1l0p

0個讚   0留言 90瀏覽

用 PHP 處理 10 億行大挑戰！

您可能聽說過「十億行挑戰」(1brc)，如果您沒有聽說過，請查看[Gunnar Morlings 的 1brc 儲存庫](https://github.com/gunnarmorling/1brc)。 我之所以被吸引，是因為我的兩位同事參加了比賽並進入了[排行榜](https://github.com/gunnarmorling/1brc?tab=readme-ov-file#results)。 PHP 並不以其速度而聞名，但當我正在開發 PHP 分析器時，我想我應該嘗試它，看看它能達到多快。 第一種幼稚的方法 -------- 我克隆了儲存庫並在`measurements.txt`中建立了十億行資料集。之後，我開始建立我的第一個天真的實現，可以解決這個挑戰： ``` <?php $stations = []; $fp = fopen('measurements.txt', 'r'); while ($data = fgetcsv($fp, null, ';')) { if (!isset($stations[$data[0]])) { $stations[$data[0]] = [ $data[1], $data[1], $data[1], 1 ]; } else { $stations[$data[0]][3] ++; $stations[$data[0]][2] += $data[1]; if ($data[1] < $stations[$data[0]][0]) { $stations[$data[0]][0] = $data[1]; } if ($data[1] > $stations[$data[0]][1]) { $stations[$data[0]][1] = $data[1]; } } } ksort($stations); echo '{'; foreach($stations as $k=>&$station) { $station[2] = $station[2]/$station[3]; echo $k, '=', $station[0], '/', $station[2], '/', $station[1], ', '; } echo '}'; ``` 這裡沒什麼瘋狂的，只要打開文件，使用`fgetcsv()`讀取資料即可。如果尚未找到該站，則建立它，否則增加計數器，對溫度求和，並查看當前溫度是否低於或高於最小值或最大值並相應更新。 一旦我把所有東西都放在一起，我使用`ksort()`將`$stations`陣列按順序排列，然後回顯列表併計算平均溫度（總和/計數）。 在我的筆記型電腦上執行這個簡單的程式碼需要**25 分鐘**🤯 是時候優化並查看分析器了： ![使用 Datadog PHP 分析器的時間軸視覺化顯示程式碼 100% CPU 限制](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0oa9bmscw0ftmclu52ar.png) 時間軸視覺化幫助我看到，這顯然是 CPU 限制的，腳本開頭的檔案編譯可以忽略不計，並且沒有垃圾收集事件。 ![火焰圖視圖顯示我們在 <code>fgetcsv()</code> 函數中花了 46% 的 CPU 時間。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eaqtevjh0xw51brtj8gq.png) 火焰圖視圖也有助於顯示我在`fgetcsv()`上花費了 46% 的 CPU 時間。 `fgets()`而不是`fgetcsv()` ----------------------- 第一個最佳化是使用`fgets()`取得一行並在`;`上分割。手動輸入字元而不是依賴`fgetcsv()` 。這是因為`fgetcsv()`所做的事情遠遠超出了我的需要。 ``` // ... while ($data = fgets($fp, 999)) { $pos = strpos($data, ';'); $city = substr($data, 0, $pos); $temp = substr($data, $pos+1, -1); // ... ``` 此外，我在各處將`$data[0]`重構為`$city` ，將`$data[1]`為`$temp` 。 僅透過此變更再次執行腳本就已將執行時間降至**19m 49s** 。從絕對數字來看，這仍然是很多，而且：**下降了 21%** ！ ![火焰圖視圖現在顯示 <code>fgets()</code>、<code>substr()</code> 和 <code>strpos()</code> 組合使用與 <code>fgetcsv 幾乎相同數量的 CPU ( )</code> 之前，但仍然更快](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1dw496lb9t0f87rv1on.png) 火焰圖反映了這一變化，切換到按行顯示 CPU 時間也揭示了根框架中發生的情況： ![火焰圖按行顯示 CPU 時間，表示我們在第 18 行和第 23 行花了 38%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3alzj7h95socs4broq46.png) 我在第 18 行和第 23 行花費了約 38% 的 CPU 時間，它們是： ``` 18 | $stations[$city][3] ++; | // ... 23 | if ($temp > $stations[$city][1]) { ``` 第 18 行是循環中對`$stations`陣列的第一次存取，否則它只是一個增量，第23 行是一個比較，乍一看似乎沒什麼昂貴的，但讓我們再做一些優化，你就會看到發生了什麼時間在這裡。 盡可能使用參考 ------- ``` $station = &$stations[$city]; $station[3] ++; $station[2] += $temp; // instead of $stations[$city][3] ++; $stations[$city][2] += $data[1]; ``` 這應該有助於 PHP 在每次存取陣列時不必搜尋`$stations`陣列中的鍵，將其視為用於存取陣列中“當前”電台的快取。 它實際上很有幫助，執行這個只需要**17m 48s** ，又**減少了 10%** ！ 只有一處比較 ------ 在查看程式碼時，我偶然發現了這段程式碼： ``` if ($temp < $station[0]) { $station[0] = $temp; } if ($temp > $station[1]) { $station[1] = $temp; } ``` 如果溫度低於最小值，它就不能再高於最大值，所以我將其設為`elseif` ，也許可以節省一些 CPU 週期。 順便說一句：我對`measurements.txt`中的溫度順序一無所知，但根據該順序，如果我先檢查一個或另一個，可能會產生影響。 新版本需要 17m 30s，又增加了約 2%。比僅僅抖動好，但也不是很多。 新增類型轉換 ------ PHP被認為是一種動態語言，這是我剛開始寫軟體時非常重視的東西，少了一個需要關心的問題。但另一方面，了解類型有助於引擎在執行程式碼時做出更好的決策。 ``` $temp = (float)substr($data, $pos+1, -1); ``` 你猜怎麼了？這個簡單的轉換使腳本執行時間僅為**13m 32s** ，**效能提升了 21%** ！ ![火焰圖按行顯示 CPU 時間，表示我們在 23 中花了 15%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1lbrmj9buc9gtcmycb9.png) ``` 18 | $station = &$stations[$city]; | // ... 23 | } elseif ($temp > $station[1]) { ``` 第 18 行仍然顯示 11% 的 CPU 時間花費，這是對陣列的存取（在哈希映射中查找鍵，哈希映射是 PHP 中用於關聯陣列的底層資料結構）。 第 23 行的 CPU 時間從 ~32% 下降到 ~15%。這是因為 PHP 不再進行型別處理。在型別轉換之前， `$temp` / `$station[0]` / `$station[1]`是`strings` ，因此 PHP 必須將它們轉換為`float`以便在每次比較時對它們進行比較。 JIT 怎麼樣？ -------- PHP 中的 OPCache 在 CLI 中預設為停用狀態，需要將[`opcache.enable_cli`設定](https://www.php.net/manual/en/opcache.configuration.php#ini.opcache.enable-cli)設為`on` 。 JIT（作為 OPCache 的一部分）預設為啟用，但由於緩衝區大小設定為`0`而有效停用，因此我將[`opcache.jit-buffer-size`](https://www.php.net/manual/en/opcache.configuration.php#ini.opcache.jit-buffer-size)設為某個值，我只是使用`10M` 。應用這些更改後，我使用 JIT 重新執行腳本並看到它完成： **7m 19s** 🚀 花費的時間減少了**45.9%** ！ 還有什麼？ ----- 我已經將執行時間從一開始的 25 分鐘縮短到了大約 7 分鐘。我發現絕對令人驚訝的一件事是`fgets()`分配 ~56 GiB/m 的 RAM 來讀取 13 GB 檔案。似乎有些不對勁，所以我檢查了[`fgets()`的實現](https://github.com/php/php-src/blob/7f8465ab22648fb05fa39bacbd82aa48914a2e39/ext/standard/file.c#L884-L931)，看起來我可以透過省略`fgets()`的`len`參數來節省大量分配： ``` while ($data = fgets($fp)) { // instead of while ($data = fgets($fp, 999)) { ``` 比較更改前後的設定檔可以得出以下結果： ![忽略 <code>fgets()</code> 的 len 參數之前和之後的設定檔比較視圖顯示，PHP 每分鐘僅分配 6BiG，而不是每分鐘 56 GiB。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g77b7f30l235u7t1p9s7.png) 您可能認為這帶來了很大的效能提升，但實際上只有大約 1%。這是因為這些是[ZendMM 可以在 bin 中處理的](https://www.phpinternalsbook.com/php7/memory_management/zend_memory_manager.html#zendmm-internal-design)小分配，而且速度非常快。 我們可以讓它更快嗎？ ---------- 我們可以！到目前為止，我的方法是單線程，這是大多數 PHP 軟體的本質，但 PHP 確實透過[並行擴展來](https://github.com/krakjoe/parallel)支援使用者狀態中的線程。 正如分析器清楚地顯示的那樣，在 PHP 中讀取資料是一個瓶頸。從`fgetcsv()`切換到`fgets()`並手動拆分會有所幫助，但這仍然需要花費大量時間，因此讓我們使用線程並行讀取和處理資料，然後合併工作線程的中間結果。 ``` <?php $file = 'measurements.txt'; $threads_cnt = 16; /** * Get the chunks that each thread needs to process with start and end position. * These positions are aligned to \n chars because we use `fgets()` to read * which itself reads till a \n character. * * @return array<int, array{0: int, 1: int}> */ function get_file_chunks(string $file, int $cpu_count): array { $size = filesize($file); if ($cpu_count == 1) { $chunk_size = $size; } else { $chunk_size = (int) ($size / $cpu_count); } $fp = fopen($file, 'rb'); $chunks = []; $chunk_start = 0; while ($chunk_start < $size) { $chunk_end = min($size, $chunk_start + $chunk_size); if ($chunk_end < $size) { fseek($fp, $chunk_end); fgets($fp); // moves fp to next \n char $chunk_end = ftell($fp); } $chunks[] = [ $chunk_start, $chunk_end ]; $chunk_start = $chunk_end+1; } fclose($fp); return $chunks; } /** * This function will open the file passed in `$file` and read and process the * data from `$chunk_start` to `$chunk_end`. * * The returned array has the name of the city as the key and an array as the * value, containing the min temp in key 0, the max temp in key 1, the sum of * all temperatures in key 2 and count of temperatures in key 3. * * @return array<string, array{0: float, 1: float, 2: float, 3: int}> */ $process_chunk = function (string $file, int $chunk_start, int $chunk_end): array { $stations = []; $fp = fopen($file, 'rb'); fseek($fp, $chunk_start); while ($data = fgets($fp)) { $chunk_start += strlen($data); if ($chunk_start > $chunk_end) { break; } $pos2 = strpos($data, ';'); $city = substr($data, 0, $pos2); $temp = (float)substr($data, $pos2+1, -1); if (isset($stations[$city])) { $station = &$stations[$city]; $station[3] ++; $station[2] += $temp; if ($temp < $station[0]) { $station[0] = $temp; } elseif ($temp > $station[1]) { $station[1] = $temp; } } else { $stations[$city] = [ $temp, $temp, $temp, 1 ]; } } return $stations; }; $chunks = get_file_chunks($file, $threads_cnt); $futures = []; for ($i = 0; $i < $threads_cnt; $i++) { $runtime = new \parallel\Runtime(); $futures[$i] = $runtime->run( $process_chunk, [ $file, $chunks[$i][0], $chunks[$i][1] ] ); } $results = []; for ($i = 0; $i < $threads_cnt; $i++) { // `value()` blocks until a result is available, so the main thread waits // for the thread to finish $chunk_result = $futures[$i]->value(); foreach ($chunk_result as $city => $measurement) { if (isset($results[$city])) { $result = &$results[$city]; $result[2] += $measurement[2]; $result[3] += $measurement[3]; if ($measurement[0] < $result[0]) { $result[0] = $measurement[0]; } if ($measurement[1] < $result[1]) { $result[1] = $measurement[1]; } } else { $results[$city] = $measurement; } } } ksort($results); echo '{', PHP_EOL; foreach($results as $k=>&$station) { echo "\t", $k, '=', $station[0], '/', ($station[2]/$station[3]), '/', $station[1], ',', PHP_EOL; } echo '}', PHP_EOL; ``` 這段程式碼做了一些事情，首先我掃描檔案並將其分成`\n`對齊的區塊（因為我稍後使用`fgets()` ）。當我準備好區塊時，我啟動`$threads_cnt`工作線程，然後所有線程都打開同一個檔案並尋找分配的區塊開始並讀取和處理資料直到區塊結束，返回一個中間結果，然後將其組合、排序和列印在主線程中輸出。 這種多執行緒方法只需： **1 分 35 秒**🚀 這就是結局？ ------ 不，當然不是。這個解決方案至少還有兩件事： 1. 我在 Apple Silicon 硬體上的 MacOS 上執行此程式碼，[在 PHP 的 ZTS 版本中使用 JIT 時會崩潰](https://github.com/php/php-src/issues/13400)，因此 1m 35s 結果是沒有 JIT 的，如果我可以使用它，它可能會更快 2. 我意識到我正在執行一個使用`CFLAGS="-g -O0 ..."`編譯的 PHP 版本，因為我的日常工作需要 🤦 我應該在一開始就檢查一下這一點，所以我使用`CLFAGS="-Os ..."`重新編譯了 PHP 8.3，我的最終數字（有 16 個線程）是： 🚀 **27.7 秒**🚀 這個數字絕對無法與您在原始挑戰的排行榜中看到的數字相媲美，這是因為我在完全不同的硬體上執行了這段程式碼。 這是一個有 10 個執行緒的時間軸視圖： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmbh3qvasrr0iucwijgn.png) 最底層的線程是主線程，等待工作線程的結果。一旦這些工作人員返回了中間結果，就可以看到主線程正在對所有內容進行組合和排序。我們也可以清楚看到，主線程絕對不是瓶頸。如果您想嘗試進一步優化，請專注於工作線程。 我在路上學到了什麼？ ---------- 每個抽象層只是用可用性/整合來換取 CPU 週期或記憶體。 `fgetcsv()`非常容易使用，並且隱藏了很多東西，但是這是有代價的。即使`fgets()`也向我們隱藏了一些東西，但卻使讀取資料變得非常方便。 在程式碼中新增類型將有助於語言最佳化執行或停止類型雜耍（這是您看不到的東西，但仍然需要付出 CPU 週期的代價）。 JIT 非常棒，尤其是在處理 CPU 密集型問題時！ 這絕對不是大多數 PHP 軟體的本質，但由於並行化（使用[`ext-parallel`](https://github.com/krakjoe/parallel) ），我們可以顯著降低數字。 結束 -- 我希望您和我一樣從閱讀這篇文章中獲得樂趣。如果您想進一步優化程式碼，請隨時取得此程式碼並發表評論。 --- 原文出處：https://dev.to/realflowcontrol/processing-one-billion-rows-in-php-3eg0

0個讚   0留言 96瀏覽

計算機科學基礎仍然很重要。

我很不舒服地承認，2005 年我在微軟工作時，我不知道如何實作 BFS（廣度優先搜尋）。當時，我已經進入專業軟體工程職業生涯六年，並獲得了電腦科學碩士學位。 幾年後我仍然不知道這一點，有一天，在午餐時，有人提到他們之前面試過的候選人「甚至不知道如何找到圖中的最短路徑」。這讓我感覺很可怕——我知道我也做不到。幾秒鐘之內，我就從一個看似成功的微軟軟體工程師變成了一個冒名頂替者。這件事促使我提升了我的電腦科學基礎。 雖然我最終學習了 BFS，但我的例子表明，在軟體工程職業生涯中取得紮實的進步並不需要熟記*[演算法簡介](https://en.wikipedia.org/wiki/Introduction_to_Algorithms)*（又稱 CLRS）。與二十年前相比，今天更是如此。如今，我們正在更高的抽象層次上工作。最常見的演算法，如二分搜尋，都包含在標準庫中，實現它們是浪費時間。 儘管如此，我還是敦促每個開發人員學習電腦科學的基礎知識。 為什麼要學習電腦科學基礎？ ------------- 答案很簡單：學習電腦科學基礎可以促進你的職業生涯。方法如下。 **您將很快了解不熟悉的系統**。 一旦你學習了基本的演算法和資料結構，你就會發現它們無所不在。您將意識到 HTML 和 XML 文件是樹，鍵值儲存在概念上可以被視為哈希表，並且從單一消費者的角度來看，Kafka 主題是佇列。這是非常強大的，因為它可以讓您了解這些系統的行為和限制，即使您對它們了解不深。 當我第一次開始使用 git 時，我感到不知所措。我不明白它是如何運作的，這些命令也沒有多大意義。有一天，我在 YouTube 上又看了一篇 git 講解，其中提到 git 是一個 DAG（有向無環圖）。一夜之間，我成為了修復團隊成員儲存庫的 git 專家。 **您將能夠解決具有挑戰性的問題**。 軟體開發人員日常處理的大多數問題不需要先進的電腦科學知識。然而，偶爾會出現一個具有挑戰性的問題。這時了解演算法和資料結構會非常方便。我記得我在一個依賴圖問題上苦苦掙扎了幾天，當時我的同事指出，如果我應用拓撲排序，我可以快速解決它。 **你會在面試程式設計方面做得更好**。 許多面試，尤其是大型科技公司的面試，都包含程式設計問題。通常，這些問題可以使用一種標準演算法來解決。如果您熟悉他們，您將有更好的機會在這些面試中取得好成績。 如何保持技能與時俱進。 ----------- 大多數技能都會隨著時間的推移而退化。演算法技能沒有什麼不同。即使您記得演算法或資料結構背後的想法，隨著時間的推移，細節也會變得模糊。這就是為什麼定期更新你的技能是有好處的。有很多方法可以做到這一點。我最喜歡的是定期參加[Advent of Code](https://adventofcode.com/2023/about)活動。 Advent of Code 是 12 月的線上活動，直到聖誕節之前每天都會向您提出兩個問題。解決這些問題非常有趣，可以讓我提升演算法和解決問題的技能。但最好的部分是*解決方案大線程*——其他人發布解決方案的專用子版塊。一旦解決了當天的問題，我就會檢查這些線程。它們是我從未想到的驚人見解、非常規方法和程式設計技巧的寶庫，我從它們身上學到了很多。 圖片：https://cs.stackexchange.com/a/107190 --- 原文出處：https://dev.to/moozzyk/computer-science-fundamentals-are-still-important-5h5i

0個讚   0留言 85瀏覽

2024 年你需要了解的 Python 函式庫

長話短說 ---- 你正在學習Python嗎？這是一片叢林！ 您可以擁有任何您能想到的庫 - 從建立遊戲到建立 Web 應用程式。 透過此列表，無論您是剛剛入門還是想要深化 Python 遊戲，都可以快速了解 50 個標準 Python 庫及其用途。 ![介紹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at6swte9i2adqyeni03w.gif) --- 1.**Taipy** -------- Taipy 旨在加快應用程式開發，從最初的原型到生產就緒的應用程式。 這個開源 Python 函式庫專為輕鬆開發前端 (GUI) 和 ML/資料管道而設計。 它程式碼量低，專為任何 pythonista 設計。 ![口服](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scksaelbdhxsyzkv0bdq.png) https://github.com/Avaiga/taipy Star ⭐ Taipy 儲存庫 您的支持意義重大🌱，並在許多方面幫助我們，例如寫文章！ 🙏 --- **2.NumPy** ----------- 對於數值計算至關重要，支援大型多維陣列和矩陣。該函式庫是 Python 版稅的一部分。 https://github.com/numpy/numpy Star ⭐ Numpy 儲存庫 --- 3.**Pandas** -------- 資料操作和分析的基石，提供直覺的資料結構和操作來操作數值表和時間序列。又一個Python不可或缺的函式庫，必知的函式庫。 https://github.com/pandas-dev/pandas Star ⭐ Pandas 儲存庫 --- **4.Matplotlib** ---------------- 一種多功能工具，用於建立各種靜態、最小和互動式視覺化。有很多參數可供使用，這個函式庫在繪製 ML 和 AI 圖表時非常有用。 https://github.com/matplotlib/matplotlib Star ⭐ Matplotlib 儲存庫 --- **5.SciPy** ----------- 專注於技術和科學計算，使用 Scipy，您可以進行最佳化、整合、插值等。 https://github.com/scipy/scipy Star ⭐ SciPy 儲存庫 --- **6.Scikit-learn** -------------- 機器學習的首選庫，提供廣泛的監督和無監督學習演算法。開始機器學習時您應該了解的唯一庫。 https://github.com/scikit-learn/scikit-learn Star ⭐ Scikit-learn 儲存庫 --- **7.TensorFlow** ---------------- 機器學習的綜合框架提供了各種工具、庫和社區資源。學習曲線可能有點陡峭，但在 Python 和 ML 領域中了解 TF 很重要。 https://github.com/tensorflow/tensorflow Star ⭐ TensorFlow 儲存庫 --- **8.PyTorch** ------------- 由於其靈活性，提供動態神經網路建立和操作，因此受到學術研究和生產的青睞。 https://github.com/pytorch/pytorch Star ⭐ PyTorch 儲存庫 --- 9.**Keras** -------- 用於建立和訓練深度學習模型的高級 API，旨在促進神經網路的建構和使用。 https://github.com/keras-team/keras Star ⭐ Keras 儲存庫 --- 10.**requests** --------- 簡化了發出 HTTP 請求的過程，使 Web 抓取和 API 消費更容易存取。 https://github.com/psf/requests Star ⭐ 請求儲存庫 --- 11.**Beautiful Soup** ----------- 一種網頁抓取工具，有助於從 HTML 和 XML 文件中提取資料。 https://github.com/waylan/beautifulsoup Star ⭐ Beautiful Soup 儲存庫 --- 12.**Flask** --------- 一個輕量級且可擴展的 Web 框架，非常適合建立中小型 Web 應用程式。 https://github.com/pallets/flask Star ⭐ Flask 儲存庫 --- 13.**Django** --------- 這個高級框架專為快速開發和簡潔、實用的設計而設計。 https://github.com/django/django Star ⭐ Django 儲存庫 --- 14.**Selenium** -------- 該程式庫使 Web 瀏覽器自動化，從而能夠模擬實際使用者操作以測試 Web 應用程式。 https://github.com/SeleniumHQ/selenium Star ⭐ Selenium 儲存庫 --- **15.Pygame** ------------- 提供用於編寫視訊遊戲的 Python 模組，包括圖形和聲音庫。 https://github.com/pygame/pygame Star ⭐ Pygame 儲存庫 --- 16.**Pillow** --------------- 擴充Python圖像庫功能，支援各種圖像檔案格式。 https://github.com/python-pillow/Pillow Star ⭐ Pillow 儲存庫 --- 17.SQL**Alchemy** ------------- 本函式庫提供了一整套透過 Python 處理資料庫的工具，提供了強大的 ORM 層和 SQL 表達式語言。 https://github.com/sqlalchemy/sqlalchemy Star ⭐ SQLAlchemy 儲存庫 --- **18.PySpark** -------------- 從名稱中可以看出，該程式庫將 Apache Spark 的強大功能引入了 Python，透過 Pythonic 方法促進大資料處理和分析。 https://github.com/apache/spark Star ⭐ PySpark 儲存庫 --- 19.**dash** --------- 允許直接在 Python 中建立分析 Web 應用程式，無需深入了解 Web 開發。 https://github.com/plotly/dash Star ⭐ dash 儲存庫 --- 20.**Plotly** --------- 專注於建立適合網路和行動應用程式的互動式且具有視覺吸引力的圖形和圖表。 https://github.com/plotly/plotly.py Star ⭐ Plotly 儲存庫 --- 21. **Nltk** ------------ 該庫使自然語言處理變得易於存取且易於使用。 https://github.com/nltk/nltk Star ⭐ Nltk 儲存庫 --- 22.**SpaCy** ---------- 提供工業級自然語言處理能力以及針對多種語言的預訓練模型。 https://github.com/explosion/spaCy Star ⭐ SpaCy 儲存庫 --- **23.Gensim** ------------- 專注於無監督主題建模和自然語言處理，您可以使用該程式庫來分析文件相似性。 https://github.com/RaRe-Technologies/gensim Star ⭐ Gensim 儲存庫 --- 24.Py**Test** ----------- 一個強大的框架，用於編寫小型到複雜的功能測試，增強測試的可讀性和可維護性。 https://github.com/pytest-dev/pytest Star ⭐ PyTest 儲存庫 --- 25.**單元測試** ----------- 用於建置和執行測試的內建框架，反映了其他語言中的 xUnit 架構。 Unitest 是內建的。 --- 26.**Fabric** --------- 簡化應用程式部署或系統管理任務的 SSH，自動執行遠端 shell 命令。 https://github.com/fabric/fabric Star ⭐ Fabric 儲存庫 --- 27.**Vizzu** -------- Vizzu 旨在動畫資料視覺化和講故事，是建立動態和互動式圖表的首選庫。 https://github.com/vizzuhq/vizzu-lib Star ⭐ Vizzu 儲存庫 --- 28.**Polars** --------- 針對效能和效率進行最佳化的 DataFrame 庫，能夠輕鬆處理大型資料集。 https://github.com/pola-rs/polars Star ⭐ Polars 儲存庫 --- 29.Docker **-Py** ----------------- 提供對 Docker Remote API 的 Pythonic 存取，從而實現 Docker 容器管理的自動化。 https://github.com/docker/docker-py Star ⭐ Docker-Py 儲存庫 --- **30.OpenCV** ------------- 電腦視覺和影像處理的主要內容，提供一整套演算法和工具。 https://github.com/opencv/opencv Star ⭐ OpenCV 儲存庫 --- 31.Scikit**-image** --------------- 它致力於影像處理，將 SciPy 和 NumPy 的功能擴展到視覺領域。 https://github.com/scikit-image/scikit-image Star ⭐ Scikit-image 儲存庫 --- 32.**SymPy** --------- 該庫專為符號計算而設計，提供從代數求解到微積分的各種功能。 https://github.com/sympy/sympy Star ⭐ SymPy 儲存庫 --- 33.**Virtualenv** ----------- 對於建立隔離的 Python 環境和乾淨地管理專案依賴至關重要。 https://github.com/pypa/virtualenv Star ⭐ Virtualenv 儲存庫 --- 34.**Click** --------- 簡化命令列介面的建立，促進可組合且易於擴展的程式碼。 https://github.com/pallets/click 為 Click 儲存庫加註星標 --- 35. **argparse** ---------------- 促進命令列參數的解析，這對於 CLI 應用程式開發至關重要。 Argparse 是內建的。 --- 36.**日誌記錄** ----------- 提供靈活的日誌記錄系統，從簡單的日誌記錄到複雜的每個模組配置。 日誌記錄是內建的。 --- **37.PyYAML** ------------- 處理 YAML 文件，支援 Python 物件與 YAML 之間的序列化和反序列化。 https://github.com/yaml/pyyaml Star ⭐ PyYAML 儲存庫 --- 38.xlrd **/xlwt** ----------------- 非常適合讀取和寫入 Excel 文件，彌補了 Python 和 Excel 文件之間的差距。 https://github.com/python-excel/xlrd Star ⭐ xlrd 儲存庫 https://github.com/python-excel/xlwt Star ⭐ xlwt 儲存庫 --- 39. **Pandas 分析** ----------------- 從 pandas 產生全面的配置文件報告 https://github.com/pandas-profiling/pandas-profiling Star ⭐ Pandas-Profiling 儲存庫 --- 40.**全面品質管理** ------------- Tqdm 是任何循環的包裝器，它將透過進度條追蹤進度。 https://github.com/tqdm/tqdm Star ⭐ TQDM 儲存庫 --- 41.**Faker** --------- 需要看起來真實的假資料嗎？ Faker 為你提供支援。 https://github.com/joke2k/faker Star ⭐ Faker 儲存庫 --- 42.**Flake8** ---------- 一個必備的庫，可以使您的程式碼保持簡潔，並輕鬆實現樣式檢查。 https://github.com/PyCQA/flake8 Star ⭐ Flake8 儲存庫 --- 43.**Black** --------- 將您的程式碼格式提升到一個新的水平。 https://github.com/psf/black Star ⭐ Black 儲存庫 --- 44.**Mypy** ---------- 這就像有一位文法老師來教你的程式碼，但教你的類型。 https://github.com/python/mypy Star ⭐ Mypy 儲存庫 --- 45.**Pydantic** ----------- 驗證 Python 腳本所需的函式庫。 https://github.com/samuelcolvin/pydantic Star ⭐ Pydantic 儲存庫 --- **46.FastAPI** -------------- FastAPI 是一個用於建立 RESTful API 的 Web 框架。 https://github.com/tiangolo/fastapi Star ⭐ FastAPI 儲存庫 --- 47.**Catboost** ---------- 為您的機器學習模型提供處理分類資料的方法。 https://github.com/catboost/catboost Star ⭐ Catboost 儲存庫 --- 48.**Seaborn** ---------- 提高資料可視化水準。 https://github.com/mwaskom/seaborn Star ⭐ Seaborn 儲存庫 --- 49.**Turtle graphics ** --------- 透過酷炫的圖形和動畫將程式設計帶入生活。學習並開始使用 Python 的好方法。 Turtle graphics 是內建的。 --- 50.**Asciimatics** ------------ Asciimatics 是一個可讓您建立全螢幕文字 UI 的程式庫。 https://github.com/peterbrittain/asciimatics Star ⭐ Asciimatics 儲存庫 --- 原文出處：https://dev.to/taipy/python-libraries-you-need-to-know-in-2024-37ka

0個讚   0留言 138瀏覽

為所有正規表示式討厭者（和愛好者）準備的正規表示式備忘錄👀

我使用正規表示式的經驗 =========== 我一直遠離正規表示式。在我第一年的電腦科學實驗室中，有一個涉及正規表示式的練習。我想那是我第一次被介紹給它。我當時認為這很酷，但看起來太難了，所以我一直在避免它，或者只是在谷歌上搜尋如何解決某個正規表示式問題。但我*終於*花了一些時間來正確學習它🎉 ![](https://media.giphy.com/media/czoS1CAP2YZBS/giphy.gif) 在閱讀了一些資源並涉獵之後，可以肯定地說我不再害怕正規表示式了！我發現自己在我所做的許多編碼練習中都使用了它。所需要的只是練習！以下是我根據我學到的正規表示式和我使用的資源編寫的備忘單（帶有範例） 備忘錄 === 我已經包含了一些我學到的 Javascript 中不可用的正規表示式。對於這些，我都註解掉了。如果需要的話請記住「g」修飾符！對於我的範例，我省略了修飾符。 ``` let regex; /* matching a specific string */ regex = /hello/; // looks for the string between the forward slashes (case-sensitive)... matches "hello", "hello123", "123hello123", "123hello"; doesn't match for "hell0", "Hello" regex = /hello/i; // looks for the string between the forward slashes (case-insensitive)... matches "hello", "HelLo", "123HelLO" regex = /hello/g; // looks for multiple occurrences of string between the forward slashes... /* wildcards */ regex = /h.llo/; // the "." matches any one character other than a new line character... matches "hello", "hallo" but not "h\nllo" regex = /h.*llo/; // the "*" matches any character(s) zero or more times... matches "hello", "heeeeeello", "hllo", "hwarwareallo" /* shorthand character classes */ regex = /\d/; // matches any digit regex = /\D/; // matches any non-digit regex = /\w/; // matches any word character (a-z, A-Z, 0-9, _) regex = /\W/; // matches any non-word character regex = /\s/; // matches any white space character (\r (carriage return),\n (new line), \t (tab), \f (form feed)) regex = /\S/; // matches any non-white space character /* specific characters */ regex = /[aeiou]/; // matches any character in square brackets regex = /[ck]atherine/; // matches catherine or katherine regex = /[^aeiou]/; // matches anything except the characters in square brackets /* character ranges */ regex = /[a-z]/; // matches all lowercase letters regex = /[A-Z]/; // matches all uppercase letters regex = /[e-l]/; // matches lowercase letters e to l (inclusive) regex = /[F-P]/; // matches all uppercase letters F to P (inclusive) regex = /[0-9]/; // matches all digits regex = /[5-9]/; // matches any digit from 5 to 9 (inclusive) regex = /[a-zA-Z]/; // matches all lowercase and uppercase letters regex = /[^a-zA-Z]/; // matches non-letters /* matching repetitions using quantifiers */ regex = /(hello){4}/; // matches "hellohellohellohello" regex = /hello{3}/; // matches "hellooo" and "helloooo" but not "helloo" regex = /\d{3}/; // matches 3 digits ("312", "122", "111", "12312321" but not "12") regex = /\d{3,7}/; // matches digits that occur between 3 and 7 times (inclusive) regex = /\d{3,}/; // matches digits that occur at least 3 times /* matching repetitions using star and plus */ regex = /ab*c/; // matches zero or more repetitions of "b" (matches "abc", "abbbbc", "ac") regex = /ab+c/; // matches one or more repetitions of "b" (matches "abc", "abbbbc", but not "ac") /* matching beginning and end items */ regex = /^[A-Z]\w*/; // matches "H", "Hello", but not "hey" regex = /\w*s$/; // matches "cats", "dogs", "avocados", but not "javascript" /* matching word boundaries positions of word boundaries: 1. before the first character in string (if first character is a word character) 2. after the last character in the string, if the last character is a word character 3. between two characters in string, where one is a word character and the other isn't */ regex = /\bmeow\b/; // matches "hey meow lol", "hey:meow:lol", but not "heymeow lol" /* groups */ regex = /it is (ice )?cold outside/; // matches "it is ice cold outside" and "it is cold outside" regex = /it is (?:ice )?cold outside/; // same as above except it is a non-capturing group regex = /do (cats) like taco \1/; // matches "do cats like taco cats" regex = /do (cats) like (taco)\? do \2 \1 like you\?/; // matches "do cats like taco? do taco cats like you?" //branch reset group (available in Perl, PHP, R, Delphi... commented out because this is a js file) // regex = /(?|(cat)|(dog))\1/; // matches "catcat" and "dogdog" /* alternative matching */ regex = /i like (tacos|boba|guacamole)\./; // matches "i like tacos.", "i like boba.", and "i like guacamole." /* forward reference (available in Perl, PHP, Java, Ruby, etc... commented out because this is a js file) */ // regex = /(\2train|(choo))+/; // matches "choo", "choochoo", "chootrain", choochootrain", but not "train" /* lookaheads */ regex = /z(?=a)/; // positive lookahead... matches the "z" before the "a" in pizza" but not the first "z" regex = /z(?!a)/; // negative lookahead... matches the first "z" but not the "z" before the "a" /* lookbehinds */ regex = /(?<=[aeiou])\w/; // positive lookbehind... matches any word character that is preceded by a vowel regex = /(?<![aeiou])\w/; // negative lookbehind... matches any word character that is not preceded by a vowel /* functions I find useful */ regex.test("hello"); // returns true if found a match, false otherwise regex.exec("hello"); // returns result array, null otherwise "football".replace(/foot/,"basket"); // replaces matches with second argument ``` 感謝 Sarthak 建立了我的備忘錄的[GitHub 要點](https://gist.github.com/sarthology/b269c4ab81832c03f80eb48920f1abce)，也感謝 Xian-an 將其翻譯成[中文](https://gist.github.com/cxa/901e1862cd9ddf5c721cea6f7807d77a)👏 資源 == - 「正規表示式」挑戰是[FreeCodeCamp](https://freecodecamp.org)上「Javascript 演算法和資料結構認證」的一部分 - [MDN 正規表示式文件](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) - [正規表示式](https://regexone.com/) - [Regex101](https://regex101.com/)用於測試（您也可以使用 Chrome 開發者控制台） - [HackerRank](https://hackerrank.com/)正規表示式挑戰練習 ![](https://media.giphy.com/media/111ebonMs90YLu/giphy.gif) 就是這樣，夥計們！希望這對您有幫助☺️ --- 原文出處：https://dev.to/catherinecodes/a-regex-cheatsheet-for-all-those-regex-haters-and-lovers--2cj1

0個讚   0留言 107瀏覽

我正在建立一個全端應用程式：以下是我將要使用的庫......

您可以使用無數的框架和函式庫來改進您的全端應用程式。 我們將介紹令人興奮的概念，例如應用程式內通知、使用 React 製作影片、從為開發人員提供的電子郵件 API 到在瀏覽器中建立互動式音樂。 那我們就開始吧。 （不要忘記為這些庫加註星標以表示您的支持）。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqoipyuoxgb83swyoo4a.gif) https://github.com/CopilotKit/CopilotKit --- 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------ ![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzuxjfog2ldam3csrl62.png) 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` 這是整合 CopilotTextArea 的方法。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { useState } from "react"; export function SomeReactComponent() { const [text, setText] = useState(""); return ( <> <CopilotTextarea className="px-4 py-4" value={text} onValueChange={(value: string) => setText(value)} placeholder="What are your plans for your vacation?" autosuggestionsConfig={{ textareaPurpose: "Travel notes from the user's previous vacations. Likely written in a colloquial style, but adjust as needed.", chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 20, stop: [".", "?", "!"], }, }, }, }} /> </> ); } ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)。 基本概念是在幾分鐘內建立可用於基於 LLM 的全端應用程式的 AI 聊天機器人。 https://github.com/CopilotKit/CopilotKit --- 2. [Storybook](https://github.com/storybookjs/storybook) - UI 開發、測試和文件變得簡單。 --------------------------------------------------------------------------- ![故事書](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78rfum1ydisn51qhb408.png) Storybook 是一個用於獨立建立 UI 元件和頁面的前端工作坊。它有助於 UI 開發、測試和文件編制。 他們在 GitHub 上有超過 57,000 次提交、81,000 多個 star 和 1300 多個版本。 這是您為專案建立簡單元件的方法。 ``` import type { Meta, StoryObj } from '@storybook/react'; import { YourComponent } from './YourComponent'; //👇 This default export determines where your story goes in the story list const meta: Meta<typeof YourComponent> = { component: YourComponent, }; export default meta; type Story = StoryObj<typeof YourComponent>; export const FirstStory: Story = { args: { //👇 The args you need here will depend on your component }, }; ``` 您可以閱讀[文件](https://storybook.js.org/docs/get-started/setup)。 如今，UI 除錯起來很痛苦，因為它們與業務邏輯、互動狀態和應用程式上下文糾纏在一起。 Storybook 提供了一個獨立的 iframe 來渲染元件，而不會受到應用程式業務邏輯和上下文的干擾。這可以幫助您將開發重點放在元件的每個變體上，甚至是難以觸及的邊緣情況。 https://github.com/storybookjs/storybook --- 3. [Appwrite](https://github.com/appwrite/appwrite) - 您的後端減少麻煩。 --------------------------------------------------------------- ![應用程式寫入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8x568uz21seyygw6b72z.png) ![帶有 appwrite 的 sdk 列表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp7k8qnamsluto7eifpl.png) Appwrite 的開源平台可讓您將身份驗證、資料庫、函數和儲存體新增至您的產品中，並建立任何規模的任何應用程式、擁有您的資料並使用您喜歡的編碼語言和工具。 他們有很好的貢獻指南，甚至不厭其煩地詳細解釋架構。 開始使用以下 npm 指令。 ``` npm install appwrite ``` 您可以像這樣建立一個登入元件。 ``` "use client"; import { useState } from "react"; import { account, ID } from "./appwrite"; const LoginPage = () => { const [loggedInUser, setLoggedInUser] = useState(null); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [name, setName] = useState(""); const login = async (email, password) => { const session = await account.createEmailSession(email, password); setLoggedInUser(await account.get()); }; const register = async () => { await account.create(ID.unique(), email, password, name); login(email, password); }; const logout = async () => { await account.deleteSession("current"); setLoggedInUser(null); }; if (loggedInUser) { return ( <div> <p>Logged in as {loggedInUser.name}</p> <button type="button" onClick={logout}> Logout </button> </div> ); } return ( <div> <p>Not logged in</p> <form> <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} /> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="button" onClick={() => login(email, password)}> Login </button> <button type="button" onClick={register}> Register </button> </form> </div> ); }; export default LoginPage; ``` 您可以閱讀[文件](https://appwrite.io/docs)。 Appwrite 可以非常輕鬆地建立具有開箱即用的擴充功能的可擴展後端應用程式。 https://github.com/appwrite/appwrite --- 4. [Wasp](https://github.com/wasp-lang/wasp) - 用於 React、node.js 和 prisma 的類似 Rails 的框架。 --------------------------------------------------------------------------------------- ![黃蜂](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi2mwazueoc3ezjx8a9q.png) 使用 React 和 Node.js 開發全端 Web 應用程式的最快方法。這不是一個想法，而是一種建立瘋狂快速全端應用程式的不同方法。 這是將其整合到元件中的方法。 ``` import getRecipes from "@wasp/queries/getRecipes"; import { useQuery } from "@wasp/queries"; import type { User } from "@wasp/entities"; export function HomePage({ user }: { user: User }) { // Due to full-stack type safety, `recipes` will be of type `Recipe[]` here. const { data: recipes, isLoading } = useQuery(getRecipes); // Calling our query here! if (isLoading) { return <div>Loading...</div>; } return ( <div> <h1>Recipes</h1> <ul> {recipes ? recipes.map((recipe) => ( <li key={recipe.id}> <div>{recipe.title}</div> <div>{recipe.description}</div> </li> )) : 'No recipes defined yet!'} </ul> </div> ); } ``` 您可以閱讀[文件](https://wasp-lang.dev/docs)。 https://github.com/wasp-lang/wasp --- 5. [Novu](https://github.com/novuhq/novu) - 將應用程式內通知新增至您的應用程式！ -------------------------------------------------------------- ![再次](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/716b7biilet4auudjlcu.png) Novu 提供開源通知基礎架構和功能齊全的嵌入式通知中心。 這就是如何使用`React`建立 novu 元件以用於應用程式內通知。 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, } from "@novu/notification-center"; function App() { return ( <> <NovuProvider subscriberId={process.env.REACT_APP_SUB_ID} applicationIdentifier={process.env.REACT_APP_APP_ID} > <PopoverNotificationCenter> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> </> ); } export default App; ``` 您可以閱讀[文件](https://docs.novu.co/getting-started/introduction)。 https://github.com/novuhq/novu --- 6. [Remotion](https://github.com/remotion-dev/remotion) - 使用 React 以程式設計方式製作影片。 ------------------------------------------------------------------------------- ![遠端](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmnrxhsc7b9mm5oagflm.png) 使用 React 建立真正的 MP4 影片，使用伺服器端渲染和參數化擴展影片製作。 開始使用以下 npm 指令。 ``` npm init video ``` 它為您提供了一個幀號和一個空白畫布，您可以在其中使用 React 渲染任何您想要的內容。 這是一個範例 React 元件，它將當前幀渲染為文字。 ``` import { AbsoluteFill, useCurrentFrame } from "remotion";   export const MyComposition = () => { const frame = useCurrentFrame();   return ( <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 100, backgroundColor: "white", }} > The current frame is {frame}. </AbsoluteFill> ); }; ``` 您可以閱讀[文件](https://www.remotion.dev/docs/)。 過去兩年，remotion 團隊因製作 GitHub Wrapped 而聞名。 https://github.com/remotion-dev/remotion --- [7.NocoDB](https://github.com/nocodb/nocodb) - Airtable 的替代品。 ------------------------------------------------------------- ![諾科資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw3tchfgyzehye5c39xq.png) Airtable 的免費開源替代品是 NocoDB。它可以使用任何 MySQL、PostgreSQL、SQL Server、SQLite 或 MariaDB 資料庫製作智慧型電子表格。 其主要目標是讓強大的計算工具得到更廣泛的使用。 開始使用以下 npx 指令。 ``` npx create-nocodb-app ``` 您可以閱讀[文件](https://docs.nocodb.com/)。 NocoDB 的建立是為了為世界各地的數位企業提供強大的開源和無程式碼資料庫介面。 您可以非常快速地將airtable資料匯入NocoDB。 https://github.com/nocodb/nocodb --- 8.[新穎](https://github.com/steven-tey/novel)- 所見即所得編輯器，具有人工智慧自動完成功能。 ------------------------------------------------------------------- ![小說](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uo34vd9twpxcpbpzgchi.png) 它使用`Next.js` 、 `Vercel AI SDK` 、 `Tiptap`作為文字編輯器。 開始使用以下 npm 指令。 ``` npm i novel ``` 您可以這樣使用它。有多種選項可用於改進您的應用程式。 ``` import { Editor } from "novel"; export default function App() { return <Editor />; } ``` https://github.com/steven-tey/novel --- 9. [Blitz](https://github.com/blitz-js/blitz) - 缺少 NextJS 的全端工具包。 ----------------------------------------------------------------- ![閃電戰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz6ineg1o7xyv7pwbuqn.png) Blitz 繼承了 Next.js 的不足，為全球應用程式的交付和擴展提供了經過實戰考驗的函式庫和約定。 開始使用以下 npm 指令。 ``` npm install -g blitz ``` 這就是您如何使用 Blitz 建立新頁面。 ``` const NewProjectPage: BlitzPage = () => { const router = useRouter() const [createProjectMutation] = useMutation(createProject) return ( <div> <h1>Create New Project</h1> <ProjectForm submitText="Create Project" schema={CreateProject} onSubmit={async (values) => { // This is equivalent to calling the server function directly const project = await createProjectMutation(values) // Notice the 'Routes' object Blitz provides for routing router.push(Routes.ProjectsPage({ projectId: project.id })) }} /> </div> ); }; NewProjectPage.authenticate = true NewProjectPage.getLayout = (page) => <Layout>{page}</Layout> export default NewProjectPage ``` 您可以閱讀[文件](https://blitzjs.com/docs/get-started)。 它使建築物改善了數倍。 ![閃電戰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc4mb5wdksjv1ybx71co.png) https://github.com/blitz-js/blitz --- 10. [Supabase](https://github.com/supabase/supabase) - 開源 Firebase 替代品。 ----------------------------------------------------------------------- ![蘇帕貝斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksfygjhrzhmsg9cnvobs.png) 我們大多數人都已經預料到 SUPABASE 會出現在這裡，因為它實在是太棒了。 開始使用以下 npm 指令 (Next.js)。 ``` npx create-next-app -e with-supabase ``` 這是使用 supabase 建立用戶的方法。 ``` import { createClient } from '@supabase/supabase-js' // Initialize const supabaseUrl = 'https://chat-room.supabase.co' const supabaseKey = 'public-anon-key' const supabase = createClient(supabaseUrl, supabaseKey) // Create a new user const { user, error } = await supabase.auth.signUp({ email: '[email protected]', password: 'example-password', }) ``` 您可以閱讀[文件](https://supabase.com/docs)。 您可以使用身份驗證、即時、邊緣功能、儲存等功能建立一個速度極快的應用程式。 Supabase 涵蓋了這一切！ 他們還提供了一些入門套件，例如 AI 聊天機器人和 Stripe 訂閱。 https://github.com/supabase/supabase --- [11.Refine](https://github.com/refinedev/refine) - 企業開源重組工具。 ------------------------------------------------------------ ![精煉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx0kd6t2jzdtf90k5ke3.png) 建立具有無與倫比的靈活性的管理面板、儀表板和 B2B 應用程式 您可以在一分鐘內使用單一 CLI 命令進行設定。 它具有適用於 15 多個後端服務的連接器，包括 Hasura、Appwrite 等。 開始使用以下 npm 指令。 ``` npm create refine-app@latest ``` 這就是使用 Refine 新增登入資訊的簡單方法。 ``` import { useLogin } from "@refinedev/core"; const { login } = useLogin(); ``` 您可以閱讀[文件](https://refine.dev/docs/)。 https://github.com/refinedev/refine --- 12. [Zenstack](https://github.com/zenstackhq/zenstack) - 資料庫到 API 和 UI 只需幾分鐘。 ----------------------------------------------------------------------------- ![禪斯塔克](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b6n2ea3jeeva6uujoex.png) TypeScript 工具包，透過強大的存取控制層增強 Prisma ORM，並釋放其全端開發的全部功能。 開始使用以下 npx 指令。 ``` npx zenstack@latest init ``` 這是透過伺服器適配器建立 RESTful API 的方法。 ``` // pages/api/model/[...path].ts import { requestHandler } from '@zenstackhq/next'; import { enhance } from '@zenstackhq/runtime'; import { getSessionUser } from '@lib/auth'; import { prisma } from '@lib/db'; // Mount Prisma-style APIs: "/api/model/post/findMany", "/api/model/post/create", etc. // Can be configured to provide standard RESTful APIs (using JSON:API) instead. export default requestHandler({ getPrisma: (req, res) => enhance(prisma, { user: getSessionUser(req, res) }), }); ``` 您可以閱讀[文件](https://zenstack.dev/docs/welcome)。 https://github.com/zenstackhq/zenstack --- 13. [Buildship](https://github.com/rowyio/buildship) - 低程式碼視覺化後端建構器。 -------------------------------------------------------------------- ![建造船](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzlrynz5xephv4t9layd.png) 對於您正在使用無程式碼應用程式建構器（FlutterFlow、Webflow、Framer、Adalo、Bubble、BravoStudio...）或前端框架（Next.js、React、Vue...）建立的應用程式，您需要一個後端來支援可擴展的 API、安全工作流程、自動化等。BuildShip 為您提供了一種完全視覺化的方式，可以在易於使用的完全託管體驗中可擴展地建立這些後端任務。 這意味著您不需要在雲端平台上爭論或部署東西、執行 DevOps 等。只需立即建置和交付 🚀 https://github.com/rowyio/buildship --- 14. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ----------------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohv3johuz92lsaux52oq.png) Taipy 是一個開源 Python 庫，用於輕鬆的端到端應用程式開發， 具有假設分析、智慧管道執行、內建調度和部署工具。 開始使用以下命令。 ``` pip install taipy ``` 這是一個典型的Python函數，也是過濾器場景中使用的唯一任務。 ``` def filter_genre(initial_dataset: pd.DataFrame, selected_genre): filtered_dataset = initial_dataset[initial_dataset['genres'].str.contains(selected_genre)] filtered_data = filtered_dataset.nlargest(7, 'Popularity %') return filtered_data ``` 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 他們還有很多可供您建立的[演示應用程式教學](https://docs.taipy.io/en/latest/knowledge_base/demos/)。 https://github.com/Avaiga/taipy --- 15. [LocalForage](https://github.com/localForage/localForage) - 改進了離線儲存。 ------------------------------------------------------------------------ ![當地飼料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hlrka5pybvmgmo2djel.png) LocalForage 是一個 JavaScript 函式庫，它透過使用非同步資料儲存和簡單的、類似 localStorage 的 API 來改善 Web 應用程式的離線體驗。它允許開發人員儲存多種類型的資料而不僅僅是字串。 開始使用以下 npm 指令。 ``` npm install localforage ``` 只需包含 JS 檔案並開始使用 localForage。 ``` <script src="localforage.js"></script> ``` 您可以閱讀[文件](https://localforage.github.io/localForage/#installation)。 https://github.com/localForage/localForage --- 16. [Zod](https://github.com/colinhacks/zod) - 使用靜態類型推斷的 TypeScript-first 模式驗證。 ------------------------------------------------------------------------------- ![佐德](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s6zvmqr0lv93vsrhofs.png) Zod 的目標是透過最大限度地減少重複的類型聲明來對開發人員友好。使用 Zod，您聲明一次驗證器，Zod 將自動推斷靜態 TypeScript 類型。將更簡單的類型組合成複雜的資料結構很容易。 開始使用以下 npm 指令。 ``` npm install zod ``` 這是您在建立字串架構時自訂一些常見錯誤訊息的方法。 ``` const name = z.string({ required_error: "Name is required", invalid_type_error: "Name must be a string", }); ``` 您可以閱讀[文件](https://zod.dev/)。 它適用於 Node.js 和所有現代瀏覽器 https://github.com/colinhacks/zod --- 17.[多普勒](https://github.com/DopplerHQ)- 管理你的秘密。 ----------------------------------------------- ![多普勒](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gycxnuiiwsvibryrytlc.png) 您可以透過在具有開發、暫存和生產環境的專案中組織機密來消除機密蔓延。 開始使用以下指令 (MacOS)。 ``` $ brew install dopplerhq/cli/doppler $ doppler --version ``` 這是安裝 Doppler CLI[的 GitHub Actions 工作流程](https://github.com/DopplerHQ/cli-action)。 您可以閱讀[文件](https://docs.doppler.com/docs/start)。 ``` name: Example action on: [push] jobs: my-job: runs-on: ubuntu-latest steps: - name: Install CLI uses: dopplerhq/cli-action@v3 - name: Do something with the CLI run: doppler secrets --only-names env: DOPPLER_TOKEN: ${{ secrets.DOPPLER_TOKEN }} ``` https://github.com/DopplerHQ --- 18. [FastAPI](https://github.com/tiangolo/fastapi) - 高效能、易於學習、快速編碼、可用於生產。 ------------------------------------------------------------------------- ![快速API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2awncoia6255ycl95lk.png) FastAPI 是一個現代、快速（高效能）的 Web 框架，用於基於標準 Python 類型提示使用 Python 3.8+ 建立 API。 開始使用以下命令。 ``` $ pip install fastapi ``` 這是您開始使用 FastAPI 的方式。 ``` from typing import Union from fastapi import FastAPI app = FastAPI() @app.get("/") def read_root(): return {"Hello": "World"} @app.get("/items/{item_id}") def read_item(item_id: int, q: Union[str, None] = None): return {"item_id": item_id, "q": q} ``` 您的編輯器將自動完成屬性並了解它們的類型，這是使用 FastAPI 的最佳功能之一。 您可以閱讀[文件](https://fastapi.tiangolo.com/)。 https://github.com/tiangolo/fastapi --- 19. [Flowise](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 ---------------------------------------------------------------------------- ![流動](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct732wv07pvwx0nmavp5.png) Flowise 是一款開源 UI 視覺化工具，用於建立客製化的 LLM 編排流程和 AI 代理程式。 開始使用以下 npm 指令。 ``` npm install -g flowise npx flowise start OR npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234 ``` 這就是整合 API 的方式。 ``` import requests url = "/api/v1/prediction/:id" def query(payload): response = requests.post( url, json = payload ) return response.json() output = query({ question: "hello!" )} ``` 您可以閱讀[文件](https://docs.flowiseai.com/)。 https://github.com/FlowiseAI/Flowise --- 20. [Scrapy](https://github.com/scrapy/scrapy) - Python 的快速進階網頁爬行和抓取框架.. ------------------------------------------------------------------------ ![鬥志旺盛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1b2y1hzdsphw43b6v7b.png) Scrapy 是一個快速的高級網路爬行和網頁抓取框架，用於爬行網站並從頁面中提取結構化資料。它可用於多種用途，從資料探勘到監控和自動化測試。 開始使用以下命令。 ``` pip install scrapy ``` 建造並執行您的網路蜘蛛。 ``` pip install scrapy cat > myspider.py <<EOF import scrapy class BlogSpider(scrapy.Spider): name = 'blogspider' start_urls = ['https://www.zyte.com/blog/'] def parse(self, response): for title in response.css('.oxy-post-title'): yield {'title': title.css('::text').get()} for next_page in response.css('a.next'): yield response.follow(next_page, self.parse) EOF scrapy runspider myspider.py ``` 您可以閱讀[文件](https://scrapy.org/doc/)。 它擁有大約 50k+ 的星星，因此對於網頁抓取來說具有巨大的可信度。 https://github.com/scrapy/scrapy --- 21. [Tone](https://github.com/Tonejs/Tone.js) - 在瀏覽器中製作互動式音樂。 ------------------------------------------------------------- ![音調.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fokxsoblaohgs4tx75g3.png) 開始使用以下 npm 指令。 ``` npm install tone ``` 這是您開始使用 Tone.js 的方法 ``` // To import Tone.js: import * as Tone from 'tone' //create a synth and connect it to the main output (your speakers) const synth = new Tone.Synth().toDestination(); //play a middle 'C' for the duration of an 8th note synth.triggerAttackRelease("C4", "8n"); ``` 您可以閱讀[文件](https://github.com/Tonejs/Tone.js?tab=readme-ov-file#installation)。 https://github.com/Tonejs/Tone.js --- 22. [Spacetime](https://github.com/spencermountain/spacetime) - 輕量級 javascript 時區庫。 ----------------------------------------------------------------------------------- ![時空](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abfyfuzt4nw4h7b8usab.png) 您可以計算遠端時區的時間；支持夏令時、閏年和半球。按季度、季節、月份、週來定位時間.. 開始使用以下 npm 指令。 ``` npm install spacetime ``` 您可以這樣使用它。 ``` <script src="https://unpkg.com/spacetime"></script> <script> var d = spacetime('March 1 2012', 'America/New_York') //set the time d = d.time('4:20pm') d = d.goto('America/Los_Angeles') d.time() //'1:20pm' </script> ``` https://github.com/spencermountain/spacetime --- 23. [Mermaid](https://github.com/mermaid-js/mermaid) - 從類似 markdown 的文字產生圖表。 ---------------------------------------------------------------------------- ![美人魚](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggubn86xv7fznxol6fw7.png) 您可以使用 Markdown with Mermaid 等文字產生流程圖或序列圖等圖表。 這就是建立圖表的方法。 ``` sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ``` 它將做出如下圖。 ![圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbuo2ey5q2x3sjwywizg.png) 您可以閱讀[VS Code](https://docs.mermaidchart.com/plugins/visual-studio-code)的[文件](https://mermaid.js.org/intro/getting-started.html)和外掛程式。 請參閱[即時編輯器](https://mermaid.live/edit#pako:eNpVkE1PwzAMhv9KlvM-2AZj62EIxJd24ADXXLzEbaKlcUkdUDX1v5MONomcnNevXz32UWoyKAvZ4mfCoPHRQRWhVuHeO42T7XZHNhTiFb0nMdRjYelbQETRUbpTwRM1uQ2erbaoDyqI_AbnZfjZVZYFVOBCy8J2DWlLwUQHKmAwKrwRo4gnF5Xid-gd2FEAL9hSyp12pMIpNcee2ArxEhH4LG-3D7TPoAPcnhL_4WVxcgHZkfedqIjMSI5ljbEGZ_LyxwFaSbZYo5JFLg3Eg5Iq9NkHiemjC1oWHBOOZWoM8PlQ_8Un45iiLErwbRY9gcH8PUrumuHKlWs5J2oKpasGPUWfZcvctMVsNrSnlWOb9lNN9ax1xkJk-7VZzVaL1RoWS1zdLuFmuTR6P9-sy8X1vDS3V_MFyL7vfwD_bJ1W)中的範例。 https://github.com/mermaid-js/mermaid --- 24.[公共 API](https://github.com/public-apis/public-apis) - 20 多個類別的 1400 多個 API。 ------------------------------------------------------------------------------- ![公共API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjapk9rwlzdl6bcyqdnl.png) 我們主要使用外部 API 來建立應用程式，在這裡您可以找到所有 API 的清單。網站連結在最後。 它在 GitHub 上擁有大約 279k+ 顆星。 ![公共API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rld5i88smezo1naawz7a.png) 從儲存庫取得網站連結非常困難。所以，我把它貼在這裡。 網址 - [Collective-api.vercel.app/](https://collective-api.vercel.app/) https://github.com/public-apis/public-apis --- 25. [Framer Motion](https://github.com/framer/motion) - 像魔法一樣的動畫。 ----------------------------------------------------------------- ![成幀器運動](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn4ecqkrhs8f4729bzps.png) 可用的最強大的動畫庫之一。 Framer 使用簡單的聲明性語法意味著您編寫的程式碼更少。更少的程式碼意味著您的程式碼庫更易於閱讀和維護。 您可以建立事件和手勢，並且使用 Framer 的社區很大，這意味著良好的支援。 開始使用以下 npm 指令。 ``` npm install framer-motion ``` 您可以這樣使用它。 ``` import { motion } from "framer-motion" <motion.div whileHover={{ scale: 1.2 }} whileTap={{ scale: 1.1 }} drag="x" dragConstraints={{ left: -100, right: 100 }} /> ``` 您可以閱讀[文件](https://www.framer.com/motion/introduction/)。 https://github.com/framer/motion --- 26.[順便說一句](https://github.com/btw-so/btw)- 在幾分鐘內建立您的個人部落格。 ---------------------------------------------------------- ![順便提一句](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnne3lrfpolotmxkdz2m.png) 順便說一句，您可以註冊並使用，而無需安裝任何東西。您也可以使用開源版本自行託管。 ![順便提一句](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rli7hpoccqwpvba29b4.png) 使用順便說一句建立的[範例部落格](https://www.siddg.com/about)。 https://github.com/btw-so/btw --- 27. [Formbricks](https://github.com/formbricks/formbricks) - 開源調查平台。 -------------------------------------------------------------------- ![成型磚](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp6ggyom33vdifd3m1vt.png) Formbricks 提供免費、開源的測量平台。透過精美的應用程式內、網站、連結和電子郵件調查收集用戶旅程中每個點的回饋。在 Formbricks 之上建置或利用預先建置的資料分析功能。 開始使用以下 npm 指令。 ``` npm install @formbricks/js ``` 這就是您開始使用 formbricks 的方法。 ``` import formbricks from "@formbricks/js"; if (typeof window !== "undefined") { formbricks.init({ environmentId: "claV2as2kKAqF28fJ8", apiHost: "https://app.formbricks.com", }); } ``` 您可以閱讀[文件](https://formbricks.com/docs/getting-started/quickstart-in-app-survey)。 https://github.com/formbricks/formbricks --- 28. [Stripe](https://github.com/stripe) - 支付基礎設施。 ------------------------------------------------- ![條紋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79yvcgsi4744cmryh15j.png) 數以百萬計的各種規模的公司在線上和親自使用 Stripe 來接受付款、發送付款、自動化財務流程並最終增加收入。 開始使用以下 npm 指令 (React.js)。 ``` npm install @stripe/react-stripe-js @stripe/stripe-js ``` 這就是使用鉤子的方法。 ``` import React, {useState} from 'react'; import ReactDOM from 'react-dom'; import {loadStripe} from '@stripe/stripe-js'; import { PaymentElement, Elements, useStripe, useElements, } from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { event.preventDefault(); if (elements == null) { return; } // Trigger form validation and wallet collection const {error: submitError} = await elements.submit(); if (submitError) { // Show error to your customer setErrorMessage(submitError.message); return; } // Create the PaymentIntent and obtain clientSecret from your server endpoint const res = await fetch('/create-intent', { method: 'POST', }); const {client_secret: clientSecret} = await res.json(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return ( <form onSubmit={handleSubmit}> <PaymentElement /> <button type="submit" disabled={!stripe || !elements}> Pay </button> {/* Show error message to your customers */} {errorMessage && <div>{errorMessage}</div>} </form> ); }; const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); const options = { mode: 'payment', amount: 1099, currency: 'usd', // Fully customizable with appearance API. appearance: { /*...*/ }, }; const App = () => ( <Elements stripe={stripePromise} options={options}> <CheckoutForm /> </Elements> ); ReactDOM.render(<App />, document.body); ``` 您可以閱讀[文件](https://github.com/stripe/react-stripe-js?tab=readme-ov-file#minimal-example)。 您幾乎可以整合任何東西。它有一個巨大的選項清單。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67f3pb2i8xolt635rp2p.png) https://github.com/stripe --- 29. [Upscayl](https://github.com/upscayl/upscayl) - 開源 AI 影像升級器。 ---------------------------------------------------------------- ![高級](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c1837rev5jb260ro2sd.png) 適用於 Linux、MacOS 和 Windows 的免費開源 AI Image Upscaler 採用 Linux 優先概念建構。 它可能與全端無關，但它對於升級圖像很有用。 ![高級](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4qq1wm3wey3vihn9al4.png) 透過最先進的人工智慧，Upscayl 可以幫助您將低解析度影像變成高解析度。清脆又鋒利！ https://github.com/upscayl/upscayl --- 30.[重新發送](https://github.com/resend)- 為開發人員提供的電子郵件 API。 ------------------------------------------------------- ![重發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3auhh3hbxjmmzehe5v0.png) 您可以使用 React 建立和傳送電子郵件。 2023 年最受炒作的產品之一。 開始使用以下 npm 指令。 ``` npm install @react-email/components -E ``` 這是將其與 next.js 專案整合的方法。 ``` import { EmailTemplate } from '@/components/email-template'; import { Resend } from 'resend'; const resend = new Resend(process.env.RESEND_API_KEY); export async function POST() { const { data, error } = await resend.emails.send({ from: '[email protected]', to: '[email protected]', subject: 'Hello world', react: EmailTemplate({ firstName: 'John' }), }); if (error) { return Response.json({ error }); } return Response.json(data); } ``` 您可以閱讀[文件](https://resend.com/docs/introduction)。 ![重發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rer9ym187e4i9l11afkg.png) 基本概念是一個簡單、優雅的介面，讓您可以在幾分鐘內開始發送電子郵件。它可以透過適用於您最喜歡的程式語言的 SDK 直接融入您的程式碼中。 https://github.com/resend --- 哇！如此長的專案清單。 我知道您有更多想法，分享它們，讓我們一起建造：D 如今建立全端應用程式並不難，但每個應用程式都可以透過有效地使用優秀的開源專案來解決任何問題來增加這一獨特因素。 例如，您可以建立一些提供通知或建立 UI 流來抓取資料的東西。 我希望其中一些內容對您的開發之旅有用。他們擁有一流的開發人員經驗；你可以依賴他們。 由於您將要建造東西，因此您可以在這裡找到一些[瘋狂的想法](https://github.com/florinpop17/app-ideas)。 祝你有美好的一天！直到下一次。 --- 原文出處：https://dev.to/copilotkit/im-building-a-full-stack-app-here-are-the-libraries-im-going-to-use-51nk

0個讚   0留言 178瀏覽

軟體工程師面試學習指南

[本·羅戈揚](https://www.linkedin.com/in/benjaminrogojan/) 軟體工程面試與其他技術面試一樣，需要充分的準備。有許多主題需要涵蓋，以確保您準備好應對有關演算法、資料結構、設計、最佳化以及不斷增長的主題的連續問題。 因此，我在最後一輪面試中建立了一個清單，涵蓋了許多熱門話題。 為了幫助您追蹤進度，我們針對下面列出的相同問題編制了一份全面的清單； [該列表可以在這裡找到](https://docs.google.com/spreadsheets/d/19hSRrL4l3gRiJ5ucH9q4iwFo2QHgic9gGMNUrcn1mm0/edit?usp=sharing)。 ### **聆聽經典熱身** 1. [fizzbuzz](https://www.hackerrank.com/challenges/fizzbuzz/problem) 2. [子陣列和等於 K](https://leetcode.com/problems/subarray-sum-equals-k/) 3. [陣列：左旋轉](https://www.hackerrank.com/challenges/ctci-array-left-rotation/problem?h_l=interview&playlist_slugs%5B%5D=interview-preparation-kit&playlist_slugs%5B%5D=arrays) 4. [字串：製作字謎詞](https://www.hackerrank.com/challenges/ctci-making-anagrams/problem?h_l=interview&playlist_slugs%5B%5D=interview-preparation-kit&playlist_slugs%5B%5D=strings) 5. [第 N 次斐波那契數](https://www.algoexpert.io/questions/Nth%20Fibonacci) 你怎麼做的？花點時間對這些經典作品進行評價。我們在面試過程中的某個時刻被問到了其中大部分問題，而且通常是在早期就被問到的淘汰式問題。它們通常與演算法和資料結構關係不大，但仍然需要對循環和陣列有很好的理解（是的，陣列是一種資料結構）。 ### **演算法和資料結構** #### **預習問題** 在觀看有關資料結構和演算法的影片內容之前，請考慮嘗試以下這些問題。看看你能否回答他們。這將幫助您知道要關注什麼。 1. [985. 查詢後偶數之和](https://leetcode.com/problems/sum-of-even-numbers-after-queries/) 2. [657. 機器人回歸原點](https://leetcode.com/problems/robot-return-to-origin/) 3. [961. 2N 陣列中的 N 重複元素](https://leetcode.com/problems/n-repeated-element-in-size-2n-array/) 4. [110.平衡二元樹](https://leetcode.com/problems/balanced-binary-tree/) 5. [3. 最長無重複字元的子字串](https://leetcode.com/problems/longest-substring-without-repeating-characters/) 6. [19. 從清單結尾刪除第 N 個節點](https://leetcode.com/problems/remove-nth-node-from-end-of-list/) 7. [23. 合併 k 個排序列表](https://leetcode.com/problems/merge-k-sorted-lists/) 8. [31. 下一個排列](https://leetcode.com/problems/next-permutation/) ### 演算法和資料結構影片 #### 資料結構 ![](https://cdn-images-1.medium.com/max/1600/1*Dyu63sMUVL-gYEZISOE2BQ.jpeg) 1. [資料結構與演算法 #1 --- 什麼是資料結構？](https://www.youtube.com/watch?v=bum_19loj9A) --- 影片 2. [多調光](https://archive.org/details/0102WhatYouShouldKnow/02_05-multidimensionalArrays.mp4)--- 影片 3. [動態陣列](https://www.coursera.org/learn/data-structures/lecture/EwbnV/dynamic-arrays)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 4. [調整陣列大小](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 5. [資料結構：鍊錶](https://youtu.be/njTh_OwMljA)--- 影片 6. [核心鍊錶與陣列](https://www.coursera.org/learn/data-structures-optimizing-performance/lecture/rjBs9/core-linked-lists-vs-arrays)--- 影片 7. [指針到指針](https://www.eskimo.com/~scs/cclass/int/sx8.html)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 8. [資料結構：樹](https://youtu.be/oSWTXtMglKE)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 9. [資料結構：堆](https://youtu.be/t0Cq6tVNRBA)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 10. [資料結構：哈希表](https://youtu.be/shs0KM3wKv8)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 11. [電話簿問題](https://www.coursera.org/learn/data-structures/lecture/NYZZP/phone-book-problem)---影片 12. [資料結構：堆疊和佇列](https://youtu.be/wjI1WNcIntg)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 13. [使用堆疊後進先出](https://archive.org/details/0102WhatYouShouldKnow/05_01-usingStacksForLast-inFirst-out.mp4)--- 影片 14. [資料結構：計算機科學速成課程#14](https://youtu.be/DuDz6B4cqVc)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 15. [資料結構：嘗試](https://www.youtube.com/watch?v=zIjfhVPRZCg)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 #### 演算法 ![](https://cdn-images-1.medium.com/max/1600/1*bPpvELo9_QqQsDz7CSbwXQ.gif) 1. [演算法：圖搜尋、DFS 和 BFS](https://www.youtube.com/watch?v=zaBhtODEL0w&list=PLX6IKgS15Ue02WDPRCmYKuZicQHit9kFt)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 2. [BFS(廣度優先搜尋)和DFS(深度優先搜尋)](https://www.youtube.com/watch?v=uWL6FJhq5fM) --- 影片 3. [演算法：二分查找](https://youtu.be/P3YID7liBug)---影片 4. [二元搜尋樹回顧](https://www.youtube.com/watch?v=x6At0nzX92o&index=1&list=PLA5Lqm4uh9Bbq-E0ZnqTIa8LRaL77ica6)--- 影片 5. [用於面試的 Python 演算法](https://www.youtube.com/watch?v=p65AHm9MX80)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 6. [演算法：遞歸](https://youtu.be/KEEKn7Me-ms)---影片 7. [演算法：冒泡排序](https://youtu.be/6Gv8vg0kcHc)--- 影片 8. [演算法：歸併排序](https://youtu.be/KF2j-9iSf4Q)--- 影片 9. [演算法：快速排序](https://youtu.be/SLauY6PpjW4)---影片 ### **大 O 表示法** 1. [大 O 表示法與時間複雜度簡介（資料結構與演算法 #7）](https://www.youtube.com/watch?v=D6xkbGLQesk) --- 影片 2. [哈佛 CS50 --- 漸近符號](https://www.youtube.com/watch?v=iOq5kSKqeR4)--- 影片 3. [演算法複雜度分析的簡單介紹](http://discrete.gr/complexity/)--- Post 4. [備忘錄](http://bigocheatsheet.com/)--- 帖子 ### **動態規劃** 1. [動態規劃（像程式設計師一樣思考）---影片](https://www.youtube.com/watch?v=iv_yHjmkv4I) 2. [演算法：記憶化與動態規劃 --- 影片](https://www.youtube.com/watch?v=P8Xa2BitN3I&t=13s) 3. 6 [.006：動態規劃 I：斐波那契、最短路徑 --- 影片](https://www.youtube.com/watch?v=OQ5jsbhAv_M&t=7s) 4. [6.006：動態規劃 II：文字對齊、二十一點 --- 影片](https://www.youtube.com/watch?v=ENyox7kNKeY&t=4s) 5. [動態規劃 --- 帖子](https://www.topcoder.com/community/competitive-programming/tutorials/dynamic-programming-from-novice-to-advanced/) ### **字串操作** 1. [編碼面試問答：最長的連續字元](https://www.youtube.com/watch?v=qRNB8CV3_LU)--- 影片 2. [Sedgewick --- 子字串搜尋](https://www.coursera.org/learn/algorithms-part2/home/week/4)--- 影片 #### 面試問題演練 1. [谷歌編碼面試 --- 普世價值樹問題](https://www.youtube.com/watch?v=7HgsS8bRvjo)--- 影片 2. [Google 編碼面試問題和答案 #1：第一個重複出現的字元](https://www.youtube.com/watch?v=GJdiM-muYqc)--- 影片 3. [在二元搜尋樹中找到最小和最大元素](https://www.youtube.com/watch?v=Ut90klNN264&index=30&list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P)--- 影片 4. [求二元樹的高度](https://www.youtube.com/watch?v=_pnqMz5nrRs&list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P&index=31)--- 影片 5. [檢查二元樹是否為二元搜尋樹](https://www.youtube.com/watch?v=yEwSGhSsT0U&index=35&list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P)--- 影片 6. [什麼是尾遞歸？為什麼這麼糟？](https://www.quora.com/What-is-tail-recursion-Why-is-it-so-bad) --- 影片 ### **學後問題** 現在您已經學習了一些，並觀看了一些影片，讓我們嘗試更多問題！ 1. [越大越好](https://www.hackerrank.com/challenges/bigger-is-greater/problem) 2. [6.之字折線轉換](https://leetcode.com/problems/zigzag-conversion/) 3. [7. 反轉整數](https://leetcode.com/problems/reverse-integer/) 4. [40. 組合和 II](https://leetcode.com/problems/combination-sum-ii/) 5. [43. 字串相乘](https://leetcode.com/problems/multiply-strings/) 6. [拉里的陣列](https://www.hackerrank.com/challenges/larrys-array/problem) 7. [短回文](https://www.hackerrank.com/challenges/short-palindrome/problem) 8. [65. 有效號碼](https://leetcode.com/problems/valid-number/) 9. [越大越好](https://www.hackerrank.com/challenges/bigger-is-greater/problem) 10. [完整計數排序](https://www.hackerrank.com/challenges/countingsort4/problem) 11. [莉莉的家庭作業](https://www.hackerrank.com/challenges/lilys-homework/problem) 12. [普通孩子](https://www.hackerrank.com/challenges/common-child/problem) 13. [459. 重複子字串模式](https://leetcode.com/problems/repeated-substring-pattern/) 14. [27. 刪除元素](https://leetcode.com/problems/remove-element/) 15. [450. 刪除 BST 中的節點](https://leetcode.com/problems/delete-node-in-a-bst/) 16. [659. 將陣列分割成連續的子序列](https://leetcode.com/problems/split-array-into-consecutive-subsequences/) 17. [最大值有界的子陣列數](https://leetcode.com/problems/number-of-subarrays-with-bounded-maximum) 18. [組合和 IV](https://leetcode.com/problems/combination-sum-iv) 19. [買賣股票的最佳時機（有冷卻時間）](https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown) 20. [最長重複字元替換](https://leetcode.com/problems/longest-repeating-character-replacement) 21. [成對交換節點](https://leetcode.com/problems/swap-nodes-in-pairs) 22. [二元樹右側視圖](https://leetcode.com/problems/binary-tree-right-side-view) 23. [展平嵌套列表迭代器](https://leetcode.com/problems/flatten-nested-list-iterator) 24. [二元樹層次順序遍歷](https://leetcode.com/problems/binary-tree-level-order-traversal) 25. [二元搜尋樹迭代器](https://leetcode.com/problems/binary-search-tree-iterator) 26. [對鏈最大長度](https://leetcode.com/problems/maximum-length-of-pair-chain) 27. [將鍊錶拆分為多個部分](https://leetcode.com/problems/split-linked-list-in-parts) ### **操作性程式設計問題** 有些公司不會問你演算法問題。相反，他們可能會更專注於實施和營運問題。這些通常更小眾，涉及實際問題，例如循環資料和執行某種任務。這些類型的問題通常不需要太多練習，因為更多的是了解陣列和 HashMap 等基本概念並追蹤您對它們所做的事情。 1. [袋鼠問題](https://www.hackerrank.com/challenges/kangaroo/problem) 2. [打破記錄](https://www.hackerrank.com/challenges/breaking-best-and-worst-records/problem) 3. [查找字串](https://www.hackerrank.com/challenges/find-a-string/problem)[迭代器](https://www.hackerrank.com/challenges/itertools-permutations/problem) 4. [不知道！](https://www.hackerrank.com/challenges/no-idea/problem) 5. [程式設計師的日子](https://www.hackerrank.com/challenges/day-of-the-programmer/problem) 6. [排行榜](https://www.hackerrank.com/challenges/climbing-the-leaderboard/problem) 7. [詞序](https://www.hackerrank.com/challenges/word-order/problem) 8. [夏洛克和方塊](https://www.hackerrank.com/challenges/sherlock-and-squares/problem) 9. [均衡陣列](https://www.hackerrank.com/challenges/equality-in-a-array/problem) 10. [蘋果和橘子](https://www.hackerrank.com/challenges/apple-and-orange/problem) 11. [更多操作風格問題](https://www.hackerrank.com/domains/python) ### **系統設計影片** 系統設計問題是至關重要的問題，表明您不僅僅是一名編碼員。身為工程師，您需要能夠思考大局。某些服務屬於哪裡，您需要什麼樣的伺服器，您將如何管理流量等等。所有這些想法都表明您能夠設計軟體，而不僅僅是編寫人們告訴您編寫的程式碼。 1. [停車場系統](https://youtu.be/DSGsa0pu8-k)---影片 2. [什麼是應用程式](https://www.youtube.com/watch?v=vvhC64hQZMk)--- 影片 3. [優步設計](https://youtu.be/umWABit-wbk)---影片 4. [Instagram](https://www.youtube.com/watch?v=QmX2NPkJTKg) --- 影片 5. [Tinder 服務](https://www.youtube.com/watch?v=xQnIN9bW0og)--- 影片 ### **作業系統** 作業系統問題比較少見，但是對執行緒、調度、記憶體等概念有紮實的理解是有好處的，即使只是基本的理解。當被問到進程和線程有什麼區別而不知道答案時，這是非常尷尬的。 1. [常見作業系統面試問題](https://www.geeksforgeeks.org/commonly-asked-operating-systems-interview-questions-set-1/) 2. [什麼是翻譯後備緩衝區？](https://www.geeksforgeeks.org/operating-system-translation-lookaside-buffer-tlb/) 3. [為什麼循環法可以避免優先反轉問題？](https://leetcode.com/discuss/interview-question/operating-system/220604/Why-does-Round-Robin-avoid-the-Priority-Inversion-Problem) 4. [中斷與系統呼叫---檔案系統中的「inode」是什麼？](https://leetcode.com/discuss/interview-question/operating-system/124838/Interrupt-Vs-System-Call) 5. [作業系統面試題目及答案 --- 第一部分](https://www.youtube.com/watch?v=b18X4uOKjHs) 6. [什麼是內核 --- Gary 解釋](https://www.youtube.com/watch?v=mycVSMyShk8) 7. [循環演算法教程（CPU調度）](https://www.youtube.com/watch?v=aWlQYllBZDs) 8. [LRU 快取的魔力（Google 開發 100 天）](https://www.youtube.com/watch?v=R5ON3iwx78M) --- 影片 9. [MIT 6.004 L15：記憶體層次結構](https://www.youtube.com/watch?v=vjYF_fAZI5E&list=PLrRW1w6CGAcXbMtDFj205vALOGmiRc82-&index=24)--- 影片 10. [中斷](https://www.youtube.com/watch?v=uFKi2-J-6II&list=PLCiOXwirraUCBE9i_ukL8_Kfg6XNv7Se8&index=3)---影片 11. [調度](https://www.youtube.com/watch?v=-Gu5mYdKbu4&index=4&list=PLCiOXwirraUCBE9i_ukL8_Kfg6XNv7Se8)---影片 ### **執行緒數** ![](https://cdn-images-1.medium.com/max/1600/1*uSHd3KSxg363C1frMv2KwQ.png) 1. [用戶級線程與內核級線程](https://leetcode.com/discuss/interview-question/operating-system/124631/User-Level-thread-Vs-Kernel-Level-thread) 2. [行程和線程簡介](https://www.youtube.com/watch?v=exbKr6fnoUw)--- 影片 3. [進程和線程之間的區別 --- 佐治亞理工學院 --- 高級操作系統](https://www.youtube.com/watch?v=O3EyzlZxx3g&t=11s)--- 影片 4. [分叉和多線程之間的區別](https://leetcode.com/discuss/interview-question/operating-system/125024/Difference-between-forking-and-multithreading) ### **物件導向** ![](https://cdn-images-1.medium.com/max/1600/1*8LHiDwWhrU4iegYiNnKX_A.png) 與作業系統類似，並不是每次面試都會問你有關物件導向程式設計的問題，但你永遠不知道。您需要確保記住計算機 162 課程中的基礎知識。 1. [Java 程式設計教學 --- 49 --- 繼承](https://www.youtube.com/watch?v=9JpNY-XAseg)--- 影片 2. [Java 程式設計教學 --- 55 --- 多態性簡介](https://www.youtube.com/watch?v=0xw06loTm1k)--- 影片 3. [Java 程式設計教學 --- 58 --- 抽象類別與具體類別](https://www.youtube.com/watch?v=TyPNvt6Zg8c)--- 影片 4. [Java 程式設計教學 --- 57 --- 重寫規則](https://www.youtube.com/watch?v=zN9pKULyoj4&t=3s)--- 影片 5. [Java 程式設計教學 --- 59 --- 保存物件的類](https://www.youtube.com/watch?v=slY5Ag7IjM0) 6. [物件導向程式設計](https://www.youtube.com/watch?v=lbXsrHGhBAU)---影片 ### **設計模式** 如果您像我們一樣，我們不會被教導所有各種設計模式。因此，最好了解它們的工作原理以及使用它們的原因。一些面試問題可以很簡單，例如“為什麼要使用工廠類？” 1. [工廠設計模式](https://www.youtube.com/watch?v=ub0DXaeV6hA)---影片 2. [觀察者設計模式](https://youtu.be/wiQdrH2YpT4)---影片 3. [適配器設計模式](https://www.youtube.com/watch?v=qG286LQM6BU&list=PLF206E906175C7E07&index=13)---影片 4. [立面設計模式](https://www.youtube.com/watch?v=B1Y8fcYrz5o&list=PLF206E906175C7E07&index=14)---影片 5. [責任鏈設計模式](https://www.youtube.com/watch?v=jDX6x8qmjbA&list=PLF206E906175C7E07&index=22)---影片 6. [解譯器設計模式](https://www.youtube.com/watch?v=6CVymSJQuJE&list=PLF206E906175C7E07&index=23)---影片 7. [單例設計模式教學](https://www.youtube.com/watch?v=NZaXM67fxbs&list=PLF206E906175C7E07&index=7)--- 影片 8. [第 6 章（第 1 部分）--- 模式（影片）](https://youtu.be/LAP2A80Ajrg?list=PLJ9pm_Rc9HesnkwKlal_buSIHA-jTZMpO&t=3344) --- 影片 9. [Head First 設計模式](https://www.amazon.com/Head-First-Design-Patterns-Freeman/dp/0596007124)--- 影片 ### SQL 這是最後一節。你們中的許多人可能不會被問到那麼多 SQL 問題。不過，我始終認為放在後口袋是件好事。 #### SQL --- 問題 1. [262. 行程和用戶](https://leetcode.com/problems/trips-and-users/) 2. [601. 體育場人流量](https://leetcode.com/problems/human-traffic-of-stadium/) 3. [185. 部門前三薪資](https://leetcode.com/problems/department-top-three-salaries/) 4. [626.交換席位](https://leetcode.com/problems/exchange-seats/) 5. [駭客排名報告](https://www.hackerrank.com/challenges/the-report/problem) 6. [177.第N最高薪水](https://leetcode.com/problems/nth-highest-salary/) 7. [對稱對](https://www.hackerrank.com/challenges/symmetric-pairs/problem) 8. [職業](https://www.hackerrank.com/challenges/placements/problem)[安置](https://www.hackerrank.com/challenges/occupations/problem) 9. [奧利凡德的庫存](https://www.hackerrank.com/challenges/harry-potter-and-wands/problem) #### SQL --- 影片 1. [IQ15：6 個 SQL 查詢面試問題](https://www.youtube.com/watch?v=uAWWhEA57bE)--- 影片 2. [了解 ROW\_NUMBER 和分析函數](https://www.youtube.com/watch?v=QFj-hZi8MKk)--- 影片 3. [分析函數的高級實現](https://www.youtube.com/watch?v=G3kYPzLWtpo&t=4s)--- 影片 4. [分析函數的高級實現第 2 部分](https://www.youtube.com/watch?v=XecU6Ieyu-4&t=54s)--- 影片 5. [聰明的貓頭鷹 SQL 影片](https://www.youtube.com/watch?v=2-1XQHAgDsM&list=PL6EDEB03D20332309)--- 影片 #### SQL 後問題 1. [二元樹節點](https://www.hackerrank.com/challenges/binary-search-tree-1/problem) 2. [氣象觀測站 18](https://www.hackerrank.com/challenges/weather-observation-station-18/problem) 3. [挑戰](https://www.hackerrank.com/challenges/challenges/problem)[列印素數](https://www.hackerrank.com/challenges/print-prime-numbers/problem) 4. [595.大國](https://leetcode.com/problems/big-countries/) 5. [626.交換席位](https://leetcode.com/problems/exchange-seats/) 6. [SQL 面試問題：3 個技術篩選練習（針對資料分析師）](https://data36.com/sql-interview-questions-tech-screening-data-analysts/) 面試可能會很困難，因為你會覺得自己沒有任何進展。擁有本學習指南將幫助您追蹤您的進度並讓您更好地了解自己的表現！ 祝你好運！ 另外，如果您想閱讀/觀看更多精彩的貼文或影片： [在 SaturnCloud 上使用 Jupyter Notebook 連接到大查詢第 2 部分](https://www.youtube.com/watch?v=O1cBN5gJtdw&t=15s) [身為資料科學家你應該閱讀的三本書](https://www.coriers.com/three-books-you-must-read-if-you-want-a-career-as-a-data-scientist/) [Hadoop 與關聯式資料庫](http://www.acheronanalytics.com/acheron-blog/hadoop-vs-relational-databases) [算法如何變得不道德和有偏見](http://www.acheronanalytics.com/acheron-blog/how-do-machines-learn-bias-data-science) [如何改善資料驅動策略](http://www.acheronanalytics.com/acheron-blog/how-to-improve-your-data-driven-strategy) [如何開發穩健演算法](https://medium.com/better-programming/how-to-develop-a-robust-algorithm-c38e08f32201) [資料科學家必須具備的 4 項技能](https://www.theseattledataguy.com/4-skills-data-scientist-must-have/) [SQL 最佳實踐 - 設計 ETL 影片](http://www.acheronanalytics.com/acheron-blog/sql-best-practices-designing-an-etl-video) --- 原文出處：https://dev.to/seattledataguy/the-interview-study-guide-for-software-engineers-764

0個讚   0留言 145瀏覽

2024 年適合您的資料科學簡歷的 Python 庫

**長話短說** -------- 到 2024 年，Python 仍然是資料科學的主要語言，因為它簡單，而且還擁有用於資料清理、特徵工程、視覺化和機器學習的各種函式庫。 如果您想開始或將您的職業生涯轉向更加以資料科學為導向的方向，此列表將為您提供您需要了解的庫。 ![動圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkuszl36ow451qqonbc5.gif) --- 1-太皮 ---- **領域：全面應用** ![類型](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6z61hrjtov7vjymjt5d.png) Taipy 旨在加快應用程式開發，從最初的原型到生產就緒的應用程式。 這個開源 Python 函式庫專為輕鬆開發前端 (GUI) 和 ML/資料管道而設計。 它程式碼量低，專為任何 pythonista 設計。 主要特徵： - 邁向資料科學：筆記本相容並與機器學習平台（Dataiku、Databricks 等......）輕鬆集成 - Taipy 隨著應用程式用戶的增加而擴展 - Taipy 適用於大型資料集 - 非同步模式：非常適合處理高負載應用程式 ![皇后樂團 GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0un08vhstrk6zpst5yti.gif) {% cta https://github.com/Avaiga/taipy %} Star ⭐ Taipy 儲存庫 {% endcta %} 您的支持意義重大🌱，並且在許多方面為我們帶來了很大的幫助，例如寫文章！ 🙏 --- 2-Matplotlib ------------ **領域：資料視覺化** ![隨著](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mspnyvvpbi9vk5qw9dp1.png) Matplotlib 是最著名的視覺化小工具庫。 借助該庫，您可以利用其廣泛的圖表和自訂功能輕鬆繪製任何 2D 圖形。 一個很棒的庫，可以透過簡單快速的圖表檢查模型的效能。 {% cta https://github.com/matplotlib/matplotlib %} Star ⭐ 儲存庫 {% endcta %} --- 3- 熊貓 ----- **領域：資料處理與分析** ![貓熊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2xnkvuwpwzok4o1zpci.png) 如何在不了解 Pandas 的情況下使用 Python 進行編碼？熊貓是Python皇室！ 該庫的兩個資料結構是： - 資料框 - 系列 該庫允許快速且有效率地載入、清理和準備資料。 主要功能包括： - 載入資料中 - 重塑資料框 - 基礎統計 {% cta https://github.com/pandas-dev/pandas %} Star ⭐ 儲存庫 {% endcta %} --- 4-Numpy ------- **領域：數值計算** ![麻木](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjpcse69no86muy2lpd9.png) Numpy 不如 Pandas 通用，但它是科學計算和資料預處理的重要工具。 使用 Numpy 時，您將熟悉陣列並知道如何有效地進行資料操作和數學函數。 這個庫對於您的資料科學專案絕對是必不可少的。 {% cta https://github.com/numpy/numpy %} Star ⭐ 儲存庫 {% endcta %} --- 5-Scikit-學習 ----------- **領域：機器學習** ![學習](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9a14zmbtz9xx9wwgx4ck.png) 另一個 Python 函式庫，這一次，您在 Python 中進行機器學習的首選。 該庫有多種演算法： - K-均值聚類 - 回歸 - 分類 但它還透過例如資料分割和降維技術來設定您的機器學習專案。 {% cta https://github.com/scikit-learn/scikit-learn %} Star ⭐ 儲存庫 {% endcta %} --- 6-西伯恩 ----- **領域：統計資料視覺化** ![西博恩](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afzvf6tgmbp3v90p0res.png) Seaborn 將為 Matplotlib 帶來一些附加功能。 當 Matplotlib 強調精確性和簡單性時，該程式庫帶來了複雜且有吸引力的視覺化效果。 {% cta https://github.com/mwaskom/seaborn %} Star ⭐ 儲存庫 {% endcta %} --- 7-TensorFlow 或 Pytorch ---------------------- **領域：深度學習** ![深度學習](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3yn7zvjiut485x5ni4o.png) Pytorch 還是 TensorFlow 這就是問題所在。 這兩個庫提供了神經網路的介面。 它們非常靈活，可為您提供高效的 API 來建立和建立神經網路模型。 選擇取決於您，但這裡有一些區別： - PyTorch 具有更自然語言處理的角度 - Pytorch 更具 Python 風格 {% cta https://github.com/tensorflow/tensorflow %} Star ⭐ TensorFlow 儲存庫 {% endcta %} {% cta https://github.com/pytorch/pytorch %} Star ⭐ PyTorch 儲存庫 {% endcta %} --- 8-硬 --- **領域：深度學習** ![難的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51dvps6qkwilxfttge85.png) Keras 是開始深度學習的好方法，因為它在 TensorFlow 之上執行，但實作過程得到簡化。 {% cta https://github.com/keras-team/keras %} Star ⭐ 儲存庫 {% endcta %} --- 9-狀態模型 ------ **領域：統計建模** ![統計資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzzy1arx88hr6404r79j.png) 該庫有一系列統計模型。 它是機器學習專案探索性資料分析階段的絕佳工具。 一系列功能涵蓋從描述性分析到統計測試；它也是一個適合處理時間序列資料、單變數和多元統計等的函式庫。 {% cta https://github.com/statsmodels/statsmodels %} Star ⭐ 儲存庫 {% endcta %} --- 10-極地 ----- **領域：快速資料操作** ![極性](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psrc89710z73zechouya.png) Polars 是一個為處理大型資料集而建立的 DataFrame 函式庫。 它的靈感來自 Python 的頂級庫 - Pandas，但進行了（快速）調整，速度提高了 10 到 100 倍。處理大型資料集時必須了解的工具。 {% cta https://github.com/pola-rs/polars %} Star ⭐ 儲存庫 {% endcta %} --- 結論 -- 這十個函式庫對於任何機器學習專案都是必不可少的，掌握它們將增強您的資料科學履歷。 請隨時評論您最喜歡的 ML/AI 庫！ --- 原文出處：https://dev.to/taipy/python-libraries-for-your-datascience-cv-in-2024-5cl7

0個讚   0留言 95瀏覽

10 個可以在網路上免費學習任何內容的網站

網路蘊藏著許多寶藏，但很多人卻不知道。 這裡有 10 個資源豐富的網站，可以在網路上免費學習任何東西： --- ## 1. 編碼 **免費程式碼營** 您可以免費學習編碼、建立專案並獲得認證。 **您可以獲得以下認證：** - 響應式網頁設計 - Javascript演算法與資料結構 - 前端開發庫 - 資料視覺化 - 關係型資料庫 - 和更多 ``` Link: https://www.freecodecamp.org/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1p5uuz40iub2l7u2z5f.png) --- ## 2. 行銷 **行銷範例** 簡短、溫馨、實用的行銷範例之家，可幫助您更好地進行行銷。 **取得範例：** - 客戶獲取 - 轉換 - 保留 - 品牌策略 - 推薦策略 - 和更多 ``` Link: https://marketingexamples.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b7t6d2nmw2aiml2iibx.png) --- ## 3. 無程式碼 每天獲得 30 分鐘的簡短課程，指導您 100 天的無程式碼之旅，以提升您的無程式碼技能。 - 你得到什麼？ - 指導課程 - 技巧和竅門 - 靈感鏡頭 - 驚喜獎勵 - 獎勵迷你挑戰 - 內建公共提示 ``` Link: https://www.100daysofnocode.com/start-the-challenge ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lq2r5ykrguazod5b7hrp.png) --- ## 4.人工智慧 **人工智慧 100 天** 每天獲得 30 分鐘的簡短課程，指導您的 AI 學習之旅。 **你了解什麼？** - 人工智慧在日常生活中的無限應用 - 你知道科技兄弟在談論什麼。 - 你每天都使用人工智慧來建立很酷的專案並消除無聊的工作。 - 你知道為什麼你對人工智慧感到焦慮，甚至更興奮。 ``` Link: https://www.100daysai.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1q3fklkja9pkk93elnm.png) --- ## 5. 語言 **多鄰國** 以遊戲化的方式學習您想要學習的任何語言，以保持您的動力。 **你得到什麼？** - 透過快速、簡短的課程，您將獲得積分並解鎖新級別，同時獲得現實世界的溝通技巧。 - 結合研究支援的教學方法和令人愉快的內容來建立課程。 - 類似遊戲的功能、有趣的挑戰和提醒，輕鬆養成語言學習的習慣。 - 課程經過量身定制，可幫助您以適當的水平和節奏學習。 ``` Link: https://www.duolingo.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hu7kwsknz8i57dqe9pvy.png) --- ## 6. 資料結構與演算法 **CSVISTOOL** 了解資料結構和演算法如何以視覺化方式運作。 **你能學到什麼？** - 清單 - 堆疊、佇列和出隊 - 樹和跳過列表 - 哈希圖 - 排序和快速選擇 - 字串搜尋 - 圖形演算法 - 和更多 ``` Link: https://csvistool.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp7z77dyhhm87i94xx8j.png) --- ## 7. 使用者體驗 **使用者體驗法則** 策劃設計人員在建立使用者介面時可以考慮的最佳實踐。 **你得到什麼？** - 啟發式 - 原則 - 格式塔 - 認知偏差 ``` Link: https://lawsofux.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi0nqfadsvvky9ea66um.png) --- ## 8.Excel + Power BI **尚杜** 每週接收有關 Excel 和 Power BI 最佳提示的電子郵件 **你得到什麼？** - 強大的提示、資源和影片，幫助您在工作中取得進步。 - 資料分析、圖表、報告和自動化的真實範例 - 獎勵文件、PDF 指南和先睹為快 ``` Link: https://chandoo.org/wp/subscribe/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdo19vjlpbg5e7gz1tw0.png) --- ## 9. 時事通訊的成長 **反向成長** 了解如何從網路上最好的時事通訊成長故事中發展您的時事通訊。 **你得到什麼？** - 時事通訊企業如何賺錢 - 他們如何成長 - 他們如何透過時事通訊獲利 ``` Link: https://growthinreverse.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bebb1sbr2mt94udzv77p.png) --- ## 10.心智模型 **法南街** 了解讓您生活更美好的心理模式。 **如何取得？** - 核心心智模型 - 物理和化學的心理模型 - 生物學的心理模型 - 系統思維的心智模型 - 以及更多 ``` Link: https://fs.blog/mental-models/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tmyafxsxl9xbvbcgn0c.png) --- ## 與我聯繫 領英：https://www.linkedin.com/in/durgesh4993/ GitHub：https://github.com/Durgesh4993 LeetCode：https://leetcode.com/durgesh4993/ 簡介：https://linktr.ee/durgesh4993 --- 原文出處：https://dev.to/durgesh4993/10-websites-to-learn-anything-for-free-on-the-internet-4ahe

0個讚   0留言 78瀏覽

3 個讓你陷入困境、沮喪和薪資過低的程式設計神話 🔮

如果我告訴你，你覺得自己在開發者職涯中陷入困境的原因與你的技術技能無關，你會怎麼想？ 它與資料結構、系統設計或軟體架構無關。 但這與你如何看待整個程式設計有關。 你看，自從你開始編碼以來，你就已經習慣於相信某些關於成為開發人員的神話，這些神話正在毀掉你的職業生涯。這就是為什麼你會患上冒名頂替症候群並懷疑自己的技能。讓你停留在同一水平，感到沮喪和工資過低。 更糟的是，這些信念深深植根於我們作為開發人員的日常生活中，以至於我們將它們視為理所當然。我們甚至不質疑他們。因為我們認為它們是現實。 事實上，它們只是社區流傳的神話。 尚未被揭穿的神話。部分原因是它們在紙上聽起來不錯。事實上，它們是危險的偏見，阻礙你走出去，建立你應得的未來。 在這篇文章中，我們將一一揭穿這些神話。 因此，您可以擺脫限制性信念，為最重要的目標採取行動，並釋放您作為開發人員的全部潛力。 讓我們從第一個讓你陷入困境的程式設計神話開始... # 1. 激情的神話 激情神話說，偉大的開發人員都非常熱情。他們在晚上編碼，在週末編碼。晚上，他們用程式碼做夢。 如此充滿熱情的程式設計師可以無休無止地編寫無數小時的程式碼。他們甚至沒有註意到這一點。當然，因為他們是如此熱情。 如果你沒有足夠的熱情去吃飯、睡覺、編碼和重複，那麼你應該收拾行李，找點別的事情做。我的朋友，開發人員不適合你。 去找點別的事做吧。聽說麥當勞要招募了 這是一個多麼糟糕的訊息，特別是對於剛開始的新開發人員。 開發人員和軟體公司都延續著激情的神話。 首先是那些試圖推銷自己並取得成功的開發商。部分是透過展示他們有多麼熱情。我不怪他們。我們都以某種方式這樣做。我所指出的只是這種行為的負面後果。 其次，激情的神話是由公司宣揚的。 充滿熱情的人對生意很有好處。因為他們願意廉價地出賣自己的時間。他們在辦公室度過數百個小時，讓別人變得富有。因為他們對自己所做的事情充滿熱情。 他們用這些無薪時間換取了什麼？ 我想這與他們的工作有情感連結。一種歸屬感。欣賞和目的。這些都是非常強大的藥物。 但是，你猜怎麼著……你不需要把你的時間免費交給一些自稱是家庭的公司來獲得這些感覺。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgar23217i4mys7obwa8.png) 把你的時間留給你真正的家人。當你沒有攪拌足夠多的程式碼行時，它不會把你踢出去。 擁有平衡的生活，編碼不會佔用您大部分時間。 交朋友並在工作之餘擁有自己的嗜好。你也會得到同樣的滿足。除了讓你的時間回來！ 激情的神話是危險的，因為它以另一種方式告訴你，首先，你還不夠（在這種情況下不夠熱情）。 > ‍“程式設計不是一種“激情”或“天賦”，而是後天技能的集合。” - Jacob Kaplan-Moss（Django、Python 框架的共同建立者） 激情神話之所以如此危險，是因為它會觸動你作為開發人員最大的恐懼，特別是如果你是自學成才的話。 害怕「你還不夠」。 激情神話的第二個基本訊息是你工作不夠努力。 這會讓你越來越努力，忽視你的健康和家庭，導致倦怠。這就是為什麼有些公司是有毒的工作場所。 事實上，最好的軟體開發人員都非常懶惰。這就是為什麼他們嘗試設計事物並提高效率，而不是用蠻力解決問題。 根據我的經驗，開發人員成為高級開發人員的標誌之一就是不必在周末編碼。 **高級開發人員選擇一致性而不是熱情。** 生產力突飛猛進，穩定進步。他們知道「激情」來來去去。太多的熱情會導致倦怠。 當時間流逝時，經驗豐富的開發人員就會停止熱情。他們合上筆記型電腦並離開了辦公室。 有趣的部分？ 透過暫時遠離編碼，他們第二天回來時會更加新鮮，並渴望親自動手。 如果您想充分發揮開發人員的潛力，請忘記激情的神話。 相反，要注重平衡和一致性。作為一個已經編碼十多年的人，我可以告訴你開發人員的職業生涯是一場馬拉松。 現在來談談阻礙程式設計師前進的第二個誤解… 🚨附言您是否希望透過優質資源、回饋和問責制快速晉升為高階職位？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3So6BWF)🚨 # 2. 經驗的神話 如何晉升資深開發人員？如何獲得技術主管？您如何獲得更多責任或加薪？ 傳統的建議會告訴你沒有靈丹妙藥。你只是需要更多的經驗。所以堅持住。當你的眼睛有皺紋、背部疼痛時，你可能會到達那裡。或者你可能不會。我們不確定。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c80tlzipjx0uc2cusmb.png) _閱讀 LinkedIn 上的開發人員職位發布後的感受如何。圖片來源：Reedit._ 儘管經驗確實很重要，但這個神話被過度使用了。 首先，並非所有經驗都是平等的。 人們可以在快節奏的新創公司待一年，然後看到它成長。學習如何從幾百個用戶擴展到數百萬個。 或花一年時間維護公司中的一些遺留企業軟體。除了發送格式良好的電子郵件和辦公室政治之外，學到的東西很少。 **注意**：相反的情況也可能發生。你在新創公司中什麼也學不到，因為產品永遠不會受到關注，而你在企業中學到很多東西，因為他們已經擁有了規模。 以編寫程式碼年數表示的經驗並不能很好地顯示開發人員的資歷。單獨的時間並不能轉化為學習。重要的是你在這段時間裡做什麼。 雖然晉升高級可能沒有靈丹妙藥，但有一定的模式。 如果開發人員模仿這些模式，他們可以大大加速他們的成長。這就是為什麼你會發現擁有 3 年經驗的開發人員拿著 6 位數的薪水，而一些高級開發人員在月底仍然難以支付賬單。 這種經驗神話阻礙了你，因為傳達的訊息是相同的：你還不夠（以你沒有足夠的形式）。 我是說沒有經驗就能出人頭地嗎？沒有任何這些你就可以成為高級開發人員嗎？ 不。 但不要高估時間的價值。相反，你應該看重的是執行力。當你划船時，船的移動速度比你只是等待水流時要快。 經驗神話長期存在有兩個主要原因。 ### 第一，缺乏知識。 當你問高級開發人員需要什麼才能達到下一個級別，而他們不知道所需的確切技術和軟技能時，他們只會遵循多年的經驗，而不會顯得愚蠢。 ### 第二，不安全感。 如果高級開發人員看到您試圖比他們更快地行動，那麼人類精神中醜陋的部分就會發揮作用。在一個聲稱如此開放和友好的行業中，嫉妒是很常見的。像軟體開發人員這樣非常聰明的人通常也非常雄心勃勃。 軟體開發是一個競爭非常激烈的行業。 我們同時合作和競爭。只要我們確保競爭公平並且不欺騙自己就可以了。 經驗神話是一種不公平的競爭方式。我們不關注人們的才能和技能，而是更關注他們履歷中的任意數字。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1x8wzlhufxndjvnzfff.png)_雞生蛋蛋生雞的問題。圖片來源：theSeniorDev_ 為了擺脫體驗神話，轉移你的注意力。更關心你的技能而不是你在某項工作上花費的時間。 如果當你提出要求時，有人以沒有足夠的「多年經驗」為由，不要讓他們阻止你。完善你的履歷和技能，開始進行技術面試，然後讓市場來決定。 🚨附言您是否希望透過優質資源、回饋和問責制快速晉升為高階職位？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3So6BWF)🚨 # 3.人工智慧的神話 現在是 2024 年，你學習如何編碼是沒有意義的。或如何成為更好的開發人員。很快，人工智慧將取代我們所有人！編碼工作即將結束，為什麼還要費心？ 人工智慧的神話已經存在了幾十年。但直到 ChatGPT 和 Github Copilot 發布之前，它從未如此存在。 那麼，為什麼要費心去成為更好的開發人員呢？ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5p0bdqsgymof1l6p1197.png) 軟體開發本來就很困難，現在你有一個完美的藉口放棄它。 甚至不會被認為是失敗。你可以將其歸咎於開放人工智慧。 沒那麼快。 我會給你兩個理由說明為什麼你還是應該費心。 繼續程式設計的第一大原因是你正在學習的「元」技能。這些都是技能背後的技能。 當你學習如何編碼時，你就是在學習如何思考。以結構化的方式思考。您正在學習如何將業務需求建模為逐步說明。您正在學習如何集中註意力、如何過濾資訊以及如何在團隊中工作。 即使機器本身很快就會完成實施和編碼，這些「元技能」也非常有價值。 繼續敲擊鍵盤的第二個原因是，從我們迄今為止所看到的情況來看，人工智慧工具會犯下許多錯誤。它們是預測機器。他們無法思考。人類推理仍有需求。 這些人工智慧工具會變得更聰明嗎？ 大概。 它們會在不久的將來取代人類嗎？可能不會。 你猜怎麼著，如果你不再閱讀那些關於人工智慧將如何取代你的偏執文章，而是真正在軟體開發方面做得更好，你很可能永遠不會被取代。 或者，當這種情況發生時，您已經在某個充滿異國情調的海灘上退休了。 ####老年的比喻。 想像一下你已經 50 歲了。機器贏了。他們將一切自動化。但是，你不斷學習、適應和學習新技能。賺大錢，投資養老。你現在很聰明，而且已經退休了。 假設你陷入了目前正在發生的人工智慧偏執狂。你放棄了編碼。你做了一些被標記為人工智慧免疫的事情（不知道是否存在，但建築工作是最重要的）。 你賺了一些錢，但沒學到多少東西，同時也毀了你的身體。你現在老了，想要一份辦公室工作。理想的情況是遙遠的事。 你對如何實現這一點的了解為零。您繼續編碼的開發人員夥伴在打高爾夫球方面表現得很好。 屈服於恐懼毀了你的生活。 不要因恐懼而屈服。永遠不要停止學習和進步。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxbo16iwsvmot92oxinn.png)_圖片來源：theSeniorDev_ 繼續變得更好。提升整個堆疊的技能。熟悉人工智慧。幾個月後，你就會迎頭趕上，並慶幸自己沒有放棄。 **為什麼這些程式設計神話如此有效？** 因為它們觸及了身為開發人員最大的恐懼之一。 害怕你還不夠。還不足以得到那份工作。不足以讓拉取請求獲得批准。還不足以成為「真正的開發人員」。 希望讀完本文後，您能夠認清這些神話的真相。純粹的誤解阻礙了你。 不要屈服於恐懼，不斷提升你的技能。 直到下一篇， 德拉戈斯 🚨附言您是否希望透過優質資源、回饋和問責制快速晉升為高階職位？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3So6BWF)🚨 --- 原文出處：https://dev.to/dragosnedelcu/3-programming-myths-that-keep-you-stuck-frustrated-and-underpaid-27bg

0個讚   0留言 185瀏覽

2024 年 7 個學習 Python 的最佳場所 [網站 + 平台]

--- 標題：2024 年學習 Python 的 7 個最佳地點 [網站 + 平台] 發表：真實 描述：如果您想知道 2024 年在哪裡學習 Python，那麼請查看這 8 個排名前列的網站和免費教程，以在 2024 年免費在線學習 Python 編程。 標籤: python, 程式設計, 編碼, 開發 封面圖片：https://thepracticaldev.s3.amazonaws.com/i/60y4jb5e98udezhppwt8.png --- *披露：這篇文章包含附屬連結；如果您透過本文提供的不同連結購買產品或服務，我可能會收到補償。* 不管你相信與否，Python 已經激勵了許多人學習編碼，而且它還在不斷激勵他們。我認識一些人因為不同的原因學習 Python，從 [web 開發](https://javarevisited.blogspot.com/2019/04/top-5-python-web-development-frameworks.html) 到[機器學習](https://javarevisited.blogspot.com/2019/08/top-5-python-books-for-data-science-and-machine-learning.html)。 我看過新人學習 Python，使用 Django 編寫 Web 應用程式，使用 Python 建立機器學習模型，然後編寫一些方便的腳本來自動執行無聊的工作。 Python 目前是世界上**#1 的程式語言**，並且由於資料科學和機器學習以及出色的 [Python 庫](https://javarevisited.blogspot.com/2018/10/ top-8-python- libraries-for-data-science-machine-learning.html）如Pandas、NumPy 和[TensorFlow](https://hackernoon.com/top-5-tensorflow-and-ml-courses-對於程式設計師-8b30111cad2c）。 因此，如果您也考慮在 2024 年學習 Python，或者已經開始使用 Python 進行編碼，但仍在尋找一些免費資源，那麼您來對地方了。 過去，我分享了許多有用的免費Python資源，例如[書籍](https://javarevisited.blogspot.com/2019/07/top-5-books-to-learn-python-in-2019.html ）和[免費課程](https://javarevisited.blogspot.com/2018/12/10-free-python-courses-for-programmers.html)。今天，我將分享一些可以免費學習 Python 的網站、免費教學和入口網站。 從免費資源中學習真是太棒了，因為您不需要信用卡，也不需要支付課程費用。您所需要的只是時間和學習的渴望。 然而，這並不容易，因為有很多[免費的Python資源](https://medium.com/swlh/5-free-python-courses-for-beginners-to-learn-online-e1ca90687caf)可用，選擇正確的一個是一項艱鉅的任務。這就像大海撈針一樣，這就是本文將為您提供幫助的地方。 順便說一句，如果你不介意花幾塊錢來學習像Python 這樣有價值和有用的東西，那麼我還建議你看看Josh Portilla 的**[完整的Python 3 Bootcamp](http://bit. ly/complete Udemy 上的 -python3-bootcamp)**。您將以更結構化的方式快速學習 Python，並且您可以在 Udemy 的促銷活動中僅花費 10 美元購買本課程。 ##2024 年 8 個初學者的熱門平台和免費 Python 教程 在這裡，您將找到一些免費學習 Python 的最佳地點，我與幾位 Python 專家一起精心挑選了這些資源。我有目的地選擇盡可能少的資源，但我仍然有一些選擇。如果您有任何其他免費教授 Python 開發的有用 Python 網站，請隨時推薦它們。 ###**1\. [Coursera](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2F)** 如果您想在不支付一分錢的情況下向世界一流大學學習，那麼 Coursera 就是您的最佳選擇。它提供史丹佛大學、歐洲工商管理學院、新加坡國立大學（新加坡國立大學）等知名大學教授的線上課程。 最重要的是，它還有最受歡迎的免費課程之一來學習*Python - 適合所有人的程式設計*（Python 入門）。 本課程將從零開始教您 Python 3。您不需要任何程式設計經驗，因為您將在課程中學習。超過 1250,000 名學生已經註冊了這門課程並學習如何編程，現在是您從中受益的機會。 課程也是 [**Python forEverybody 專業化**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org% Coursera 上的2Fspecializations %2Fpython)，其中包含另外4 個深入學習Python 的課程，例如： 1.【Python資料結構】( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Fpython-data%3Fspecialization%3Dpython） 2.【使用Python存取Web資料】( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Fpython-network-data%3Fspecialization%3Dpython） 3. [透過Python使用資料庫]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Fpython-databases%3Fspecialization%3Dpython） 4. [Capstone 專案：使用 Python 檢索、處理和視覺化資料]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Fpython-data-visualization） 所有課程都可以免費旁聽，這意味著您可以免費加入並學習。但是，您無法參加作業和測驗，並且在付款之前不會獲得任何認證。 [![Python 適合所有人Coursera 免費課程](https://1.bp.blogspot.com/-9iz43SzwsfY/XX4691bTMjI/AAAAAAAAaYE/Xk960951xbALk2Y7eCIqfIgL94pOq5vDQCA51xbALk207eCIqfIgL94pOq5vDQA2057%/57%/A5%/B5%/B55%/B5/M5%/B5%/M5%/AM5%/B5%/Mr. 2Bfree。 .jpg) ]( https://dev.to/javinpaul/7-python-online-courses-for-beginners-and-intermediate-programmers-1h4k) 如果您想要所有這些和認證，那麼您需要註冊不是免費的專業化課程。如果您負擔得起並欣賞該課程，無論如何，您應該訂閱，它完全值得您的時間和金錢。 我建議加入 [Coursera Plus]，這是 Coursera 的訂閱計劃，可以無限制地存取許多課程、認證和專案。如果您想參加 Coursera 中的多個課程或認證，這可能是最好的學習方式，不僅包括 Python，還包括資料科學和雲端。 ------ ###**2\. [Udemy](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2F)** 這是另一個流行的線上課程平台，它可能擁有地球上最大的線上課程集合。我喜歡 Udemy，因為你幾乎可以找到任何你想學的課程，而且還是免費的。 與 [Codecademy](https://bit.ly/codecademypro) 不同，您不需要任何訂閱，只需建立免費帳戶，然後您就可以註冊免費的 Python 課程。大多數講師在首次推出課程時都會免費提供課程，以便獲得一些關注、評論和社會認同。 但是，也有一些完全免費的優質 Python 課程。您可以加入他們來學習 Python 3。以下是我最喜歡的一些免費課程，可幫助您深入學習 Python。 Udemy 的優點是您可以向專家學習，但它的互動性不如 CodeCademy。不過，如果您喜歡透過影片學習，那麼沒有比 Udemy 更好的地方了。 如果你能負擔得起一些錢，你還可以以10 美元左右的一次性價格獲得很棒的訓練營風格的課程，例如**[The Complete Python 3 Bootcamp](http://bit.ly/complete -python3-bootcamp)**關於他們的閃購。 [![5 個免費學習 Python 的網站](https://1.bp.blogspot.com/-D0BNTzFrdGo/XX44gcl_gII/AAAAAAAAaXk/yIXkYvrcO60EB9lgyHTQiCDp8nUoaAzSQCLcBGAsYvrcO60EB9lgyHTQiCDp8nUoaAzSQCLcBGAsY7/s400/The% ://bit.ly/complete-python3-bootcamp） -------- ###**3 [透過 Educative 從頭開始學習 Python](https://www.educative.io/courses/learn-python-from-scratch?affiliate_id=5073518643380224)** 如果您不知道 Educative.io 是一個基於文字的互動式平台，可讓您透過瀏覽器進行學習和編碼。您可以學習概念並只需在下一行中編寫程式碼，而無需擔心下載必要的軟體和設定開發環境。對於任何學習任何程式語言的初學者來說，這是最大的優勢，因為他們中的大多數人都陷入了這個設定部分。 如果你想[在2024 年學習Python](https://www.java67.com/2020/05/top-5-courses-to-learn-python-in-depth.html) 那麼這門課是完美的地方開始。本課程首先探索基本建置塊，然後再討論函數和循環等更高層次的概念。有趣的測驗和程式設計挑戰將伴隨您一路前行，幫助您強化課程中涵蓋的所有概念。 在課程結束時，您將熟悉[資料結構](https://becoming human.ai/6-courses-python-programmers-can-join-to-learn-data-structs-and -algorithms-c1a37284938e) 和Python中的函數式程式設計。這是一門免費課程，因此您無需支付任何費用即可加入，您只需建立 Educative.io 帳戶即可存取課程。 [![深入 Python 的免費教學](https://thepracticaldev.s3.amazonaws.com/i/2bwr9gfk1yxgn89j3kjy.png)](https://www.educative.io/courses/learn-python-from-從頭開始？affiliate_id=5073518643380224) ---- ### 4\. [DataCamp 的免費 Python 入門課程](https://datacamp.pxf.io/c/1193463/1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fcourses%2Fintro-to-python-for -資料科學） DataCamp 的「Python 程式設計簡介」課程對於想要踏上 Python 世界之旅的初學者來說是一個極好的資源。此免費課程具有用戶友好的介面和全面的內容，適合剛接觸程式設計或希望鞏固基礎 Python 技能的學習者。 它涵蓋了變數、資料類型、控制結構、函數等關鍵概念，確保學生充分掌握 Python 基礎知識。透過實踐方法，參與者參與實際練習和編碼挑戰，以增強他們的理解。 無論您是想進入資料科學、Web 開發或任何 Python 相關領域，本課程都會對該語言的語法和功能進行紮實的介紹，為更高級的學習奠定基礎。 說到社會認同，超過 500 萬人參加了這門課程，這是任何線上 Python 課程的記錄，它的平均評分為 4.7，簡直令人驚嘆。 順便說一下，如果您喜歡Datacamp的線上學習平台及其課程，可以考慮付費訂閱。他們有不同的計劃，如標準、專業和高級，允許存取所有專案。我推薦 **[標準計劃](https://datacamp.pxf.io/c/1193463/1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fpricing)** 因為它是正確的-價格合理，您可以獲得提高資料技能的所有必需品。 [![適合初學者的最佳免費Python課程](https://blogger.googleusercontent.com/img/a/AVvXsEhZ1TxSJhyjGvc8q5E6AE4d8YXovCdy4RuU75uZWx2ISudjW64QLyZgNCiERoA0Ee3HYjmW64QLyZgNCiERoA0Ee3HYjmW64QLDgNCiERo YAx yjX5tcmFxfSsiOOFfnIG6ta66ZtpgGFbs-m2KQpxFHdNxvlFyLbwk0hBfD-MhIWXo0fDjmbXsyli9EzQ=w395-h250)](https://datacampc. /c/1193463 /1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fcourses%2Fintro-to-python-for-data-science) -------- ###**5\. [CodeCademy](https://bit.ly/codecademypro)** 如果您喜歡互動式學習，那麼沒有比 CodeCademy 更好的地方了。他們首先用盡可能少的單字教你理論，然後要求你使用該概念在線上編寫程式碼。最好的事情是您不需要進行任何設置，例如在電腦上安裝 Python。 您可以直接從瀏覽器執行 Python 程式碼。另一個好處是，在準備好之前，您不需要編寫完整的程式。您需要進行一些小的更改並執行它們。這是學習 Python 程式設計的一種很棒且有趣的方式。 我使用他們的互動式平台學習了 JavaScript、Java、Python 和 Linux。早些時候，他們是完全免費的，但現在他們有免費增值模式，其中一些課程或課程僅對付費會員開放。 目前，他們的[**學習Python 2**](https://bit.ly/learnpython2withcodecademy)課程是免費的，而[**Python 3課程**](https://bit.ly/learnpython3codecademy)只是免費的可供付費會員使用。如果您負擔得起並欣賞 CodeCademy，請務必訂閱，但如果您無法從他們的 Python 2 課程開始，那麼它非常適合沒有編碼經驗的初學者。 [![線上學習Python的免費互動課程](https://1.bp.blogspot.com/-lSHI8IMKqGA/XX46dg1vjwI/AAAAAAAAaX8/4O1-n9jcl5YT47zh02TOYIdGA87j3AOxQCLcBGAsYhon/T47zh02TOYIdGA87j3AOxQCLcBGAsYhon/s4007% PG )](https://bit.ly/codecademypro) ----- ###**6\. [Google 的 Python 課程](https://developers.google.com/edu/python/)** 如果你不知道，Google 也為初學者提供了一套優秀的 Python 教程，稱為 Google 的 Python 課程。這是一個免費課程，適合有一點程式設計經驗並且想要學習 Python 的人。課程包括書面教程、講座影片和大量練習 Python 編碼的程式碼練習。 第一個練習涉及字串和清單等基本 Python 概念，為下一個練習奠定基礎，下一個練習是處理文字檔案、進程和 http 連接的完整程序。 Google 本身的許多專案都使用 [Python](https://javarevisited.blogspot.com/2018/05/10-reasons-to-learn-python-programming.html)。而且，這些材料通常在 Google 內部用於向剛開始編碼或幾乎沒有程式設計經驗的人教授 Python。 本材料最好的部分是 YouTube 上提供講座影片。因此您不需要任何其他帳戶。它還教您設定自己的[Python開發環境](https://medium.com/better-programming/top-5-courses-to-learn-python-in-2018-best-of-lot-26644a99e7ec ），這確實帶來了最初的挑戰，但從長遠來看是很好的。 ------ ###**7\. [微軟的免費Python課程](https://www.awin1.com/cread.php?awinmid=6798&awinaffid=631878&clickref=&p=%5B%5Bhttps%3A%2F%2Fwww.edx.org%2Fcourse%2Fintroduction-to - python-absolute-beginner-4%5D%5D)** 如果谷歌也有Python課程，微軟怎麼會落後呢？嗯，它還在 Edx（另一個流行的免費教育線上入口網站）上提供免費的 Python 課程。本課程名為“Python 簡介：絕對初學者”，是一門學習 Python 的免費課程，由高級內容開發人員 Eric Camplin 教授。 本課程將在Jupyter Notebooks 中教您Python，這是一個基於瀏覽器的線上[Python] 編碼編輯器(https://hackernoon.com/top-5-courses-to-learn-python-in-2018- best-of- lot-26644a99e7ec)，這表示你不需要安裝Python。這是一個為期 5 週的課程，每週學習 3 到 4 個小時。 本課程也是 Microsoft 入門級軟體開發專業計劃的一部分，該課程也是免費的。您只需在需要認證時付費。您可以將其新增至您的履歷或 LinkedIn 個人資料中，如下所示： [![免費最佳Python認證課程](https://1.bp.blogspot.com/-1U2amxNH280/XX47hDYf-3I/AAAAAAAAaYk/Xa8Se2JHrmca1AbXy81ILDQofQW4KyAzwCLcBGAsAsYHQ/s400/IntrodBPY free % 2B課程.png)](https://javarevisited.blogspot.com/2018/03/top-5-courses-to-learn-python-in-2018.html) ------ ###8。 [學習 Python - FreeCodeCamp 的初學者完整課程 [教程]](https://www.youtube.com/watch?v=rfscVS0vtbw) 本課程將向您全面介紹 Python 中的所有核心概念。跟著影片一起學習，您很快就會成為 Python 程式設計師！您可以在 YouTube 上免費觀看，這是目錄 ⭐️內容⭐ ⌨️ (0:00) 簡介 ⌨️ (1:45) 安裝 Python 和 PyCharm ⌨️ (6:40) 設定和 Hello World ⌨️ (10:23) 繪製形狀 ⌨️ (15:06) 變數和資料類型 ⌨️ (27:03) 使用字串 ⌨️ (38:18) 處理數字 ⌨️ (48:26) 取得使用者的意見 ⌨️ (52:37) 建構一個基本計算器 ⌨️ (58:27) 瘋狂自由遊戲 ⌨️ (1:03:10) 列表 ⌨️ (1:10:44) 列表函數 ⌨️ (1:18:57) 元組 ⌨️ (1:24:15) 功能 ⌨️ (1:34:11) 退貨聲明 ⌨️ (1:40:06) If 語句 ⌨️ (1:54:07) If 語句與比較 ⌨️ (2:00:37) 建構一個更好的計算器 ⌨️ (2:07:17) 字典 ⌨️ (2:14:13) While 循環 ⌨️ (2:20:21) 建構一個猜謎遊戲 ⌨️ (2:32:44) For 循環 ⌨️ (2:41:20) 指數函數 ⌨️ (2:47:13) 2D 清單和嵌套循環 ⌨️ (2:52:41) 建構翻譯器 ⌨️ (3:00:18) 評論 ⌨️ (3:04:17) 嘗試/例外 ⌨️ (3:12:41) 讀取文件 ⌨️ (3:21:26) 寫入文件 ⌨️ (3:28:13) 模組和 Pip ⌨️ (3:43:56) 類別與物件 ⌨️ (3:57:37) 建構多項選擇測驗 ⌨️ (4:08:28) 物件函數 ⌨️ (4:12:37) 繼承 ⌨️ (4:20:43) Python 解譯器 ![免費 Python 教學與平台](https://thepracticaldev.s3.amazonaws.com/i/zu01vymg8iberknzdeb8.png) ---- 這就是一些 **您可以免費學習 Python 的網站**。所有這些都是很棒的資源，您可以選擇您喜歡的資源。您不需要註冊所有這些，這將是荒謬且耗時的。相反，選擇最適合您的學習風格的一種。 例如，如果您喜歡互動式學習，請選擇[CodeCademy](https://javarevisited.blogspot.com/2019/09/codecademy-vs-udemy-vs-onemonth-which-is-better-for-learning-code . html），如果您喜歡非正規影片課程，那麼選擇 Udemy；如果您喜歡大學和學校等結構化教育，那麼選擇 Coursera。 而且，如果您喜歡基於文字的學習，請記住閱讀比觀看影片更快，那麼 Google 的 Python 課程是最好的。 除此之外，Scrimba 是另一個免費學習 Python 程式設計的好地方。 您可能喜歡的其他 **Python 文章和資源** - [2024年學習Python的10個原因](https://javarevisited.blogspot.com/2018/05/10-reasons-to-learn-python-programming.html) - [Python初學者學習Python的5大課程](https://javarevisited.blogspot.com/2018/03/top-5-courses-to-learn-python-in-2018.html) - [Python 開發者最喜歡的 5 個 Web 開發框架](https://javarevisited.blogspot.com/2019/04/top-5-python-web-development-frameworks.html) - [Python 與 JavaScript - 哪個更好開始？](https://javarevisited.blogspot.com/2019/05/python-vs-javascript-which-programming-language-beginners-should-learn.html) - [10門免費線上課程深入學習Python](https://javarevisited.blogspot.com/2018/12/10-free-python-courses-for-programmers.html) - [資料科學與機器學習的 8 個最佳 Python 函式庫](https://javarevisited.blogspot.com/2018/10/top-8-python-libraries-for-data-science-machine-learning.html) - [Python vs Java - 初學者應該學習哪種程式語言？](https://javarevisited.blogspot.com/2018/06/java-vs-python-which-programming-language-to-learn-first.html ) - [5 Python 資料科學與機器學習課程](https://javarevisited.blogspot.com/2018/03/top-5-data-science-and-machine-learning-online-courses-to-learn-online . html) - [完整的 Web 開發者路線圖](https://hackernoon.com/the-2019-web-developer-roadmap-ab89ac3c380e) - [10本針對程式設計師的免費Python程式設計書籍](http://www.java67.com/2017/05/top-7-free-python-programming-books-pdf-online-download.html) - [資料科學的 5 本 Python 書籍](https://javarevisited.blogspot.com/2019/08/top-5-python-books-for-data-science-and-machine-learning.html) 感謝您到目前為止閱讀這篇文章。如果您喜歡這些網站，請與您的朋友和同事分享。如果您有任何問題或回饋，請留言。 一切順利。 **P。 S. -** 如果你此刻只想做一件事來開啟你的 Python 程式設計之旅，那就加入 **[完整的 Python 3 Bootcamp](http://bit.ly/complete-python3-bootcamp ) ** Jose Portilla 在Udemy 上的課程。您將快速學習 Python 並且永遠不會後悔您的決定。 --- 原文出處：https://dev.to/javinpaul/top-5-places-to-learn-python-programming-for-free-m4c

0個讚   0留言 102瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 53 個專案創意（從初級到高級）
🔥 用於建立 AI/ML 應用程式的最佳開發工具！
🔥 為開源做出貢獻將使您獲得新工作的機會增加 10 倍 🚀
🔥 我們在使用 Rust 建構 SaaS 時學到了什麼
🔥 精通程式碼審查：審閱者和 PR 創作者指南
  近期留言
熱門搜尋： email COM 學習 工作 1 使用 c C 研 題 . node.js with 房 2 開發 前 ＣＳＳ 4 作為 專案 第一 ci JS 10 % 作業 vs go 20 github id 前端 網站 git ui 分享 Ai 技術 50 html 測試 java AI api 研究 語言 資料庫 結構 ` app 工程師 jav COMPO 系列 vue 搜尋 javascript 後端 Java react user HTML 架構 React Can Line 非同步 練習 CSS cn this 聊天 rest 謝謝 for CD 遊戲 prisma 新創 作業分享 create .NET js 網頁 PHP Node Github 分離 promise 資料結構 GIT 主題 ruby part PYTHON ") console bi JAVA
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。