Javascript 很难（有悲伤）

Das wird eine lange Lektüre, aber lassen Sie es mich noch einmal sagen.
JAVASCRIPT ist schwierig. Als wir uns das letzte Mal trafen, betrat ich die Welt von Javascript, ein strahlender, hoffnungsvoller Programmierer, der in den wilden Dschungel trat und sagte: „Wie schwer könnte es sein?“. Wie falsch lag ich? Es wurde schwieriger, ich überlebe (knapp), hier ist eine kleine chaotische Geschichte über meine Reise.

Variablen: Beginn des Wahnsinns
Variablen sind Container, die Werte enthalten und in denen Sie Daten speichern oder bearbeiten. Ich meine, warum haben wir drei Möglichkeiten, sie zu erstellen: var, let und const? Warum? Lachen in ES6.
Var: Sie sagten, Var sei eine lose Kanone. als würde man ein Glücksspiel spielen. Gehen Sie ihm nicht zu nahe.
let: Ideal für Variablen, die sich ändern können. Einfacher zu verwalten.
Const: steht für Werte, die gleich bleiben. unbeweglich. Ohh – const bedeutet nicht, dass sich der Wert nicht ändern kann, sondern nur, dass Sie ihn nicht neu zuweisen können.
Hinweis: ECMAScript 2015 oder ES6 war die zweite große Überarbeitung von JavaScript.
Oh, wir haben uns von der String-Verkettung verabschiedet, Hallo Template-Literale. Mit Template-Literalen können Sie jetzt Backticks verwenden und Variablen problemlos mit ${} einbetten. Das Leben ist hier etwas einfacher geworden, aber wissen Sie, wann man Backticks statt Anführungszeichen verwenden sollte? Ein weiterer Geistesbrecher.

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

Funktionen: AKA Mr. Wiederverwendbarkeit, Mr. Wartbarkeit...
Eine Funktion ist eine Reihe von Anweisungen, die eine Aufgabe ausführen. Besteht aus dem Funktionsschlüsselwort, dem Funktionsnamen, dem Parameter oder nicht, der Js-Anweisung in geschweiften Klammern.

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

Auf den ersten Blick schienen sie einfach zu sein: eine Logik einkapseln, sie aufrufen (ich sage „invoke it“) und bumm! Du codierst.
Dann sagte ES6: „Das sind Pfeilfunktionen, verwenden Sie sie.“ Pfeilfunktionen sehen einfach aus, oder? Nur eine kurze Möglichkeit, Funktionen zu schreiben. Es hat eine Weile gedauert, bis ich die Syntax verstanden habe.

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

Loops: Tanzen mit dem Unendlichen.
Die vielen Arten zu leiden. Schleifen können einen Codeblock mehrmals ausführen. Sie sind praktisch, wenn Sie denselben Code immer wieder ausführen möchten, jedes Mal mit einem anderen Wert. Es gibt viele:
1. While-Schleife: wird so lange wiederholt, wie die Bedingung erfüllt ist. Teuflisch. und ich spreche nicht von seinem Cousin, do-while.
2. for-Schleife: Gute alte for-Schleife, mein Mann. die vertrauenswürdige for-Schleife. So vertraut. So sicher und voller Potenzial, Endlosschleifen auszulösen, wenn Sie vergessen, eine Variable zu erhöhen.
3. forEach: Das ist wie der coolere, hipsterere Cousin der for-Schleife. Es braucht keine Zähler, bringt mich nicht ins Unendliche. mein Mann.
4. & 5. for..in und for..of: Das eine eignet sich hervorragend zum Durchlaufen von Objekten, das andere ist zum Durchlaufen von Arrays gedacht. Ich vermische sie immer wieder und lerne durch den Schmerz. Ich lerne immer noch.

//for loop
for (let i = 0; i < 10; i++) {
  console.log(i); // Simple. Right? RIGHT?!
}

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

Arrays: Die Liste, die weiter jagt
Arrays begann so vielversprechend. Eine einfache Liste von Elementen. Schieben Sie Dinge hinein und ziehen Sie Dinge heraus. Ganz einfach, oder?

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

Geben Sie Filter, Map und Find sowie den Rest der Array-Methodengruppe ein. Mein Gehirn ist seitdem nicht mehr dasselbe.
Die Methode filter() erstellt ein neues Array mit Elementen, die einen von einer Funktion bereitgestellten Test bestehen.
Die Methode find() gibt den Wert des ersten Elements zurück, das einen Test besteht. Es gibt so viele Array-Methoden, dass ich für jede eine Dokumentation benötige? Ich meine, es gibt Länge, Splice, Slice, Join, Pop, Push, Unshift, Shift, Map ..., lass uns hier aufhören.

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

Objekte: Der verwirrende Cousin von Arrays
Dann kamen Gegenstände. Objekte ähneln Arrays, verfügen jedoch über Schlüssel und Werte. Ich dachte: „Cool, ich komme damit klar.“ Aber dann fügte JavaScript Methoden hinzu, und plötzlich erledigten Objekte ihre eigenen Aufgaben. Und dann kam eine Reihe von Objekten in die Gleichung. Beim Zugriff auf Eigenschaften verwende ich entweder die Punktnotation oder die Klammernotation. Und lassen Sie mich nicht mit .this
anfangen

//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 Manipulation: Where the Real Struggles Began
Once I felt confident with arrays and objects, I thought, “Time to manipulate the DOM! I’m practically a web developer now!” You know nothing, Ygritte famously said.
This should be easy, i said again. Just grab an element and change it. If its an ID, getElementbyId is there for me. A class getElementsbyClassName is also there or queryselector and the one with All its brother.
And then there’s this whole addEventListener business. Sure, it works, but sometimes, events seem to fire off like they have a mind of their own.
Then i tried creating a shopping cart. Took me days and lots of SOS signal to my learned colleagues. Here I'm appendChild, removingChild, creatingElements, grabbing elements, setting attributes, styling, calling functions upon functions.
Then boldly added a mock database; me and array manipulation again. I'm accessing, I'm pushing, I'm finding, I'm tired (gets up again).

Imports and Exports: Boldly sharing the Madness??
At some point, I had written so much JavaScript that I needed to modularize my code. Enter import and export.

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

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

I thought breaking my code into smaller pieces would make it easier. Little did I know, I would end up importing a mountain of confusion.

Now I'm about to start Object-Oriented Programming (OOP) sounds fancy, But let me enjoy my weekend first before i get lost again.
Thanks for staying till the end. The goal still remains 1% better everyday. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode

以上是Javascript 很难（有悲伤）的详细内容。更多信息请关注PHP中文网其他相关文章！