JavaScript

了解為什麼不應該修改 JavaScript 物件的原型，以及應該做什麼 作為程式設計師，我們必須首先學會的技能之一就是如何尋找解決方案。 Google 是你的朋友。而大多時候，一個來自 2009 年的 StackOverflow 解答能夠完美解決你在 2019+ 的問題。 在該網站或個人部落格上，有時候我會看到一些修改內建物件原型的程式碼。 就像這個例子，它擴充了 Array 物件的原型，增加了一個 insert 方法： Array.prototype.insert = function(index, item) { this.splice(index, 0, item) } 這樣一來，你可以對任何陣列調用 insert() 方法： ['red', 'blue'].insert(0, 'yellow') 這樣很方便。你不需要定義這樣的函式，也不需要擔心作用域的問題，只需將它附加到 Array 物件上，這樣每個陣列都可以使用它。 但僅僅因為你能這麼做，並不意味著你應該這樣做。 這種方法有什麼問題呢？ 可能的衝突 假設你使用的一個函式庫實現了這樣的功能。而你引入的另一個函式庫也做了同樣的事情。可能這些方法稍有不同，看起來好像一切都順利，直到事情不好時。 你會有一個大問題，因為你無法修改這些函式庫，但你仍然希望使用它們。 未來護航你的程式碼 假設下一個 JavaScript 版本實作了 Array.insert 方法，但參數簽名不同。現在會發生什麼？你需要回頭重寫所有的程式碼。也許是為了一個你不再工作的客戶。 或者你可能在一個被其他人在他們自己的專案中使用的函式庫中這樣做，那就更糟糕了。 這種做法只會造成技術債務，並且很容易引發問題。 你應該做什麼？ 在程式庫檔案中創建一個函式，需要時導入它。不要修改你無法控制的對象。

在什麼情況下使用Node.js是一個好主意？為什麼選擇Node.js而不是其他解決方案？本文旨在回答這個問題。 在建立任何類型的軟件時，都有大量的Node.js替代方案。 為什麼Node.js是一個好選擇？ 在本文中，我將告訴你一些使用它的好理由。 Node.js是JavaScript JavaScript可能是世界上最受歡迎的編程語言。 JavaScript是唯一一種可以運行在Web瀏覽器中的語言，這使得它比任何其他語言都具有獨特的優勢。 隨著React Native、Electron和類似的解決方案的崛起，它也是唯一一種可以用來創建網絡應用、前端和後端、手機應用、桌面應用的語言。 它非常通用，一旦你在某個領域掌握了JavaScript語言，你的技能可以很容易地轉移到另一個領域，你只需要學習環境的差異（例如，如何使用React Native而不是Electron，或者DOM）。 這是你在其他地方找不到的。 此外，JavaScript是一門非常出色和靈活的語言。 如果你已經因為在瀏覽器中工作而熟悉JavaScript，那麼選擇Node.js就是显而易见的。 Node.js是事件驅動和單線程的 這是什麼意思？簡單來說，它可以很好地處理大量的負載。 每個Node.js程序都可以處理大量的並發連接，由於其非阻塞的I/O特性，仍然非常快速。 這意味著你擁有一切必要的工具來構建一個非常高效的系統。 Node.js非常受歡迎 這帶來了一些副作用。 首先，你會發現在線上討論任何類型的問題時都能找到解決方案。社區非常龐大且樂於助人。 它很容易入門，並且有很多可以學習的資源。 其次，有一個庫可以解決任何問題。 npm庫中有大量可以隨時使用的庫，只需運行一個簡單的npm install命令即可。 由於其受歡迎程度，一個惡性循環形成：你最喜歡的API可能只提供一個官方的Node.js庫，而其他語言可能根本就不被考慮，只能使用非官方的軟件包（質量不一）。 你可以輕鬆部署Node.js應用 有些編程環境需要專用的設置，即使是簡單的項目也是如此，因為沒有人為它們建立生態系統。 Heroku以簡化Rails應用程序開發而聞名，如今在Node.js中我們也有其他可比擬的解決方案。 我考慮的是Zeit Now。 當我需要一個能夠輕鬆設置一個示例Node.js應用程序並與世界共享的場所時，我會想到Glitch（提示：它也可以運行私有應用程序）。

在本文中，我們將介紹 JavaScript 中物件的 hasOwnProperty() 方法。 hasOwnProperty() 方法被調用在一個物件實例上，並接受一個字串作為參數。如果該物件有一個與參數字串相同名稱的屬性，它將返回 true。否則，它將返回 false。 以下是一個例子： const person = { name: 'Fred', age: 87 } person.hasOwnProperty('name') // 返回 true person.hasOwnProperty('job') // 返回 false

