」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > Javascript 很難(有悲傷)

Javascript 很難(有悲傷)

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

Javascript is HARD (with ESadness)

这将是一个很长的阅读,但让我再说一遍。
JAVASCRIPT很难。上次我们见面时,我正在踏入 Javascript 的世界,一个眼睛明亮、充满希望的程序员踏入野生丛林,说“这能有多难?”。我错得有多离谱??事情变得更难了,我(勉强)活了下来,这是关于我的旅程的一个小混乱的故事。

变量:疯狂的开始
变量是保存值的容器,您可以在其中存储或操作数据。我的意思是,为什么我们有 3 种方法来创建它们:var、let 和 const?为什么? 在 ES6 中笑
var:他们说 var 是一门松散的大炮。就像玩机会游戏一样。别靠近它。
let:非常适合可以更改的变量。更容易管理。
Const:用于保持不变的值。不可移动的。哦 - const 并不意味着该值不能改变,它只是意味着你不能重新分配它。
注: ECMAScript 2015 或 ES6 是 JavaScript 的第二次重大修订。
哦,我们告别了字符串连接,你好模板文字。使用模板文字您现在可以使用反引号并通过 ${} 轻松嵌入变量。生活在这里变得容易了一些,但是弄清楚何时使用反引号和引号?又一个脑洞大开的。

// Good old concat
const message = "Hi, "   name   ". You are "   age   " years old.";
// Template literal
const message = `Hi, ${name}! You are ${age} years old.`;

功能:又名可重用性先生、可维护性先生...
函数是执行任务的一组语句。由函数关键字、函数名、是否有参数、大括号内的Js语句组成。

function greet() {
  console.log("Hello, fellow strugglers?!");
}

它们一开始看起来很简单:封装一些逻辑,调用它(我说调用它),然后繁荣!你正在编码。
然后ES6说“这是箭头函数,使用它”。箭头函数看起来很简单吧?只是编写函数的一种简短方法。花了一段时间我才掌握了语法。

const greet = () => {
   console.log("Hello, fellow strugglers?!");
}

循环:与无限共舞。
受苦的多种方式。循环可以多次执行一段代码。如果您想一遍又一遍地运行相同的代码,并且每次都使用不同的值,那么它们很方便。他们有很多:
1. While Loop:只要条件为真就一直循环。邪恶的。我不是在谈论它的表弟 do-while。
2. for 循环: 好老的 for 循环,老兄。值得信赖的 for 循环。如此熟悉。非常安全,并且当您忘记递增变量时很有可能引发无限循环。
3. forEach: 这就像 for 循环更酷、更时髦的表弟。它不需要计数器,也不会让我走向无限。我的男人。
4. & 5. for..in 和 for..of:一个非常适合循环对象,另一个则用于迭代数组。我不断地把它们混在一起,并通过痛苦来学习。还在学习中。

//for loop
for (let i = 0; i  console.log(num));

数组:不断寻找的列表
数组一开始很有希望。一个简单的项目列表。把东西推进去,把东西拉出来。很简单吧?

let shoppingList = ["apples", "bananas", "chocolate"];
shoppingList.push("ice cream");
console.log(shoppingList); // ['apples', 'bananas', 'chocolate', 'ice cream']

输入filter、map、find以及数组方法组的其余部分。从那以后我的大脑就不一样了。
filter() 方法创建一个新数组,其中填充了通过函数提供的测试的元素。
find() 方法返回通过测试的第一个元素的值。数组方法太多了,每个方法都需要文档吗?我的意思是有长度、拼接、切片、连接、弹出、推送、unshift、shift、map..,让我们到此为止。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

对象:数组的令人困惑的表亲
然后是物体。对象有点像数组,但具有键和值。我当时想,“酷,我能处理这个。”但后来 JavaScript 引入了方法,突然间对象就可以自己做事了。然后对象数组就进入了方程式。访问属性我使用点符号或方括号符号。别让我从 .this
开始

//Without method
let shoppingCart = {
  apples: 3,
  bananas: 2,
  chocolate: 1
};
// with method
let cart = {
  items: ["apple", "banana"],
  addItem(item) {
    this.items.push(item);
  }
};
cart.addItem("chocolate");
console.log(cart.items); // ['apple', 'banana', 'chocolate']

