> 웹 프론트엔드 > JS 튜토리얼 > Javascript는 어렵습니다(ESadness 포함).

Javascript는 어렵습니다(ESadness 포함).

DDD
풀어 주다: 2024-09-27 06:27:02
원래의
351명이 탐색했습니다.

Javascript is HARD (with ESadness)

Ce sera une longue lecture mais permettez-moi de le répéter.
JAVASCRIPT est difficile. La dernière fois que nous nous sommes rencontrés, j'entrais dans le monde de Javascript, un codeur aux yeux brillants et plein d'espoir entrant dans la jungle sauvage en disant "Est-ce que ça pourrait être difficile ?". À quel point j'avais tort ??. C'est devenu plus difficile, je survis (à peine), voici une petite histoire chaotique de mon parcours.

Variables : début de folie
Les variables sont des conteneurs contenant des valeurs, dans lesquels vous stockez ou manipulez des données. Je veux dire, pourquoi avons-nous 3 façons de les créer : var, let et const ? pourquoi ? rire en ES6.
var : Ils ont dit que var était un canon lâche. comme jouer à un jeu de hasard. Ne vous en approchez pas.
let : Idéal pour les variables qui peuvent changer. Plus facile à gérer.
Const : concerne les valeurs qui restent les mêmes. immeuble. Ohh — const ne signifie pas que la valeur ne peut pas changer, cela signifie simplement que vous ne pouvez pas la réaffecter.
Remarque : ECMAScript 2015 ou ES6 était la deuxième révision majeure de JavaScript.
Ooh, nous avons dit au revoir à la concaténation de chaînes, bonjour aux littéraux de modèles. Avec les littéraux de modèle, vous pouvez désormais utiliser des backticks et intégrer facilement des variables avec ${}. La vie est devenue un peu plus facile ici, mais savoir quand utiliser les guillemets plutôt que les guillemets ? Un autre hallucinant.

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

Fonctions : AKA M. Réutilisabilité, M. Maintenabilité...
Une fonction est un ensemble d'instructions qui exécutent une tâche. Se compose du mot-clé de fonction, du nom de la fonction, du paramètre ou non, de l'instruction Js entre accolades.

function greet() {
  console.log("Hello, fellow strugglers?!");
}
로그인 후 복사

Ils semblaient simples au début : encapsuler une certaine logique, appeler-le (je dis l'invoquer), et boum ! Vous codez.
Ensuite, ES6 a dit "Ceci sont des fonctions fléchées, utilisez-les". Les fonctions fléchées semblent simples, non ? Juste une courte façon d’écrire des fonctions. J'ai mis du temps à comprendre la syntaxe.

const greet = () => {
   console.log("Hello, fellow strugglers?!");
}
로그인 후 복사

Boucles : Danser avec l'Infini.
Les nombreuses façons de souffrir. Les boucles peuvent exécuter un bloc de code plusieurs fois. Ils sont pratiques si vous souhaitez exécuter le même code encore et encore, à chaque fois avec une valeur différente. Ils sont nombreux :
1. While Loop : continue de boucler tant que la condition est vraie. Mal. et je ne parle pas de son cousin, fais-en attendant.
2. for Loop : Bon vieux for loop, mon homme. la fidèle boucle for. Si familier. Si sûr et si plein de potentiel pour lancer des boucles infinies lorsque vous oubliez d'incrémenter une variable.
3. forEach : qui est comme le cousin plus cool et plus hipster de la boucle for. Cela n’a pas besoin de compteurs, cela ne m’amène pas à l’infini. mon homme.
4. & 5. for..in et for..of : l'un est idéal pour parcourir des objets en boucle, l'autre est destiné à parcourir des tableaux. Je continue de les mélanger et j'apprends dans la douleur. j'apprends encore.

//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 : La liste qui continue de chasser
Les tableaux ont commencé de manière si prometteuse. Une simple liste d'éléments. Poussez les choses, retirez les choses. Facile, non ?

let shoppingList = ["apples", "bananas", "chocolate"];
shoppingList.push("ice cream");
console.log(shoppingList); // ['apples', 'bananas', 'chocolate', 'ice cream']
로그인 후 복사

Entrez filter, map et find et le reste du groupe de méthodes de tableau. Mon cerveau n’est plus le même depuis.
La méthode filter() crée un nouveau tableau rempli d'éléments qui réussissent un test fourni par une fonction.
La méthode find() renvoie la valeur du premier élément qui réussit un test. Les méthodes de tableau sont tellement nombreuses, j'ai besoin de documentation pour chacune ?, je veux dire qu'il y a length, splice, slice, join, pop, push, unshift, shift, map.., arrêtons-nous ici.

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

로그인 후 복사

Objets : le cousin déroutant des tableaux
Puis vinrent les objets. Les objets sont un peu comme des tableaux, mais avec des clés et des valeurs. Je me disais : « Cool, je peux gérer ça. » Mais ensuite, JavaScript a ajouté des méthodes et, tout à coup, les objets ont fait les choses par eux-mêmes. Et puis un ensemble d’objets est entré dans l’équation. Pour accéder aux propriétés, j'utilise soit la notation par points, soit la notation par crochets. Et ne me lancez pas avec .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 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는 어렵습니다(ESadness 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