」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 解鎖 JavaScript 的超能力:變數的魔力

解鎖 JavaScript 的超能力:變數的魔力

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

Unlocking JavaScript Superpowers: The Magic of Variables

從今天開始,我們將發現一個編程的世界。 你擁有超能力的世界。是的,你沒看錯,超能力。如果不是超能力,那又是什麼?使用 JavaScript,您可以讓物體飛行、移動、消失、改變顏色,並在數英里之外看到您的朋友,而這只是可能的一小部分。是的,一切都在你的螢幕上,但仍然非常令人興奮。
像任何超級英雄一樣,你需要很好地控制和了解自己的力量。為此,讓我們從熟悉最基本的構建塊——全能的變數開始我們的旅程。
什麼是變數?想像一下一個神奇的盒子,您可以在其中放置任何您想要的東西,無論大小!多麼了不起的發明,對吧?但問題是:它一次只能容納一件東西(說實話,不是任何尺寸,但我們現在假裝情況並非如此)。
你可以放一支筆、一頭大象、一把吉他、一個放著一堆書的書架,甚至一張寫有一本小說的紙——任何你想要的東西——但一次只能放一件東西。
我們如何用 JavaScript 創建這樣一個盒子?太簡單了!

let ourFirstBox

簡單的兩個字。第一個始終是「let」關鍵字,第二個是方塊的名稱。您可以將“let”視為一個神奇的關鍵字,它可以讓我們建立一個盒子。名稱可以是任何名稱,但有一些規則。
有硬性規則(如果你不遵守它們,你的魔法將不起作用)。
以及軟規則(主要是最佳實踐,整個產業標準化)。
讓我們從硬性規則開始:

  1. 如果希望名稱由多個單字組成,則不能用空格分隔。
  2. 變數名稱不能以數字開頭。 現在是軟規則:
  3. 您應該使用稱為駝峰命名法的表示法。第一個字母總是小寫,所有後續單字都以大寫字母開頭,沒有空格。
  4. 變數應該是名詞。
  5. 如果你想儲存包含多個項目的東西(例如,一袋蘋果),你應該使用複數名詞,例如 bagOfApples。
  6. 避免在變數名稱中使用數字。

好的。現在我們有一個盒子。我們如何將任何東西放入其中?讓我們來看一個例子:

let ourFirstBox;
ourFirstBox = 100;

就這樣!您建立一個新行,重複變數的名稱,但這次沒有神奇的“let”關鍵字,因為我們只需要它來建立變數。在名稱後面放置一個等號,這是賦值運算子。使用 = 符號,我們表示要在變數中放入一些內容,然後在其後面,將要儲存的內容放入「盒子」中。
現在,我們有一個儲存數字的盒子。目前,它並不像看起來那麼有用,但相信我,我們正在慢慢實現這一目標。
我們神奇盒子的另一個特點是你可以隨時更換裡面的物品。

let ourFirstBox;
ourFirstBox = 100;
ourFirstBox = 200;

現在 ourFirstBox 內的值為 200。
創建變數有兩種方法。您可以先定義名稱,然後在新行中為其指派值。或者,您可以一次完成所有操作:

let ourFirstBox = 100;

這裡我們使用關鍵字let來定義變量,同時給它賦值。
還有另一種類型的“盒子”。它被稱為常數。顧名思義,它是一種無法改變的變數。一旦你給了它一個值,那就是它了——你無法替換它。

const ourFirstConstantBox = 200;

如果我們嘗試更改其值,我們將收到錯誤:

const ourFirstConstantBox = 200;
ourFirstConstantBox = 100; // Error!!!!!

現在您知道如何建立變數了!在下一課中,我們將使用很多變數。

