Javascript adalah KERAS (dengan ESadness)

Ini akan menjadi bacaan yang panjang tetapi Biar saya katakan sekali lagi.
JAVASCRIPT adalah sukar. kali terakhir kami bertemu, saya sedang melangkah ke dunia Javascript, pengkode yang bermata cerah dan penuh harapan melangkah ke dalam hutan liar sambil berkata "Seberapa sukarnya?". Betapa salah saya??. Ia menjadi lebih sukar, saya masih bertahan (hampir tidak), inilah sedikit cerita huru-hara tentang perjalanan saya.

Pembolehubah: permulaan kegilaan
Pembolehubah ialah bekas yang menyimpan nilai, tempat anda menyimpan atau memanipulasi data. Maksud saya, mengapa kita mempunyai 3 cara untuk menciptanya: var, let dan const? kenapa? ketawa dalam ES6.
var: Mereka berkata var ialah meriam longgar. seperti bermain peluang. Jangan dekatinya.
biar: Bagus untuk pembolehubah yang boleh berubah. Lebih mudah diuruskan.
Const: adalah untuk nilai yang kekal sama. tak alih. Ohh — const tidak bermakna nilai tidak boleh berubah, ia hanya bermakna anda tidak boleh menetapkannya semula.
Nota: ECMAScript 2015 atau ES6 ialah semakan utama kedua kepada JavaScript.
Ooh, kami mengucapkan selamat tinggal kepada String Concatenation, Hello Template Literals. Dengan literal Templat Anda kini boleh menggunakan backticks dan membenamkan pembolehubah dengan mudah dengan ${}. Kehidupan menjadi lebih mudah di sini, tetapi memikirkan masa untuk menggunakan backticks vs petikan? Seorang lagi pengampu fikiran.

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

Fungsi: AKA En. Kebolehgunaan Semula, En. Kebolehselenggaraan...
Fungsi ialah satu set pernyataan yang melaksanakan tugas. Terdiri daripada kata kunci fungsi, nama fungsi, parameter atau tidak, pernyataan Js dalam kurungan kerinting.

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

Ia kelihatan mudah pada mulanya: merangkum beberapa logik, memanggilnya (saya katakan memanggilnya), dan meledak! Anda mengekod.
Kemudian ES6 berkata "Ini adalah fungsi anak panah, gunakannya". Fungsi anak panah kelihatan mudah, bukan? Hanya cara singkat untuk menulis fungsi. Mengambil sedikit masa saya mendapat sintaks.

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

Gelung: Menari dengan Infiniti.
Pelbagai Cara untuk Menderita. Gelung boleh melaksanakan blok kod beberapa kali. Mereka berguna, jika anda ingin menjalankan kod yang sama berulang kali, setiap kali dengan nilai yang berbeza. Mereka banyak:
1. Manakala Gelung: terus bergelung selagi syaratnya benar. jahat. dan saya tidak bercakap tentang sepupunya, sambil-sambil.
2. untuk Gelung: Gelung lama yang bagus, kawanku. gelung yang boleh dipercayai. Begitu biasa. Sangat selamat dan Sangat berpotensi untuk melontarkan gelung tak terhingga apabila anda terlupa untuk menambah pembolehubah.
3. forEach: yang seperti gelung for yang lebih sejuk dan lebih hipster sepupu. Ia tidak memerlukan kaunter, tidak membawa saya ke infiniti. lelaki saya.
4. & 5. untuk..dalam dan untuk..daripada: Satu bagus untuk menggelung objek, satu lagi bertujuan untuk mengulang tatasusunan. Saya terus mencampurkannya dan saya belajar melalui kesakitan. masih belajar.

//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));

Array: Senarai yang terus memburu
Tatasusunan bermula dengan begitu menjanjikan. Senarai mudah item. Tolak barang ke dalam, tarik barang keluar. Mudah kan?

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

Masukkan penapis, peta dan cari serta kumpulan kaedah tatasusunan yang lain. Otak saya tidak lagi sama sejak itu.
Kaedah penapis() mencipta tatasusunan baharu yang diisi dengan elemen yang lulus ujian yang disediakan oleh fungsi.
Kaedah find() mengembalikan nilai elemen pertama yang lulus ujian. Kaedah tatasusunan sangat banyak, saya perlukan dokumentasi untuk setiap satu?, maksud saya ada panjang, sambung, potong, sambung, pop, tolak, nyahshift, anjakan, peta.., mari berhenti di sini.

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

Objek: Sepupu Array yang Mengelirukan
Kemudian datang objek. Objek adalah seperti tatasusunan, tetapi dengan kunci dan nilai. Saya seperti, "Sejuk, saya boleh menangani ini." Tetapi kemudian JavaScript melemparkan kaedah, dan tiba-tiba objek melakukan sesuatu sendiri. Dan kemudian pelbagai objek memasuki persamaan. Mengakses sifat saya sama ada menggunakan notasi titik atau notasi kurungan. Dan jangan mulakan saya dengan .ini

//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

Atas ialah kandungan terperinci Javascript adalah KERAS (dengan ESadness). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!