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 중국어 웹사이트의 기타 관련 기사를 참조하세요!