在本篇文章中，我們將介紹 JavaScript 的 propertyIsEnumerable() 方法，該方法可以用於檢查物件的屬性是否可被列舉。 此方法需要在物件實例上呼叫，並接受一個字串作為參數。如果該物件擁有一個名稱與參數字串相同的屬性，且該屬性是可列舉的，則返回 true；否則返回 false。 以下是一個示例： const person = { name: 'Fred' } Object.defineProperty(person, 'age', { value: 87, enumerable: false }) person.propertyIsEnumerable('name') // true person.propertyIsEnumerable('age') // false 這個示例中，我們定義了一個名為 person 的物件，該物件擁有一個可列舉的屬性 name，以及一個不可列舉的屬性 age。透過呼叫 propertyIsEnumerable() 方法，我們可以檢查 person 對象的屬性是否可列舉。結果顯示 name 可以被列舉，而 age 不可以。

學習最受歡迎的 JavaScript Linter 基礎知識，它可以協助你的程式碼遵守特定的語法規範，檢查程式碼中是否存在潛在問題的來源，以及程式碼是否符合你或你的團隊所定義的一套標準。 什麼是 Linter？ ESLint 全域安裝 ESLint 本地安裝 ESLint 在你喜愛的編輯器中使用 ESLint 常見的 ESLint 設定 Airbnb 程式碼風格指南 React 使用特定版本的 ECMAScript 強制使用嚴格模式 更進階的規則 在特定行上禁用規則 ESLint 是一個 JavaScript Linter。 什麼是 Linter？ 好問題！Linter 是一種用於檢查程式碼中問題的工具。 運行 Linter 可以告訴你許多事情： 程式碼是否遵從特定的語法規範 程式碼是否包含可能的問題來源 程式碼是否符合你或你的團隊所定義的一套標準 它會提出警告，你或你的工具可以分析這些警告並提供可行的數據，以改進程式碼。 ESLint ESLint 是用於 JavaScript 程式語言的 Linter，使用 Node.js 撰寫。 它非常有用，因為 JavaScript 是一種解釋語言，並且許多錯誤只有在運行時才能發現。 ESLint 將幫助你捕捉這些錯誤。你問的是哪些錯誤呢？ 避免在 for 迴圈條件中出現無窮迴圈 確保所有 getter 方法返回某些值 不允許使用 console.log（或類似）語句 檢查 switch 中的重複 case 檢查無法訪問的程式碼 檢查 JSDoc 的有效性 還有更多！完整列表請參閱 https://eslint.org/docs/rules/...

當你使用純 JavaScript 創建應用程序時，有時你會需要在用戶點擊連結時觸發一個函數。 你通常可以通過以下兩種方式來實現。 假設你要執行的函數叫做 handleClick()： function handleClick() { alert('被點擊了'); } 第一種方式是使用以下連結： <a href="#" onclick="handleClick()">點擊這裡</a> 第二種方式是使用以下連結： <a href="javascript:void(0)" onclick="handleClick()">點擊這裡</a> 這兩種方式的語法非常相似，唯一的區別在於 href 屬性的值。 第一種方式是 href="#"，第二種方式是 href="javascript:void(0)"。 你可能也會看到這種語法 href="javascript:;"，它與第二種方式等價。 那麼，這兩種方式的行為有什麼不同呢？ 當用戶點擊 href="#" 的連結時，你必須確保從事件處理程序中返回 false，否則瀏覽器會自動滾動到頁面頂部： function handleClick() { alert('被點擊了'); return false; } 此外，即使你添加了這個返回語句，但如果 JavaScript 被禁用或由於某些原因無法執行，瀏覽器仍會自動滾動到頁面頂部。這是一件幾乎總是要避免的事情，因此我個人會選擇使用第二種形式 href="javascript:void(0)"。 無論使用哪種方式，如果 JavaScript 被禁用或 JavaScript 中出現錯誤且 JavaScript 執行停止，則不會調用 handleClick() 函數。 為了防止這種情況，你可以在 href 中使用一個真實的 URL 作為後備方案，這樣瀏覽器將使用 GET HTTP 方法將用戶移動到特定頁面，儘管這不總是可能或方便。 但這是一種最佳實踐，而最佳實踐並不總是方便的，但你必須在應用程序設計階段考慮到它們，因為你不能只為理想情況構建應用程序，而忽略一切可能出錯的情況。 如果出了點問題，用戶會責怪你和你的壞連結 🙂

如何等待多个 Promise (使用 await) 同时解析 有时我们需要等待一个 Promise 解析，然后再等待另一个 Promise 解析。 就像这样： const values = await store.getAll() const keys = await store.getAllKeys() 这起作用，但不是理想的。我们首先等待第一个调用被解析，然后开始第二个。 我想先同时开始两个，并等待两个都完成。不多一毫秒。 解决方案是将所有内容封装在 await Promise.all() 调用中，像这样： const data = await Promise.all([store.getAll(), store.getAllKeys()]) 一旦这个解析完成，我们可以使用 data[0] 访问第一个调用的值，并使用 data[1] 访问第二个调用的返回值。

