这将是一个很长的阅读,但让我再说一遍。
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
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3