DOM 操作:真正的斗争开始的地方
一旦我对数组和对象充满信心,我就想:“是时候操作 DOM 了!我现在几乎是一名网络开发人员了!”耶哥蕊特有句名言,你什么都不知道。
这应该很容易,我又说了一遍。只需抓取一个元素并更改它即可。如果它是一个 ID,getElementbyId 就适合我。 getElementsbyClassName 类也存在,或者是 queryselector 以及其所有兄弟的类。
然后就是整个 addEventListener 业务。当然,这确实有效,但有时,事件似乎有自己的想法一样。
然后我尝试创建一个购物车。我花了几天的时间,向我博学的同事发出了很多求救信号。这里我是appendChild、removeChild、createElements、抓取元素、设置属性、样式、在函数上调用函数。
然后大胆的添加了mock数据库;我又和数组操作了。我正在访问,我正在推动,我正在寻找,我累了(再次站起来)。

进出口:大胆分享疯狂??
在某个时候,我编写了太多的 JavaScript,以至于我需要模块化我的代码。输入导入和导出。

Copy code
// module.js
export function greet() {
  console.log("Hello from the module!");
}

// main.js
import { greet } from './module.js';
greet();

我认为将我的代码分成更小的部分会让事情变得更容易。我几乎不知道,我最终会陷入一片混乱。

现在我要开始面向对象编程(OOP)听起来很花哨,但是让我先享受我的周末,然后再迷路。
感谢您坚持到最后。目标仍然是每天进步 1%。 #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode

版本聲明 本文轉載於:https://dev.to/rockhillz/javascript-is-hard-with-es6-madness-47j9?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何在Python中對列表進行減法?
    如何在Python中對列表進行減法?
    列表相減:計算差值Python 中的列表可以包含各種元素。為了對列表執行數學運算(例如減法),我們採用特定的方法或技術。讓我們探討如何從一個清單中減去另一個清單。 使用列表理解進行逐元素減法一種方法是利用列表理解,它會迭代第一個列表併計算差異,同時保留原始順序:[item for item in x...
    程式設計 發佈於2024-11-06
  • 如何在 Python 中檢查生成器是否為空?
    如何在 Python 中檢查生成器是否為空?
    偵測空產生器初始化在Python中,產生器是一次產生一個值的迭代器。因此,從一開始就確定發電機是否為空可能是一個挑戰。與列表或元組不同,生成器沒有固有的長度或 isEmpty 方法。 解決挑戰為了解決這個問題,常見的方法是使用輔助函數查看生成器中的第一個值而不消耗它。如果 peek 函數傳回 Non...
    程式設計 發佈於2024-11-06
  • ## 想從Python高效呼叫Java?探索 Py4J 作為 JPype 的替代品!
    ## 想從Python高效呼叫Java?探索 Py4J 作為 JPype 的替代品!
    從 Python 呼叫 Java:Py4J 作為 JPype 的替代品從 Python 呼叫 Java 程式碼有幾個潛在的解決方案。其中一個選項 JPype 可能難以編譯,並且由於缺乏最新版本而顯得不活躍。 然而,另一種解決方案是Py4J,這是一個簡單的庫,提供了一個方便的接口,用於從Python ...
    程式設計 發佈於2024-11-06
  • 小Swoole資料庫
    小Swoole資料庫
    Small Swoole Db 2.3引入左連接: $selector = (new TableSelector('user')) ->leftJoin('post', 'messageOwner', 'message') ; $selector->where() -&g...
    程式設計 發佈於2024-11-06
  • 如何使用組譯指令最佳化 __mm_add_epi32_inplace_purego 函數,以在位置總體計數操作中獲得更好的效能?
    如何使用組譯指令最佳化 __mm_add_epi32_inplace_purego 函數,以在位置總體計數操作中獲得更好的效能?
    使用程序集優化 __mm_add_epi32_inplace_purego此問題旨在優化 __mm_add_epi32_inplace_purego 函數的內部循環,該函數對位元組數組執行位置填充計數。目標是透過利用彙編指令來提高效能。 內部循環的原始Go 實作: __mm_add_epi32...
    程式設計 發佈於2024-11-06
  • 使用 React Router 進行導航 React Js 第一部分 React 應用程式中的路由指南
    使用 React Router 進行導航 React Js 第一部分 React 應用程式中的路由指南
    歡迎回到我們的 React 系列!在先前的文章中,我們介紹了元件、狀態、道具和事件處理等基本概念。現在,是時候使用 React Router 探索 React 應用程式中的路由了。路由允許您在應用程式內的不同視圖或元件之間導航,從而創建無縫的使用者體驗? . 什麼是 React 路由...
    程式設計 發佈於2024-11-06
  • file_get_contents() 可以用於 HTTP 檔案上傳嗎?
    file_get_contents() 可以用於 HTTP 檔案上傳嗎?
    使用 HTTP Stream Context 透過 file_get_contents() 上傳檔案使用 cURL 擴充功能可以無縫地實作透過 Web 表單上傳檔案。不過,也可以使用 PHP 的 file_get_contents() 函數結合 HTTP 流上下文來執行檔案上傳。 Multipart...
    程式設計 發佈於2024-11-06
  • React 中的 UseEffect
    React 中的 UseEffect
    歡迎 React Hooks 的世界!今天,我們將深入探討最受歡迎的掛鉤之一:useEffect。別擔心,我們會讓它變得有趣且易於理解。那麼,就讓我們開始吧! ? ?什麼是useEffect useEffect 是一個 React Hook,可讓您在功能元件中執行副作用。副作用是在元件外部發生的操...
    程式設計 發佈於2024-11-06
  • 如何在 Google Cloud Platform 免費層上建立現代資料平台
    如何在 Google Cloud Platform 免費層上建立現代資料平台
    我在 Medium.com 上發布了一系列七篇免費公開文章「如何在 Google Cloud Platform 免費層上建立現代資料平台」。 主要文章位於:https://medium.com/@markwkiehl/building-a-data-platform-on-gcp-0427500f...
    程式設計 發佈於2024-11-06
  • 貼文 #f 掙扎
    貼文 #f 掙扎
    這篇文章是關於我迄今為止在編碼和學習方面的掙扎 一個。我只能保持專註一個小時,最多兩個小時。 b.我很容易分心 c.我不能久坐,否則我會開始感到煩躁和休息腿部問題。 我想到的有助於解決問題的解決方案 一個。我需要開始更頻繁地使用我的番茄工作法應用程式 B. 我開始將手機調成震動,如果我有另一個螢...
    程式設計 發佈於2024-11-06
  • 面向 Web 開發人員的熱門 Chrome 擴充功能 4
    面向 Web 開發人員的熱門 Chrome 擴充功能 4
    2024 年最適合 Web 開發者的 10 款 Chrome 擴展 隨著 2024 年的進展,Chrome 擴充功能已成為 Web 開發人員工具包中不可或缺的一部分,在瀏覽器中提供強大的功能。在這篇文章中,我們將探討今年在 Web 開發社群掀起波瀾的 10 大 Chrome 擴充功...
    程式設計 發佈於2024-11-06
  • 如何使用 React Router v4/v5 巢狀路由:簡化指南
    如何使用 React Router v4/v5 巢狀路由:簡化指南
    React Router v4/v5 的嵌套路由:簡化指南使用React Router 時,嵌套路由是組織的關鍵技術您的應用程式的導航。然而,新手經常面臨設定嵌套路由的挑戰。本文旨在簡化使用 React Router v4/v5 的流程。 React Router v4 在路由嵌套方式上引入了重大轉...
    程式設計 發佈於2024-11-06
  • 如何使用 UTF8 字元編碼保留 MySQL 中的表格式?
    如何使用 UTF8 字元編碼保留 MySQL 中的表格式?
    使用UTF8 字元編碼增強MySQL 命令列格式使用儲存在資料庫表中的瑞典語和挪威語字串時,查詢資料時可能會遇到表格式問題使用不同的字元集。 問題陳述預設情況下,使用「set names latin1;」產生失真的輸出: ----------------------------------- | ...
    程式設計 發佈於2024-11-06
  • CSS 盒子模型
    CSS 盒子模型
    CSS 盒子模型是 Web 開發中的一個基本概念,它構成了 Web 佈局和設計的基礎。它決定了元素的大小、內容的呈現方式以及它們如何在網頁上相互互動。掌握盒模型對於任何使用 HTML 和 CSS 的開發人員來說都是至關重要的,因為它會影響元素的顯示、間隔和對齊方式。 在本文中,我們將詳細探討 CS...
    程式設計 發佈於2024-11-06
  • 我如何寫 CSS 選擇器
    我如何寫 CSS 選擇器
    有很多 CSS 方法,但我討厭它們。有些多(順風等),有些少(BEM、OOCSS 等)。但歸根結底,它們都有缺陷。 當然,人們使用這些方法有充分的理由,並且解決的許多問題我也遇到過。因此,在這篇文章中,我想寫下我自己的關於如何保持 CSS 組織的指南。 這不是任何人都可以開始使用的完整描述的 C...
    程式設計 發佈於2024-11-06

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

Copyright© 2022 湘ICP备2022001581号-3