快速指南到npm，这是Node.js成功的重要组成部分。截至2017年1月，npm注册表中已有超过35万个软件包，使它成为地球上最大的单一语言代码仓库，你可以确信几乎任何东西都可以找到一个软件包。 介绍npm 安装 如何使用npm 安装所有依赖项 安装单个软件包 更新软件包 版本控制 运行任务 介绍npm npm是Node.js的标准包管理器。 截至2017年1月，npm注册表中已有超过35万个软件包，使它成为地球上最大的单一语言代码仓库，你可以确信几乎任何东西都可以找到一个软件包。 它最初是用于下载和管理Node.js软件包的依赖项，但现在也被用于前端JavaScript。 npm有许多功能。 Yarn是npm的一个替代方案，请确保也了解一下它。 安装 安装Node.js时也会安装npm。请前往https://nodejs.org安装Node，如果你还没有在系统上安装过它。 如何使用npm npm管理项目的所有依赖项的下载。 安装所有依赖项 如果项目有一个packages.json文件，在命令行中运行以下命令即可安装项目所需的所有依赖项： npm install 它将在node_modules文件夹中安装所有依赖项，并在需要时创建该文件夹。 安装单个软件包 你也可以通过以下命令安装一个特定的软件包： npm install <package-name> 通常会在此命令中添加更多标志： --save 将软件包安装并添加到package.json文件的dependencies中（从 npm 5 开始，此为默认行为）。 --save-dev 将软件包安装并添加到package.json文件的devDependencies中。 两者的区别主要在于，devDependencies通常用于开发工具，比如测试库，而dependencies会在生产环境中与应用程序一起打包。 更新软件包 更新软件包也很容易，只需运行以下命令： npm update npm会检查所有软件包，找到满足版本控制条件的较新版本。 你也可以指定更新某个特定软件包： npm update <package-name> 版本控制 除了下载功能，npm还可以管理版本控制，你可以指定软件包的任何特定版本，或要求高于或低于所需版本。 许多时候，你会发现某个库只与另一个库的主要版本兼容。 或者，最新版本中的一个未修复的错误导致了问题。 指定库的显式版本还有助于使每个人都使用完全相同的软件包版本，直到更新package.json文件为止。 在所有这些情况下，版本控制都很有帮助，npm遵循语义版本控制（semver）标准。 运行任务 package.json文件支持一种格式，用于指定可以使用以下命令运行的命令行任务： npm run <task-name> 例如： { "scripts": { "start-dev": "node lib/server-development", "start": "node lib/server-production" }, } 很常见使用此功能来运行Webpack：...

JavaScript 提供了一組 8 個錯誤物件，這些物件會根據錯誤類型在 try/catch 區塊中引發。它們分別是： Error EvalError RangeError ReferenceError SyntaxError TypeError URIError 我在JavaScript errors教程中對它們進行了分析。 在這裡，我想解釋如何通過擴展基本 Error 類別來創建自己的自訂錯誤： class OutOfFuelError extends Error {} class FlatTireError extends Error {} 自訂錯誤物件能根據特定的錯誤類型以不同的方式進行處理，而不需要使用錯誤訊息來瞭解錯誤的類型。 try { // 一些程式碼 } catch (err) { if (err instanceof OutOfFuelError) { // 處理錯誤方式 } else if (err instanceof FlatTireError) { // 處理錯誤方式 } } 在你的程式碼中，自訂錯誤必須明確地拋出才能執行上述動作： try { const car = new Car() // 假設我們有一個 Car 物件 if (!car.fuel) { throw new OutOfFuelError('沒有燃料！') } if (car....

簡介 在瀏覽器中的 JavaScript 使用事件驅動的程式設計模型。 一切都是從遵循事件開始。 事件可能是 DOM 載入完成，或一個非同步請求完成取得資源，或是使用者點擊元素或滾動頁面，或是使用者在鍵盤上輸入等等。 有很多不同種類的事件。 事件處理程序 您可以使用事件處理程序來回應任何事件，它是在事件發生時呼叫的函式。 您可以為同一個事件註冊多個處理程序，當該事件發生時，它們都將被呼叫。 JavaScript 提供三種方式來註冊事件處理程序： 內聯事件處理程序 這種風格的事件處理程序很少被使用，因為它的限制，但在 JavaScript 的早期，這是唯一的方式: <a href="site.com" onclick="dosomething();">A link</a> DOM on-event 處理程序 這通常用於只有一個事件處理程序的對象上，因為在這種情況下無法添加多個處理程序： window.onload = () => { //window loaded } 在處理 XHR 請求時最常遇到： const xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { //.. do something } 您可以使用 if ('onsomething' in window) {} 檢查是否已經為屬性指定了處理程序。 使用 addEventListener() 這是現代的方式。這種方法允許我們註冊所需數量的處理程序，並且這是最常見的方式： window.addEventListener('load', () => { //window loaded }) 注意，IE8 及更低版本不支援這種方式，而是使用自己的 attachEvent() API。如果需要支援較早的瀏覽器，請牢記這一點。...