版本聲明 本文轉載於:https://dev.to/edwardfedoruk/unlocking-javascript-superpowers-the-magic-of-variables-2nga?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何在Python中自訂輸入的預設值?
    如何在Python中自訂輸入的預設值?
    在Python 中自訂輸入的預設值在Python 中,預設輸入指令(input()) 可讓您擷取使用者輸入。但是,您可能希望提供一個使用者可以編輯或接受的預設值。 令人驚訝的是,標準輸入函數 input() 和 raw_input() 缺乏此功能。這是一個利用 readline 模組的解決方案。 r...
    程式設計 發佈於2024-11-06
  • 用 puppeteer 抓取網路!
    用 puppeteer 抓取網路!
    木偶师完整指南 pt.1 Puppeteer:Web 自动化的强大工具 在当今快节奏的 Web 开发环境中,自动化是关键,这就是 Puppeteer 的用武之地。Puppeteer 由 Google 开发,是一个功能强大的 Node.js 库,允许开发人员使用 Ja...
    程式設計 發佈於2024-11-06
  • 調試模式:Django Docker Pycharm
    調試模式:Django Docker Pycharm
    讓您的本地設定正確調試您正在編寫的程式碼所花費的時間比任何開發人員都願意承認的要多。我們不要忘記,這主要是一個一次性完成的設置,所以如果我們不寫下來,我們就不會記得。這篇文章就是為了解決這個確切的問題! 將此作為如何啟動和運行本地開發環境的書面提醒。 先決條件: PyCharm ...
    程式設計 發佈於2024-11-06
  • # 用可重複使用函數取代通用驗證
    # 用可重複使用函數取代通用驗證
    JavaScript 和 TypeScript 開發人員經常發現自己重複編寫相同的條件。如果您是 Web 開發人員,您可能遇到過這樣的程式碼: const handleSaveTextKeydown = (event: KeyboardEvent) => { if (event.key ...
    程式設計 發佈於2024-11-06
  • Effect-TS 中的過濾選項:實用指南
    Effect-TS 中的過濾選項:實用指南
    Effect-TS 提供了各種方法來過濾選項內的值,讓您可以對可選值套用轉換、謂詞或檢查。這些函數有助於確保僅保留相關數據,同時丟棄 None 值或不符合指定條件的值。在本文中,我們將探討用於過濾選項的四個關鍵函數:O.partitionMap、O.filterMap、O.filter 和 O.ex...
    程式設計 發佈於2024-11-06
  • 如何根據條件布林邏輯取代Python列表中的元素?
    如何根據條件布林邏輯取代Python列表中的元素?
    Python 列表替換為條件布爾邏輯給定一個值列表,您可能希望根據健康)狀況。條件由函數condition()定義,可以根據元素的值來決定是否要替換元素。本題探討了在Python中實現這種替換的不同方法,同時提供了替換奇數元素的範例條件。 解決方案1:列表理解最有效的方法執行此替換是利用列表理解。此...
    程式設計 發佈於2024-11-06
  • 如何根據 Python 中的條件取代清單中的值?
    如何根據 Python 中的條件取代清單中的值?
    Python 中根據條件替換清單中的值在Python 中,您可能會遇到需要操作清單中元素的情況清單,例如根據特定條件替換值。透過利用有效的技術,您可以有效地執行這些修改。 一種方法涉及利用列表理解。例如,如果您有一個列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 並且想要替...
    程式設計 發佈於2024-11-06
  • 如何使用 Docker Scratch 在 Golang 中建立靜態二進位檔案:CGO_ENABLED=0 和 -ldflags?
    如何使用 Docker Scratch 在 Golang 中建立靜態二進位檔案:CGO_ENABLED=0 和 -ldflags?
    在Golang 中建立靜態二進位檔案的標誌當使用Docker 暫存庫在Golang 中建立靜態二進位檔案時,必須包含CGO_ENABLED =0 和-ldflags '-extldflags "-static"' 標誌。雖然這兩個選項可能看起來多餘,但它們在實現靜...
    程式設計 發佈於2024-11-06
  • 我可以將行追加到 CSV 檔案而不覆蓋它嗎?
    我可以將行追加到 CSV 檔案而不覆蓋它嗎?
    在Python 中向現有CSV 檔案追加新行:一種更有效的方法當您需要使用附加行更新CSV文件時,您可能會考慮以下問題:問: 是否可以向現有CSV 文件添加新行,而無需覆蓋和重新創建文件? 答: 絕對!以下是將行追加到 CSV 檔案的更有效方法:您可以利用Python 中的 with 語句。 以下程...
    程式設計 發佈於2024-11-06
  • Nestjs、Firebase、GCloud。如何在 TypeScript 中快速設定 API 後端。
    Nestjs、Firebase、GCloud。如何在 TypeScript 中快速設定 API 後端。
    It's great that you decided to open this article. My name is Fedor, and I've been a full-stack developer on a permanent basis since the end of 2021. J...
    程式設計 發佈於2024-11-06
  • 如何在維護非同步操作的同時避免鍊式函數中的 jQuery Promise?
    如何在維護非同步操作的同時避免鍊式函數中的 jQuery Promise?
    在鍊式函數中迴避jQuery Promise儘管建議避免jQuery Promise,但開發人員在不使用jQuery 的情況下鏈接非同步jQuery 函數時可能會面臨挑戰Promise 處理機制,如.then() 或.when()。為了解決這個問題,請考慮以下方法:jQuery Promise 可以...
    程式設計 發佈於2024-11-06
  • 為什麼「repr」方法在 Python 中至關重要?
    為什麼「repr」方法在 Python 中至關重要?
    探討repr方法的意義在Python程式設計的脈絡中,repr 方法在將物件表示為字串方面起著關鍵作用。這種簡潔而詳細的表示有多種用途:repr的目的方法:repr的主要目標方法的目的是傳回一個物件的字串表示形式,該物件既是人類可讀的,而且重要的是,是明確的。這種表示法應該足以重新建立具有相同狀態和...
    程式設計 發佈於2024-11-06
  • 每個開發人員都應該了解可擴展和高效應用程式的頂級 React 設計模式
    每個開發人員都應該了解可擴展和高效應用程式的頂級 React 設計模式
    隨著 React 繼續主導前端生態系統,掌握其設計模式可以顯著提高應用程式的效率和可擴展性。 React 設計模式提供了組織和建置元件、管理狀態、處理 props 和提高可重複使用性的最佳實踐。在本部落格中,我們將探討一些關鍵的 React 設計模式,這些模式可以讓您的開發流程從優秀走向卓越。 ...
    程式設計 發佈於2024-11-06
  • 在 React 中建立無限滾動元件
    在 React 中建立無限滾動元件
    介绍 我们在应用程序和网页中看到无限滚动,尤其是希望我们滚动的社交媒体。虽然无意识地滚动不好,但构建自己的无限滚动是很棒的。作为开发人员,我们应该尝试重新创建我们在网上冲浪时看到的组件。它可以挑战您在实现某些组件时了解更多信息并跳出框框进行思考。 此外,如果您希望在应用程序中实现无...
    程式設計 發佈於2024-11-06
  • 在 React 中建立響應式會議圖塊的動態網格系統
    在 React 中建立響應式會議圖塊的動態網格系統
    In the era of remote work and virtual meetings, creating a responsive and dynamic grid system for displaying participant video tiles is crucial. Inspi...
    程式設計 發佈於2024-11-06

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

Copyright© 2022 湘ICP备2022001581号-3